قانون @import در css

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

قانون @import

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

@import url("/css/style.css")

و یا

@import "style.css"

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

<link rel="stylesheet" type="text/css" href="main.css" />

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

مثال:

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

Body{

font-family:Tahoma;

color:red;

}

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

Body{

Margin:0;

Padding:0;

}

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

@import url('style.css');

Body{

font-family:Tahoma;

color:red;

}

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

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

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

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

@import url(“/css/style.css”) screen, projection;

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

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

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