این آموزش در تاریخ ۱۴۰۰/۱۱/۰۵ آپدیت شده است.
آموزش دستور import در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش دستور import در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
دستور import در CSS
با استفاده از دستور / قانون import@ در CSS میتوان به راحتی فایل های CSS خارجی ( مجزا ) رو وارد یک فایل CSS کرد.
یعنی مثلا من یه فایل CSS دارم و داخل این فایل میخوام چندین فایل CSS دیگه رو وارد کنم یا عملا ایمپورت کنم که با استفاده از این ویژگی به راحتی میتوان اینکارو انجام داد.
همچنین این ویژگی از Media Queries پشتیبانی میکند، یعنی با استفاده از این ویژگی میتوان مشخص کرد که مثلا این فایل CSS وارد شده مخصوص دستگاهای موبایل می باشد یا نه مثلا برای صفحاتی هستند که قرار است چاپ یا پرینت شوند.
Free-Learn
مثال از این دستور
در ادامه میتوانید یک مثال از دستور import@ را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده از حالت رشته ای ( آدرس فایل CSS رو داخل دابل کوتیشن میزاریم )
|
1 2 3 4 5 |
<style> @import "files/mystyle.css"; </style> |
مثال شماره ۲ : استفاده از آدرس URL مطلق ( مثلا فایل CSS رو میخوام از یه آدرس اینترنتی وارد فایلم کنم )
|
1 2 3 4 5 |
<style> @import "https://files.free-learn.ir/Tryitself/css/property/files/mystyle.css"; </style> |
مثال شماره ۴ : ایجاد پرس جو – فایل وارد شده برای صفحاتی که قرار هست پرینت یا چاپ شوند می باشد
|
1 |
@import "printstyle.css" print; |
مثال شماره ۵ : ایجاد پرس جو – فایل وارد شده برای صفحه نمایش می باشد و دستورات CSS موجود در فایل وارد شده برای موبایل می باشد ، یعنی هرموقع اندازه صفحه نمایش کوچکتر از ۷۶۸ پیکسل شد فایل mobstyle.css روی صفحه اعمال میشه
|
1 |
@import "mobstyle.css" screen and (max-width: 768px); |
Free-Learn
جدول مشخصات دستور import در CSS
در جدول زیر میتوانید مشخصات کلی این دستور را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | – |
|---|---|
| قابل ارث بری | – |
| قابل متحرک سازی | – |
| نسخه | CSS1 |
| نحوه استفاده در جاوااسکریپت | – |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از دستور import@ در CSS پشتیبانی میکنند یا خیر.
| نام دستور / قانون | Chrome | Firefox | Opera | Safari | Edge |
| import@ | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این دستور در CSS بصورت زیر می باشد.
|
1 |
@import URL | String MediaQueries; |
Free-Learn
جدول مقادیر دستور import در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این دستور استفاده کرد مشاهده نمایید.
| مقدار | توضیح | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| URL | آدرس یا مسیر فایل CSS هم میتواند آدرس مطلق باشد و یا نسبی |
||||||||
| String | آدرس URL فایل CSS بصورت رشته ای | ||||||||
| MediaQueries | ایجاد محدودیت در اجرای دستورات CSS مثلا برای صفحه پرینت :
برای صفحه نمایش کامپیوتر ، لپ تاپ ، موبایل مثال :
برای صفحه نمایش و وقتی صفحه در حالت افقی قرار داشت
برای صفحه نمایش و وقتی اندازه صفحه کمتر از ۶۰۰ پیکسل شد
|
Free-Learn
نکات و توضیحات
- این دستور باید در ابتدای یک فایل CSS درست قبل از هر دستوری قرار بگیرد، ولی اگه میخواستید از دستور charset@ هم استفاده کنید باید import@ بعد از charset@ قرار بگیرد.
- اگر مشخص نکنید که مثلا فایل وارد شده برای چه رسانه ای ( یا چه دستگاهی ) مثلا برای موبایل یا صفحه پرینت می باشد بصورت پیش فرض اون فایل وارد شده برای تمامی (all) رسانه ها مشخص میشود.
