بنية CSS

فهم بناء جملة CSS

تتكون ورقة أنماط CSS من مجموعة من القواعد التي يتم تفسيرها بواسطة مستعرض الويب ثم يتم تطبيقها على العناصر المقابلة مثل الفقرات والعناوين وما إلى ذلك في المستند.

تتكون قاعدة CSS من جزأين رئيسيين ، محدد وواحد أو أكثر من التعريفات:

يحدد المحدد العنصر أو العناصر التي تنطبق عليها قاعدة CSS في صفحة HTML.

حيث إن الإعلانات داخل الكتلة تحدد كيفية تنسيق العناصر على صفحة ويب. يتكون كل إعلان من خاصية وقيمة مفصولة بنقطتين ( :) وتنتهي بفاصلة منقوطة ( ;) ، وتحيط مجموعات التصريح بأقواس معقوفة {}.

الخاصية هي سمة النمط التي تريد تغييرها ؛ يمكن أن تكون الخط واللون والخلفية وما إلى ذلك. كل خاصية لها قيمة ، على سبيل المثال يمكن أن يكون لخاصية اللون قيمة blueأو ما #0000FFإلى ذلك.

لجعل CSS أكثر قابلية للقراءة ، يمكنك وضع إعلان واحد في كل سطر ، على النحو التالي:

h1 {
    color: blue;
    text-align: center;
}

في المثال أعلاه h1، يوجد محدد ، colorوخصائص text-alignCSS ، والقيم المعطاة blueوالقيم centerالمقابلة لهذه الخصائص.

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

تُضاف التعليقات عادةً بغرض تسهيل فهم الكود المصدري. قد يساعد المطور الآخر (أو أنت في المستقبل عند تحرير شفرة المصدر) لفهم ما كنت تحاول القيام به باستخدام CSS. التعليقات مهمة للمبرمجين ولكن المتصفحات تتجاهلها.

يبدأ تعليق CSS بـ /*وينتهي */، كما هو موضح في المثال أدناه:

/* This is a CSS comment */
h1 {
    color: blue;
    text-align: center;
}
/* This is a multi-line CSS comment 
that spans across more than one line */
p {
    font-size: 18px;
    text-transform: uppercase;
}

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

h1 {
    color: blue;
    text-align: center;
}
/*
p {
    font-size: 18px;
    text-transform: uppercase;
}
*/

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

أسماء خصائص CSS والعديد من القيم ليست حساسة لحالة الأحرف. في حين أن محددات CSS عادة ما تكون حساسة لحالة الأحرف ، على سبيل المثال ، محدد الفئة .maincontentليس هو نفسه .mainContent.

لذلك ، لكي تكون في الجانب الأكثر أمانًا ، يجب أن تفترض أن جميع مكونات قواعد CSS حساسة لحالة الأحرف.

ستتعرف على الأنواع المختلفة لمحددات CSS في الفصل التالي .