تفصيل بناء الجملة CSS
تتكون ورقة أنماط CSSمن مجموعة من القواعد التي يتم معالجتها بواسطة متصفح الويب ثم تطبيقها على العناصر المستهدفة مثل الفقرات والعناوين وما إلى ذلك في الصفحة.
تحتوي قاعدة CSS على جزأين رئيسيين، المحدد Selector وواحد أو أكثر من الإعلانات Declarations على النحو التالي:
يحدد المحدد selector العنصر أو العناصر الموجودة في صفحة HTML التي تنطبق عليها قاعدة CSS.
وحيث أن الإعلانات داخل الاقواس المجعدة { } block تحدد كيفية تنسيق العناصر على صفحة ويب. يتكون كل إعلان من خاصية property وقيمة value مفصولة بنقطتين رأسيتين : وتنتهي بفاصلة منقوطة ;، ومجموعات الإعلانات محاطة بأقواس مجعدة { }.
الخاصية التي نريد تغييرها. يمكن أن تكون الخط أو اللون أو الخلفية ، الخ.
كل خاصية لها قيمة، على سبيل المثال الخاصية color يمكن أن تكون لها القيمة إما blue أو #0000FF الخ.
ولجعل قواعد CSS اسهل للقراءة، يمكننا وضع كل إعلان في سطر منفصل،كما في المثال التالي:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مثال على بناء جملة CSS</title>
<style>
h1 {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
المخرج 1
في المثال أعلاه :
h1 هو محدد selector
color و text-align هي خصائص CSS
blue و center هي القيم المقابلة لهذه الخصائص.
ينتهي إعلان CSS دائمًا بفاصلة منقوطة ;، ومجموعات الإعلانات محاطة دائمًا بالأقواس المجعدة curly brackets { }.
كتابة التعليقات في CSS
عادة ما تتم إضافة التعليقات بهدف جعل الكود المصدري أسهل للفهم. مما قد يساعد المطور الآخر (او انت في المستقبل عندما تقوم بتعديل الكود المصدري source code) لفهم ما كنا نحاول القيام به مع CSS. التعليقات مهمة للمبرمجين ولكن يتم تجاهلها من قبل متصفحات الويب.
يبدأ التعليق في لغة CSS بـ /*، وينتهي بـ */ من اليسار إلى اليمين، كما هو موضح في المثال أدناه:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مثال على كتابة التعليقات في CSS</title>
<style>
/* This is a CSS comment */
/* Comments are not displayed,
by the browser */
h1 {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
المخرج 2
وبنفس الطريقة السابقة يمكننا أيضًا التعليق على جزء من كود CSS لغرض تصحيح الاخطاء، كما هو موضح هنا:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مثال على تعليق جزء من كود CSS </title>
<style>
h1 {
color: blue;
text-align: center;
}
/*
p {
font-size: 18px;
text-transform: uppercase;
}
*/
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
المخرج 3
حساسية حالة الأحرف Case Sensitivity في CSS
الخصائص property في لغة CSS والعديد من القيم values ليست حساسة لحالة الأحرف case-insensitive. ولاكن إن المحددات selector في لغة CSS عادةً ما تكون حساسة لحالة الأحرف case-sensitive، على سبيل المثال، فإن محدد الفئة .maincontent ليس هو نفسه .mainContent
لذلك، فإن من الأفضل أن نفترض أن كافة مكونات قواعد CSS حساسة للحالة الأحرف.
وفي الدرس القادم سوف نتعلم عن أنواع مختلفة من المحددات selector في لغةCSS