هناك نوعان من قواعد بناء الجملة المضمنة في CSS:
القواعد العادية: تتألف من محددات وسمات وقيم، وقد استخدمنا هذا النوع من القواعد بشكل أساسي في الدراسات السابقة؛
@Rule: تبدأ بـ @ وتتبعها كلمة أساسية، وتسمى أيضًا "قاعدة AT"، ويمكن تقسيمها إلى " قاعدة عادية " و" قاعدة متداخلة " وفقًا لطرق الاستخدام المختلفة.
دعونا نقدم بشكل أساسي قاعدة @ في CSS.
1. القواعد العامة
تشير ما يسمى بـ "القواعد العادية" إلى قواعد ذات بناء جملة مشابه لما يلي:
@[الكلمة الرئيسية](القاعدة)؛
(1)@charset
يتم استخدام @charset لتعيين ترميز الأحرف المستخدم في ملفات CSS، ويكون تنسيق بناء الجملة كما يلي:
@charset<charset>;
من بينها، <charset> هو ترميز الأحرف المحدد، والقيمة الافتراضية هي "utf-8".
عليك الانتباه إلى النقاط التالية عند استخدامه:
① إذا تم تعيين @charset، فيجب أن يظهر في مقدمة ملف CSS، ولا يمكن أن تظهر أي أحرف قبل @charset؛
②يجب أن يتم تغليف ترميز الأحرف بين علامتي اقتباس مزدوجتين؛
③ يلزم استخدام مسافة لفصل اسم @rule (@charset) وترميز الأحرف المحددة؛
④لا يمكن حذف الفاصلة المنقوطة بعد القاعدة؛
⑤إذا تم تعيين @charsets متعددة، فإن العبارة الأولى فقط تكون صالحة؛
⑥@charset لا يمكن استخدامه في عناصر HTML أو علامات <style>؛
⑦إذا تم تعريف قواعد ترميز الأحرف المتعددة بطرق مختلفة، فسيكون ترتيب أولوياتها كما يلي:
● إعلان ترميز الأحرف في بداية ملف HTML؛
●إعلان ترميز الأحرف في رأس طلب HTTP؛
●يتم استخدام إعلان ترميز الأحرف المحدد بواسطة @charset في ملف CSS؛
●إعلان ترميز الأحرف الذي تم تعيينه بواسطة سمة مجموعة الأحرف في علامة <link> (تم إهمالها في HTML5).
يوضح المثال التالي استخدام @charset، بالإضافة إلى عدة أمثلة للأخطاء:
/*قم بتعيين تنسيق ترميز CSS على UnicodeUTF-8*/@charsetUTF-8;@charsetutf-8;/*غير حساس لحالة الأحرف*//*توضيح الخطأ*/@charset'iso-8859-15';/*نعم غير صالح، تم استخدام علامات الاقتباس الخاطئة */@charset'UTF-8';/*غير صالحة، تم استخدام علامات الاقتباس الخاطئة*/@charsetUTF-8;/*غير صالحة، هناك مسافة إضافية بين @charset وترميز الأحرف * /@charsetUTF-8;/*غير صالح، هناك مسافة إضافية قبل القاعدة @*/@charsetUTF-8;/*غير صالح، يجب أن يكون ترميز الأحرف محاطًا بعلامات اقتباس مزدوجة*/
(2) @استيراد
يُستخدم @import لاستيراد ملفات نمط أخرى إلى ملف نمط CSS الحالي. يمكن تقديم كل المحتوى باستثناء @charset في ملفات ورقة الأنماط الأخرى من خلال @import بالإضافة إلى ذلك، يجب أيضًا وضع @import في مقدمة ملف النمط. تنسيق بناء الجملة @import هو كما يلي:
@استيراد<url><media_query_list>
من بينها، <url> هو مسار ملف ورقة الأنماط الخارجي الذي سيتم استيراده باستخدام مسار مطلق أو نسبي. يمكنك أيضًا استخدام وظيفة url() لتحديد مسار الملف؛ <media_query_list> هو معلمة اختيارية تُستخدم لتحديد شروط استعلام الوسائط استخدم الفواصل للفصل بين الشروط المتعددة.
في المشاريع الفعلية، لا يُنصح باستخدام @import أكثر من اللازم، لأنه سيؤدي إلى الكثير من الطلبات الإضافية ويمنع تحميل الملفات الأخرى.
عند استخدام @import، عليك أيضًا الانتباه إلى النقاط التالية:
يجب الإعلان عن @import أولاً في بداية ملف ورقة الأنماط، ويجب أن ينتهي الإعلان بفاصلة منقوطة. إذا تم حذف الفاصلة المنقوطة، فقد لا يتم استيراد ورقة الأنماط الخارجية بشكل صحيح؛
●يمكن أن يؤدي استخدام @import في متصفح IE إلى تقديم ما يصل إلى 35 ورقة أنماط فقط.
يوضح المثال التالي استخدام @import:
@importurl(global.css);@importurl(global.css);@importglobal.css;@importurl(fineprint.css)print;@importurl(bluish.css)projection,tv;@import'custom.css';@ importurl(chrome://communicator/skin/);@importcommon.cssscreen,projection;@importurl('landscape.css')screenand(orientation:landscape);جميع طرق التعريف المذكورة أعلاه صالحة عند استخدام url() لتعيين مسار ملف ورقة الأنماط، تكون علامات الاقتباس لمسار الالتفاف اختيارية؛ يجب الاحتفاظ بمسار التفاف علامات الاقتباس.
(3)@مساحة الاسم
يُستخدم @namespace لتحديد قاعدة @ لمساحة اسم XML في ورقة أنماط CSS، ويمكنه تعيين مساحة الاسم المحددة لجميع المحددات في ملف النمط الحالي. يتم استخدام @namespace عادةً للتعامل مع المستندات التي تحتوي على مساحات أسماء متعددة، مثل SVG المضمنة في HTML5 أو MathML أو XML الممزوجة بمفردات متعددة.
يجب تعريف @namespace بعد كل @charset و@import، وقبل أي تعريفات أنماط أخرى في ورقة الأنماط. يمكن استخدام @namespace لتحديد مساحة الاسم الافتراضية. عند تحديد مساحة الاسم الافتراضية، سيتم تطبيق جميع المحددات العامة ومحددات الفئة (ولكن ليس محددات السمات) على العناصر الموجودة في مساحة الاسم هذه فقط. يمكن أيضًا استخدام @namespace لتعريف بادئة مساحة الاسم. عندما يكون محدد عام أو فئة أو سمة مسبوقًا ببادئة مساحة اسم، فإن هذا المحدد سيطابق فقط العناصر التي تتطابق مساحة الاسم معها مع اسم العنصر أو السمة.
يوضح المثال التالي استخدام @namespace:
/*مساحة الاسم الافتراضية*/@namespaceurl(XML-namespace-URL);@namespaceXML-namespace-URL;/*بادئة مساحة الاسم*/@namespaceprefixurl(XML-namespace-URL);@namespaceprefixXML-namespace-URL;
2. القواعد المتداخلة
ما يسمى بـ "القواعد المتداخلة" يعني أن القاعدة @ يجب أن يتبعها قوس متعرج { }، والذي يحتوي على بعض إعلانات القواعد الأخرى، على غرار ما يلي:
@[KEYWORD]{/*العبارات المتداخلة* /}(1)@ميديا
يتم استخدام @media لتطبيق جزء معين من ورقة الأنماط (معلومات النمط بين قوسين متعرجين) بناءً على نتائج واحد أو أكثر من استعلامات الوسائط. باستخدام @media، يمكنك تحديد مجموعة من استعلامات الوسائط وكتلة نمط CSS فقط إذا كانت الوسائط يتم تطبيق أنماط CSS المحددة على المستند فقط عندما يتطابق الاستعلام مع الجهاز المستخدم.
استعلام الوسائط عبارة عن مجموعة من الشروط المستخدمة لتحديد معلومات الجهاز، مثل قيمة عرض الجهاز وارتفاعه ونسبة العرض إلى الارتفاع واللون والدقة وما إلى ذلك. عندما تتطابق الشروط، سيتم تنفيذ معلومات النمط المتداخلة.
يمكن وضع @media في أي مكان في ورقة الأنماط أو في قواعد @ الأخرى. نموذج التعليمات البرمجية كما يلي:
@mediaalland(min-width:1280px){/*العرض أكبر من 1280*/}@media(-webkit-min-device-pixel-ratio:1.5),(min-resolution:2dppx){/*شاشة Retina*/ } @mediaprint{/*print*/}@media screen,screen9{/*IE7,IE8*/}@mediascreen9{/*IE7*/}(2)@الصفحة
يتم استخدام @page لتعديل بعض خصائص CSS عند طباعة مستند. تجدر الإشارة إلى أنه باستخدام @page يمكنك فقط تعديل بعض خصائص CSS، مثل هامش خاصية التباعد الخارجي، والأشياء اليتيمة المتعلقة بالطباعة، وخصائص Windows، وفاصل الصفحات. -* الخصائص، سيتم تجاهل خصائص CSS الأخرى.
/*يشير إلى أن الهامش العلوي واليسرى للصفحة الأولى عند الطباعة يبلغ 50%*/@page:first{margin-left:50%;margin-top:50%;}(3) @ يدعم
يتم استخدام @supports للتحقق مما إذا كان المتصفح يدعم ميزة معينة في CSS، والمعروفة أيضًا باسم "الاستعلام عن الميزة". بنية صياغة هذه القاعدة هي كما يلي:
@supports(rule)[operator(rule)]*{sRules};من بينها، القاعدة هي نمط CSS محدد ويجب وضعها بين قوسين؛ القيم الاختيارية للمشغل هي أو، ويمكن تحديد أنماط CSS متعددة من خلال معلمة المشغل.
يمكن تعريف @supports في الجزء العلوي من ملف النمط أو ضمن قواعد متداخلة أخرى. ومع ذلك، @supports لا يزال في المرحلة التجريبية قبل استخدامه، يجب عليك أولاً التأكد مما إذا كان المتصفح يدعمه.
يوضح المثال التالي استخدام @supports:
/*نمط CSS يُستخدم عندما يدعم المتصفح العرض: سمة الشبكة*/@supports(display:grid){div{display:grid;}}/*يُستخدم نمط CSS عندما لا يدعم المتصفح العرض:الشبكة نمط السمة*/@supportsnot(display:grid){div{float:right;}}/*التحقق من شروط متعددة في نفس الوقت*/@supports(display:flex)and(-webkit-appearance:checkbox){.module {العرض: فليكس؛}}(4) @الخط الوجه
يتم استخدام @font-face لتحميل الخط المحدد من الخادم البعيد أو المستخدم محليًا، ويكون تنسيق بناء الجملة كما يلي:
@font-face{font-family:<identifier>;src:<url>[format(<string>)][,<url>[format(<string>)]]*;<font>;}وصف المعلمة كما يلي:
●<المعرف>: اسم الخط؛
●<url>: استخدم url() (الخط البعيد) أو local() (الخط المحلي) لتحديد مسار تخزين الخط، والذي يمكن أن يكون مسارًا نسبيًا أو مسارًا مطلقًا؛
●<string>: يُستخدم لتحديد تنسيق الخطوط المخصصة، مثل الأنواع التالية: truetype، وopentype، وembedded-opentype، وsvg، وما إلى ذلك؛
●<font>: تحديد الأنماط ذات الصلة بالخط.
نصيحة: يمكن وضع @font-face أعلى ورقة أنماط CSS أو ضمن قواعد متداخلة أخرى. إذا كنت تستخدم كلاً من الدالة local() والدالة url() لتحميل الخطوط، فسيتم تحميل الخط المحلي المحدد في الدالة local() أولاً. وإذا لم يتم العثور عليه، فسيتم تحميل الخط البعيد المحدد في الدالة url() محملة.
يوضح المثال التالي استخدام @font-face:
/*تحديد قواعد @font-face*/@font-face{/*تحديد اسم الخط*/font-family:OpenSans;/*تحديد المسار إلى ملف الخط*/src:url(/fonts/OpenSans-Regular -webfont.woff2)format(woff2),url(/fonts/OpenSans-Regular-webfont.woff)format(woff);}/*تطبيق الخط*/p{font-family:OpenSans;}(5)@إطارات مفتاحية
يتم استخدام @keyframes لتحديد نمط الإطارات الرئيسية للرسوم المتحركة (أو نقاط الطريق) في CSS3 للتحكم في الخطوات الوسيطة في تسلسل الرسوم المتحركة. بعد تحديد هذه القاعدة، تحتاج إلى استخدامها من خلال سمة اسم الرسوم المتحركة. تتم تسمية تسلسلات الإطارات الرئيسية حسب النسب المئوية، حيث تمثل حالات البداية والنهاية من وإلى 0% و100% على التوالي.
تنسيق بناء الجملة @keyframes هو كما يلي:
@keyframes<identifier>{<keyframes-blocks>}من بينها، يتم استخدام <identi fier> لتحديد اسم الرسوم المتحركة؛ ويتم استخدام <keyframes-blocks> لتحديد نمط الرسوم المتحركة في كل مرحلة، أي الرسوم المتحركة للإطار.
يتم توضيح استخدام @keyframes في المثال التالي:
/*Statement*/@keyframessslidein{from{margin-left:100%;width:300%;}to{margin-left:0%;width:100%;}}@keyframessslideout{0%{top:0;} 50%{top:30px;}100%{top:60px;}}/*تطبيق*/p{animation-name:slidein;animation-duration:4s;}div{animation-name:slideout;animation-duration:4s ;}(6)@وثيقة
يتم استخدامdocument لتحديد نطاق الأنماط في المستند استنادًا إلى عنوان URL للمستند. يمكن استخدام هذه السمة لتحديد أنماط حصرية لمستخدمين محددين. حاليًا، لا يزال @document في المرحلة التجريبية، وسيتم تحديد المعايير المحددة في CSS4.
الوظائف المتوفرة في @document هي كما يلي:
●url(): يطابق عنوان URL بالكامل؛
●url-prefix(): ما إذا كان عنوان URL للمستند المطابق يبدأ بالقيمة المحددة بواسطة المعلمة؛
●domain(): ما إذا كان اسم المجال للمستند المطابق هو اسم المجال المحدد في المعلمة أو اسم المجال الفرعي الخاص به؛
●regexp(): ما إذا كان عنوان URL للمستند المطابق يتطابق مع التعبير العادي المحدد في المعلمة أم لا، ويجب أن يتطابق التعبير مع عنوان URL بالكامل.
نصيحة: يمكن تغليف المعلمات المتوفرة للوظائف url() وurl-prefix() وdomain() بدون علامات الاقتباس، ولكن يجب تغليف المعلمات المتوفرة للوظيفة regexp() بين علامات الاقتباس.
يوضح المثال التالي استخدام @document:
@documenturl(http://www.weixueyuan.net/),url-prefix(http://www.weixueyuan.net/Style/),domain(weixueyuan.net),regexp(https:.*){/* سيتم تطبيق قاعدة CSS هذه على صفحات الويب التالية: + الصفحة التي يكون عنوان URL الخاص بها هو http://www.weixueyuan.net/ + أي صفحة ويب يبدأ عنوان URL الخاص بها بـ http://www.weixueyuan.net/Style/ + اسم النطاق weixueyuan. جميع صفحات الويب ضمن net + أي صفحات ويب يبدأ عنوان URL الخاص بها بـ https:*//*define style*/body{color:purple;background:yellow;}