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

قانون @import در css

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

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 به پایین پشتیبانی نمیشه.

 

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

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

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

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۱۵

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

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

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

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

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

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

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

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

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

  • با سلام
    ادامه این مبحث رو نمی گذارید
    فصل ششم : کلاس های کاذب در CSS
    فصل هفتم : قواعد چاپ در CSS
    فصل هشتم : محتوای داینامیک در CSS
    فصل نهم : Media Query ها در Css3

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

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

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین