1. المواصفات النحوية الأساسية
تحليل عبارة CSS النموذجية:
ص {اللون:#FF0000؛الخلفية:#FFFFFF}
من بينها، "p" يسمى "محددات"، مما يشير إلى أننا نريد تحديد نمط "p"؛
تتم كتابة إعلانات النمط في زوج من الأقواس المتعرجة "{}"؛
يُطلق على اللون والخلفية اسم "الخصائص"، ويتم الفصل بين الخصائص المختلفة بفواصل منقوطة ";";
"#FF0000" و"#FFFFFF" هي قيم السمات.
2. قيمة اللون
يمكن كتابة قيم الألوان بقيم RGB، على سبيل المثال: color : rgb(255,0,0)، أو بالنظام الست عشري، كما في المثال أعلاه color:#FF0000. إذا تكررت القيم السداسية العشرية في أزواج فيمكن اختصارها بنفس التأثير. على سبيل المثال: يمكن كتابة #FF0000 كـ #F00. ومع ذلك، لا يمكن اختصاره إذا لم يتكرر. على سبيل المثال، يجب ملء #FC1A1B بستة أرقام.
3. تحديد الخط
توصي معايير الويب بطرق تعريف الخط التالية:
body { عائلة الخط : "Lucida Grande"، Verdana، Lucida، Arial، Helvetica، 宋体، sans-serif }
يتم تحديد الخطوط بالترتيب المذكور. إذا كان جهاز الكمبيوتر الخاص بالمستخدم يحتوي على خط Lucida Grande، فسيتم تسمية المستند باسم Lucida Grande. إذا لم يكن الأمر كذلك، فسيتم تعيينه كخط Verdana، وإذا لم يكن هناك Verdana، فسيتم تعيينه كخط Lucida، وهكذا؛
خط Lucida Grande مناسب لنظام التشغيل Mac OS X؛
خط Verdana مناسب لجميع أنظمة الويندوز؛
لوسيدا مناسبة لمستخدمي UNIX
"Song Ti" مناسب للمستخدمين الصينيين المبسطين؛
إذا لم يتوفر أي من الخطوط المدرجة، فسيتم ضمان استدعاء خط sans-serif الافتراضي؛
4. محدد المجموعة
عندما يكون لدى عدة عناصر نفس سمات النمط، يمكن استدعاء العبارة معًا، ويتم فصل العناصر بفواصل: p, td, li {font-size: 12px }
5. اشتقاق المحددات
يمكنك استخدام المحددات المشتقة لتحديد أنماط العناصر الفرعية داخل العنصر، على سبيل المثال:
لي قوي { نمط الخط: مائل الوزن: عادي }
إنه تحديد نمط مائل ولكن ليس جريئًا للعنصر الفرعي القوي الموجود أسفل li.
6.محدد الهوية
يتم تنفيذ التخطيط باستخدام CSS بشكل أساسي باستخدام الطبقة "div"، ويتم تحديد نمط div من خلال "محدد المعرف". على سبيل المثال، نقوم أولاً بتعريف الطبقة
<div id="menubar"></div>
ثم قم بتعريفه بهذه الطريقة في ورقة الأنماط:
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
حيث "menubar" هو اسم المعرف الذي تحدده. لاحظ علامة "#" في المقدمة.
كما يدعم محدد المعرف الاشتقاق، على سبيل المثال:
#menubar ع { محاذاة النص : الهامش العلوي : 10 بكسل }
تُستخدم هذه الطريقة بشكل أساسي لتحديد الطبقات والعناصر الأكثر تعقيدًا والتي تحتوي على عناصر مشتقة متعددة.
6. محدد الفئة
استخدم نقطة في CSS للإشارة إلى تعريف محدد الفئة، على سبيل المثال:
.14 بكسل {اللون: #f60؛ حجم الخط: 14 بكسل؛}
في الصفحة، استخدم طريقة class="category name" للاتصال:
<span class="14px">حجم الخط 14 بكسل</span>
هذه الطريقة بسيطة ومرنة نسبيًا، ويمكن إنشاؤها وحذفها في أي وقت وفقًا لاحتياجات الصفحة.
7. تحديد نمط الارتباط
يتم استخدام أربع فئات زائفة في CSS لتحديد أنماط الارتباط، وهي: a:link وa:visited وa:hover وa:active، على سبيل المثال:
أ: الرابط {وزن الخط: غامق؛ زخرفة النص: لا شيء؛ اللون: #c00؛}
أ: تمت الزيارة {وزن الخط: غامق؛ زخرفة النص: لا شيء؛ اللون: #c30؛}
أ:تحويم {وزن الخط: غامق؛ زخرفة النص: تسطير؛ اللون: #f60؛}
أ: نشط {وزن الخط: غامق؛ زخرفة النص: لا شيء؛ اللون: #F90؛}
تحدد العبارات المذكورة أعلاه على التوالي أنماط "الارتباطات، والارتباطات التي تمت زيارتها، وعند مرور الماوس، وعند النقر بالماوس". لاحظ أنه يجب عليك الكتابة بالترتيب أعلاه، وإلا فقد يختلف العرض عما توقعته. تذكر أنهم بالترتيب "LVHA".
هاها، بعد أن قرأت الكثير، أشعر بالدوار قليلاً. في الواقع، هناك العديد من المواصفات النحوية لـ CSS، وإليك بعض المواصفات الشائعة الاستخدام. بعد كل شيء، نحن نتعامل معها خطوة بخطوة، ومن المستحيل أن تصبح سمينًا في لقمة واحدة :)