قواعد CSS

في هذا الدليل، سنتعلم كيفية تعريف قواعد CSS في جدولات النمط، حيث يمكنك تعيين أنماط العناصر HTML عبر خصائص CSS. قد تكون لديك خصائص مختلفة يمكن تعيينها لكل عنصر HTML. يمكن تنظيم خصائص CSS في قواعد CSS. تجمع القواعد مجموعة من خصائص CSS وتطبيقها على العناصر HTML التي تطابق قاعدة CSS.

فهم لغة CSS

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

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

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

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

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

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

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

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

في المثال السابقh1هو اختيار،colorوtext-alignهي خاصية CSS، بينماblue (لون النص داخل علامة h1 هو أزرق)وcenter(تساوي مركز النص في علامة h1)هذه هي القيم المضمنة للخصائص.

كتابة تعليقات 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هما اختياران منفصلان من اختيار class، وتميزان بحسب الحجم.

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

فيالفصل التاليفي هذا الفصل، ستتعلم أنواع مختلفة من مختارات CSS.