آموزش دستور import در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش دستور import در CSS با من همراه باشید.

آموزش دستور import در CSS

Free-Learn

دستور import در CSS

با استفاده از دستور / قانون import@ در CSS میتوان به راحتی فایل های شیوه نامه ( منظور همون فایل های CSS مجزا می باشد ) را وارد یک فایل CSS کرد.

یعنی مثلا من یه فایل CSS دارم و داخل این فایل میخوام چندین فایل CSS دیگه رو وارد کنم یا عملا ایمپورت کنم که با استفاده از این ویژگی به راحتی میتوان اینکارو انجام داد.

همچنین این ویژگی از Media Queries پشتیبانی میکند، یعنی با استفاده از این ویژگی میتوان مشخص کرد که مثلا این فایل CSS وارد شده مخصوص دستگاهای موبایل می باشد یا نه مثلا برای صفحاتی هستند که قرار است چاپ یا پرینت شوند.

Free-Learn

مثال از این دستور

در ادامه میتوانید یک مثال از دستور import@ را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : استفاده از حالت رشته ای

امتحان کنید

مثال شماره ۲ : استفاده از آدرس URL مطلق ( مثلا فایل CSS رو میخوام از یه آدرس اینترنتی وارد فایلم کنم )

امتحان کنید

مثال شماره ۳ : استفاده از آدرس URL نسبی

 

مثال شماره ۴ : ایجاد پرس جو – فایل وارد شده برای صفحاتی که قرار هست پرینت یا چاپ شوند می باشد

 

مثال شماره ۵ : ایجاد پرس جو – فایل وارد شده برای صفحه نمایش می باشد و دستورات CSS موجود در فایل وارد شده برای موبایل می باشد ( واکنش گرایی ) – یعنی هرموقع اندازه صفحه نمایش کوچکتر از ۷۶۸ پیکسل شد دستورات CSS فایل mobstyle.css اعمال می شوند

Free-Learn

جدول مشخصات دستور import در CSS

در جدول زیر میتوانید مشخصات کلی این دستور را در زبان CSS مشاهده نمایید.

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

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از دستور import@ در CSS پشتیبانی میکنند یا خیر.

نام دستور / قانون Chrome Firefox Opera Safari IE
import@ ۴٫۰ ۲٫۰ ۱۰٫۰ ۳٫۱ ۶٫۰

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این دستور در CSS بصورت زیر می باشد.

Free-Learn

جدول مقادیر دستور import در CSS

در جدول زیر میتوانید، مقادیری را که میتوان در این دستور استفاده کرد مشاهده نمایید.

مقدار توضیح
URL آدرس یا مسیر فایل CSS
هم میتواند آدرس مطلق باشد و یا نسبی
String آدرس یا مسیر فایل CSS
MediaQueries ایجاد محدودیت در اجرای دستورات CSS
برای صفحه پرینت مثال :

برای صفحه نمایش کامپیوتر ، لپ تاپ ، موبایل مثال :

برای صفحه نمایش و وقتی صفحه در حالت افقی قرار داشت

برای صفحه نمایش و وقتی اندازه صفحه کمتر از ۶۰۰ پیکسل شد

Free-Learn

نکات و توضیحات

این دستور باید در ابتدای یک فایل CSS درست قبل از هر دستوری قرار بگیرد، ولی اگه میخواستید از دستور charset@ هم استفاده کنید باید import@ بعد از charset@ قرار بگیرد.

اگر مشخص نکنید که مثلا فایل وارد شده برای چه رسانه ای ( یا چه دستگاهی ) مثلا برای موبایل یا صفحه پرینت می باشد بصورت پیش فرض اون فایل وارد شده برای تمامی (all) رسانه ها مشخص میشود.

محتویات فایل my-css-1.css که در مثال شماره ۱ و ۲ استفاده شده است دستورات زیر می باشند :


Free-Learn

دریافت PDF یا پرینت این مطلب