9  لغة التصفيف

لغة CSS

لغة (CSS): تَصِفُ طريقة العرض البصري (الخط واللون والحدود وحتى الحركة) وحتى كيفية إخراج الصفحة للطباعة.

فإذا كانت لغة HTML تعنى بالجوهر والحقيقة، فإن لغة CSS تعنى بالمظهر والصورة.

أما من ناحية اللغة فهي شيئان:

  1. المحددات (Selectors): وهي طريقة لاختيار العناصر التي نريد تعيين خصائصها
  2. الخصائص (Properties): وهي كل جملة تعين صفة للعناصر المحددة

وذلك على النحو التالي:

p {
  font-family: sans-serif;
  color: red;
}

li {
  background-color: greenyellow;
  border: 1px solid black;
  margin-bottom: 5px;
}
  • فهاهنا لدينا المحدد الأول p أي: حدد جميع الفقرات.
  • والخصائص:
    1. عائلة الخط: font-family: sans-serif;
    2. ولون الخط: color: red;

ثم:

  • المحدد الثاني li: أي: حدد جميع عنصار القائمة
  • وفيها خصائص:
    1. لون الخلفية: background-color: greenyellow;
    2. حدودها: border: 1px solid black;
    3. المسافة بينها: margin-bottom: 5px;

تطبيق صفحة الخصائص على صفحة العناصر

وتوضع في ملف مثل: styles.css ويُشار إليها في وصف الصفحة في الرأس (<head>) في عنصر <link> على النحو التالي:

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

كما يلي:

<!doctype html>
<html lang="ar">
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body dir="rtl">
    <p>أذكار بعد الصلاة</p>
    <ul>
      <li>سبحان الله 33</li>
      <li>الحمد لله 33</li>
      <li>الله أكبر 33</li>
    </ul>
  </body>
</html>

أو قد تضاف في الرأس مباشرة بعنصر <style>:

<head>
  <style>
    p {
      font-family: sans-serif;
      color: red;
    }

    li {
      background-color: greenyellow;
      border: 1px solid black;
      margin-bottom: 5px;
    }
  </style>
</head>

أو قد تكون في العنصر نفسه. ولا ننصح به إلا أن يكون العنصر شاذًّا لا يشترك معه غيره في شيء من القواعد البتة:

<p style="font-family: sans-serif; color: red;">
  انظر كتاب
  <a href="https://halgoz.quarto.pub/pythonia/">البايثونية</a>
  ففيه نتعلم البرمجة باللغة العربية.
</p>

تخصيص أصناف وإسناد عناصر إليها

تعرَّف الأصناف في لغة CSS بنقطة (.) متبوعة باسم الصنف. وفيما يلي مثال نعرف فيه ثلاثة أصناف:

  1. small
  2. big
  3. highlight
.small {
  font-size: 16px;
}

.big {
  font-size: 24px;
}

.highlight {
  color: yellow;
  background-color: red;
}

ثم ندرج بعض العناصر في بعض هذه الأصناف، وذلك بتعيين خاصية class للعنصر، وتُفصَل بالمسافة إن تعددت:

<p class="highlight">الفقرة الأولى</p>

<ul>
  <li class="small highlight">العنصر الأول</li>
  <li class="highlight big">العنصر الثاني</li>
</ul>

أطر العمل ضمن CSS

وإليك أشهر ثلاث أطر عمل في لغة التصفيف (CSS) -وذلك طبقًا لـOSS Insight-:

  1. بوت ستراب (Bootstrap): Build fast, responsive sites with Bootstrap
  2. تيل وند (Tailwind CSS): A utility-first CSS framework for rapid UI development
  3. بولما (Bulma): Modern CSS framework based on Flexbox

مراجع

يجب أن تتقن المحددات (Selector).

وأما الخصائص (Properties) فهي كثيرة وفي ازدياد، ومن أمثلتها: