بناء جملة CSS

تفصيل بناء الجملة CSS

تتكون ورقة أنماط CSSمن مجموعة من القواعد التي يتم معالجتها بواسطة متصفح الويب ثم تطبيقها على العناصر المستهدفة مثل الفقرات والعناوين وما إلى ذلك في الصفحة.
تحتوي قاعدة CSS على جزأين رئيسيين، المحدد Selector وواحد أو أكثر من الإعلانات Declarations على النحو التالي:


css-selector

يحدد المحدد selector العنصر أو العناصر الموجودة في صفحة HTML التي تنطبق عليها قاعدة CSS.
وحيث أن الإعلانات داخل الاقواس المجعدة { } block تحدد كيفية تنسيق العناصر على صفحة ويب. يتكون كل إعلان من خاصية property وقيمة value مفصولة بنقطتين رأسيتين : وتنتهي بفاصلة منقوطة ;، ومجموعات الإعلانات محاطة بأقواس مجعدة { }. الخاصية التي نريد تغييرها. يمكن أن تكون الخط أو اللون أو الخلفية ، الخ.
كل خاصية لها قيمة، على سبيل المثال الخاصية color يمكن أن تكون لها القيمة إما blue أو #0000FF الخ.
ولجعل قواعد CSS اسهل للقراءة، يمكننا وضع كل إعلان في سطر منفصل،كما في المثال التالي:

مثال
تشغيل
  1. h1 {
  2. color: blue;
  3. text-align: center;
  4. }

في المثال أعلاه :
h1 هو محدد selector
color و text-align هي خصائص CSS
blue و center هي القيم المقابلة لهذه الخصائص.

ملاحظة:

ينتهي إعلان CSS دائمًا بفاصلة منقوطة ;، ومجموعات الإعلانات محاطة دائمًا بالأقواس المجعدة curly brackets { }.

كتابة التعليقات في CSS

عادة ما تتم إضافة التعليقات بهدف جعل الكود المصدري أسهل للفهم. مما قد يساعد المطور الآخر (او انت في المستقبل عندما تقوم بتعديل الكود المصدري source code) لفهم ما كنا نحاول القيام به مع CSS. التعليقات مهمة للمبرمجين ولكن يتم تجاهلها من قبل متصفحات الويب.
يبدأ التعليق في لغة CSS بـ /*، وينتهي بـ */ من اليسار إلى اليمين، كما هو موضح في المثال أدناه:

مثال
تشغيل
  1. /* This is a CSS comment */
  2. h1 {
  3. color: blue;
  4. text-align: center;
  5. }
  6. /* This is a multi-line CSS comment
    that spans across more than one line */
  7. p {
  8. font-size: 18px;
  9. text-transform: uppercase;
  10. }

وبنفس الطريقة السابقة يمكننا أيضًا التعليق على جزء من كود CSS لغرض تصحيح الاخطاء، كما هو موضح هنا:

مثال
تشغيل
  1. h1 {
  2. color: blue;
  3. text-align: center;
  4. }
  5. /*
  6. p {
  7. font-size: 18px;
  8. text-transform: uppercase;
  9. }
  10. */

حساسية حالة الأحرف Case Sensitivity في CSS

الخصائص property في لغة CSS والعديد من القيم values ليست حساسة لحالة الأحرف case-insensitive. ولاكن إن المحددات selector في لغة CSS عادةً ما تكون حساسة لحالة الأحرف case-sensitive، على سبيل المثال، فإن محدد الفئة .maincontent ليس هو نفسه .mainContent
لذلك، فإن من الأفضل أن نفترض أن كافة مكونات قواعد CSS حساسة للحالة الأحرف.

وفي الدرس القادم سوف نتعلم عن أنواع مختلفة من المحددات selector في لغةCSS

« التالي السابق »