آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

قانون @import در css

bag

فصل پنجم : قوانین در CSS

جلسه اول : قانون @import

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

در این فصل از css قصد دارم قوانینی که در css موجود هست رو خدمتتون آموزش بدم و شمارو با این قوانین آشنا کنم. در این جلسه در رابطه با قانون  و یا هک @import صحبت مکنیم.

 

قانون @import

توسط این قانون میتونید دو فایل css رو باهم ادغام کنید. به عنوان مثال یک فایل css بنام main.css دارید و میخواین دستورات یک فایل دیگه هم بهش اضافه کنید ، میتونید به دو صورت این کار رو انجام بدید:

و یا

 

از روش اول معمولا در صفحات html استفاده میشه زمانی که میخواین فایل cssتون رو به صفحه اضافه کنید. من این کار رو پیشنهاد نمیکنم بهتره از دستور زیر استفاده کنید. البته از این روش هم در فایل های css استفاده میشه.

 

روش دوم برای افزودن فایل css به یک فایل css دیگه استفاده میشه ، مثلا شما ابتدای فایل main.css فایل style.css رو هم اضافه میکنید و فایل main.css رو در html اضافه میکنید.

مثال:

محتوای فایل main.css :

محتوای فایل style.css

زمانی که فایل style.css رو به main.css اضافه میکنید ، دستورات به شکل زیر تغییر می کنند:

 

و با افزودن تنها فایل main.css به صفحه ی html ، تمامی دستورات style.css و main.css در صفحه ی html بارگزاری میشه.

 

نکته اول : قوانین @import باید در ابتدای فایل css فراخوانی شوند.

نکته دوم : هر تعداد فایل css یی که احتیاج دارید رو میتونید از این طریق به css اصلیتون اضافه کنید.

 

علاوه بر این میتونید تعریف کنید که مثلا فایل style.css که در main.css اضافه کردم توسط چه نوع دستگاه هایی قابل اجرا باشه! برای این کار باید نوع اجراکننده رو بعد از دستور مشخص کنید:

البته این نوع تعریف توسط IE7 به پایین پشتیبانی نمیشه.

 

امیدوارم که این آموزش براتون مفید بوده باشه.

موفق و پاینده باشید

تهیه شده در مدرسه مجازی ایرانیان

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • Mj

    هر کاری کردم کار نکرد
    به هر حال ممنون!

    • میترا رحیمی

      سلام دوست عزیز
      مشکلتون چیه؟ مطرح کنید تا بررسی کنیم و برطرف کنیم.
      موفق و پاینده باشید

  • Mj

    کد رو به هر شکل و هر کجا قرار میدم عمل نمیکنه
    چند بار هم امتحان کردم

    • میترا رحیمی

      فایل یا کدتون رو ارسال کنید تا بررسی کنیم.

  • Mj

    معذرت میخوام الان یک بار دیگه تست کردم و کار کرد احتمالا در دفعه قبل اشتباهی میکردم
    ممنون

  • mekaeil

    سلام
    ممنون از توضیحاتتون
    سوالی که برام پیش اومده اینه که برای مجزا کردن فایل در سایزهای مختلف چه جوری میشه کاری کرد که مثلا فقط وقتی با موبایل وارد شدیم یک استایل خاص رو استفاده کنه
    بحث مدیا کویری رو میدونم فقط میخوام بدونم امکانش هست برای یک نسخه موبایل خاص اینکار رو کرد ؟

    • میترا رحیمی

      سلام دوست عزیز
      برای موبایل یا هر رزولوشنی که مد نظرتون هست میتونید با مدیاکوئری ها استایل مورد نظرتون رو تعریف کنید ولی نمیتونید نسخه ی خاصی از موبایل رو مشخص کنید.

  • farhad

    سلام من یک سوالی دارم از شما که جوابشو جای دیگه پیدا نکردم.

    در روش دوم که فرمودید یک فایل css (مثل reset.css) را در خط اول main.css با دستور import اضافه کنیم ،
    چه مزیت و معایبی نسبت به اینکه دوتاشو با دوستور
    link در صفحه اول اضافه کنیم داره؟

    • میترا رحیمی

      سلام دوست عزیز
      شخصا تفاوت خاصی احساس نمیکنم فقط مرورگرهای قدیمی import در صفحه ی html رو پشتیبانی نمیکنند واستاندارد اینه که شما از link استفاده کنید .
      تفاوت فنی بین این دو متد نیست .
      موفق و پاینده باشید

  • حسین حسنی

    خانم رحیمی فکر کنم یه قسمتی از کدها رو فراموش کردین اضافه کنین.اون قسمتی که گفتین در فایل اصلی css فایلهای css دیگه رو اضافه کنیم باید قبل از پرانتز یه دونه url بنویسیم
    @import URL(‘style.css’)
    اگه درست گفتم اینو لطف کنین درستش کنین تا دوستان سردرگم نشن.
    باتشکر

    • میترا رحیمی

      سلام دوست عزیز
      ممنون از توجه شما.
      بله در مثال اول خیر درسته اما در مثال دوم اشتباه بود که اصلاح شد، اگر پرانتز باشه باید url هم باشه اما اگر پرانتز نباشه url نیازی نیست.
      موفق باشید.

  • محسن سالاری فر

    با سلام و احترام
    مشتاقانه منتظر ادامه فصول آموزشی سی اس اس ۳ هستم. امیدوارم به زودی آموزش ها از سر گرفته بشه
    پایدار باشید

  • sajjadcr7

    سلام عالی بود مر۳۰

وبلاگ مدرسه

مختصری درباره ما
مدرسه مجازی ایرانیان در زمینه آموزش علوم و فنون طراحی و برنامه نویسی صفحات وب اعم از آموزش زبان های برنامه نویسی و کدنویسی و همچنین آموزش طراحی گرافیک توسط نرم افزارهای گرافیکی پیکسلی و برداری فعالیت دارد .
ورود به وبلاگ

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟