x

ما هي لغة CSS ؟

ماهي البنية الأساسية لقاعدة CSS ؟

نظري

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

تتكون قاعدة CSS من جزأين رئيسيين: "المُحدِّد" (selector) و"كتلة التصريح" (declaration block).

لنلقِ نظرةً على الصيغة الأساسية:


selector {
    property: value;
}

المُحدِّد selector هو نمط يُستخدم في CSS لتحديد عناصر HTML معينة واستهدافها بغرض تطبيق التنسيق عليها.

تشمل أمثلة المحددات "محددات النوع" (type selectors) ، و"محددات الفئة" (class selectors) ، و"محددات المعرف" (ID selectors).

تُعرف "الأقواس المتعرجة" (curly braces) الواردة في الصيغة الأساسية باسم "كتلة التصريح" (declaration block); حيث تقوم هذه الكتلة بتطبيق مجموعة من الأنماط على "مُحدِّد" (selector) معين أو مجموعة من المُحدِّدات.

داخل "كتلة التصريح" (declaration block) , ستجد سلسلة من "التصاريح" (declarations) ; حيث يتكون كل إعلان من "خاصية وقيمة" (property and a value).

الخاصية (Property) هي المُعرِّف في CSS الذي يحدد الميزة الجاري تنسيقها؛ ومن الأمثلة على ذلك خاصية "لون الخلفية" background-color.

تتمثل "القيمة" (value) في "الإعداد المحدد المطبَّق" (the specific setting applied) على تلك "الخاصية" (property) ; فعلى سبيل المثال، إذا كانت الخاصية هي background-color (لون الخلفية) , فقد تكون القيمة purple (أرجواني)، مما يضبط لون الخلفية ليصبح أرجوانياً.

يجب وضع علامة "النقطتين الرأسيتين" (colon) بعد اسم كل "خاصية" (property) , ووضع "فاصلة منقوطة" (semicolon) بعد كل "قيمة" (value).

الآن بعد أن عرفت صيغة قاعدة CSS، دعنا نلقِ نظرة على مثال.

index.html


<link rel="stylesheet" href="styles.css" />

<h1>تعلم CSS</h1>

<p>مثال على عنصر فقرة</p>
<p>مثال آخر لعنصر فقرة</p>

styles.css


p  {
  color: blue;
}

معاينة:


في قاعدة CSS هذه، يستهدف "مُحدِّد النوع" (type selector) "جميع عناصر الفقرة" (all paragraph elements) في الصفحة.

يوجد تصريح (declaration) واحد داخل كتلة التصريح (declaration block) .

يتكون التصريح من خاصية اللون (color) بقيمة مضبوطة على اللون الأزرق (blue) . سيؤدي ذلك إلى تغيير لون النص لجميع عناصر الفقرة إلى اللون الأزرق.

إذا كنت ترغب في تطبيق مجموعة الأنماط نفسها على عدة مُحدِّدات (selectors) , يمكنك إنشاء قائمة مُحدِّدات تفصل بينها "فواصل" (comma) .

إليك مثال على "تنسيق محددات متعددة" (styling multiple selectors) :

index.html


<link rel="stylesheet" href="styles.css" />

<h1 id="title">عنوان نموذجي</h1>
<h2 class="subheading">مثال على عنوان فرعي</h2>
<p>هذه الفقرة غير متأثرة بالمُحدِّد.</p>

styles.css


#title,
.subheading {
  color: navy;
}

معاينة:


في قائمة المُحدِّدات هذه، يوجد مُحدِّد مُعرِّف (id selector) يستهدف عنصر HTML الذي يحمل المُعرِّف title ; ويجب أن تبدأ جميع مُحدِّدات المُعرِّفات بالرمز # .

تلي ذلك فاصلة متبوعة بمُحدِّد فئة (class selector) يستهدف جميع عناصر HTML التي تحمل قيمة الفئة subheading . يجب أن تبدأ جميع مُحدِّدات الفئات بنقطة . .

ستتلقى قائمة المُحدِّدات بأكملها نفس التنسيق، بحيث يتم ضبط لون النص على اللون الأزرق الداكن navy .

أسئلة :

ما هو الغرض من المُحدِّد (selector) في قاعدة CSS ؟

1. لتطبيق الأنماط على عناصر HTML. ❌

2. لتحديد عناصر HTML التي ستُطبَّق عليها القاعدة. ✅

3. لتحديد خصائص وقيم النمط المحددة. ❌

4. لإنشاء عناصر HTML جديدة. ❌


أي من قواعد CSS التالية تُغيِّر لون نص جميع عناصر الفقرة (paragraph elements) إلى اللون الأزرق blue بشكل صحيح؟

1. 


p {
  background-color: blue;
}
❌

2. 


p {
  color: blue;
}
✅

3. 


.p {
  color: blue;
}
❌

4. 


#p {
  color: blue;
}
❌


بالنظر إلى كود HTML التالي، ما هي قاعدة CSS التي تحدد لون نص h1 و h2 باللون الأخضر green بشكل صحيح؟


<link rel="stylesheet" href="styles.css" />

<h1 id="title">عنوان نموذجي</h1>
<h2 class="subheading">مثال على عنوان فرعي</h2>
<p>عنصر الفقرة</p>

1. 


#title
.subheading {
  color: navy;
}
❌

2. 


#title,
.subheading {
  color: navy;
}
✅

3. 


.title,
#subheading {
  color: navy;
}
❌

4. 


#title,
#subheading {
  color: navy;
}
❌