دستور  @import بسیار شبیه به تگ link در CSS است که می توانیم از آن در تگ style استفاده کنیم:

@import url(sheet2.css);

 درست مانند تگ link، با دستور @import نیز می توانیم به مرورگر وب دستور دهیم تا یک برگه ی استایل را بارگذاری کند و از استایل های آن در سند HTML استفاده کند. تفاوت اصلی این دستور با تگ link در سینتکس(شیوه ی نوشتار) و مکان قرار گیری این دستور است. همان طور که مشاهده می کنید، دستور @import  در درون تگ style قرار می گیرد. این دستور باید قبل از دیگر دستورات CSS قرار گیرد وگرنه اصلا کار نمی کند. مثال زیر را در نظر بگیرید:

<style type="text/css">
@import url(styles.css); /* در ابتدا قرار می گیرد @import دستور*/
h1 {color: gray;}
</style>

 مانند تگ link، می توانیم بیش از یک دستور @import در یک سند داشته باشیم.

اما برخلاف تگ link، استایل های دستور @import اگر بارگذاری شوند و مورد استفاده قرار گیرند، راهی برای تخصیص دادن برگه های استایل جایگزین برای آنها وجود ندارد. بنابراین، کدهای زیر را در نظر بگیرید:

@import url(sheet2.css);
@import url(blueworld.css);
@import url(zany.css);

 در کدهای بالا، تمام این برگه های استایل اکسترنال، بارگذاری می شوند و تمام کدهای آنها در سند مورد استفاده قرار می گیرند. ماند تگ link، ما می توانیم برگه های استایل import شده را به یک یا چند مدیا(media ) محدود کنیم. برای این انجام این کار، از دستورات مدیا پس از URL برگه های استایل دستور import استفاده می کنیم:

@import url(sheet2.css) all;
@import url(blueworld.css) screen;
@import url(zany.css) projection, print;

 همان طور که در صفحه 8، در بخش "تگ link" گفته شد، دستورات مدیا نسبتا پیچیده هستند و با جزئیات بیشتر، در فصل 20 مورد بررسی قرار خواهند گرفت. اگر ما یک برگه ی استایل اکسترنال داشته باشیم که نیاز داشته باشد که از استایل های درون یک برگه ی استایل اکسترنال دیگر استفاده کند، دستور @import بسیار به کار خواهد آمد. چون که برگه ها استایل اکسترنال نمی توانند حاوی هیچ کد html  از سند باشند، در داخل یک برگه ی استایل اکسترنال نمی توانیم از تگ link استفاده کنیم، اما می توانیم از دستور @import استفاده کنیم.  بنابراین، ما می توانیم یک برگه ی استایل اکسترنال داشته باشیم که حاوی کدهای زیر است:

@import url(http://example.org/library/layout.css);
@import url(basic-text.css);
@import url(printer.css) print;
body {color: red;}
h1 {color: blue;}

 کدهای بالا فقط بعنوان مثال آورده شده اند. به کاربرد URL های مطلق و نسبی، در مثال بالا توجه کنید. هر یک از این شکل های URL می توانند مورد استفاده قرار گیرند، مانند تگ link. همچنین توجه کنید که دستورات @import در ابتدای برگه ی استایل در مثال بالا قرار گرفته اند. در CSS ضروری است که دستور @import قبل از دیگر دستورات برگه ی استایل قرار گیرد. اگر دستور @import پس از دیگر دستورات قرار گیرد، توسط استاندارد های مرورگر نادیده گرفته خواهد شد.

نکته: نسخه های قدیمی تر اینترنت اکسپلورر در ویندوز، دستورات @import را نادیده نمی گیرند، حتی آنهایی که پس از دیگر کدها بیایند. دیگر مرورگرها، دستورهای @import  که در مکان نادرست قرار گرفته اند را نادیده می گیرند.

• بعدی
• قبلی