بدء استخدام لغة CSS

سنعمل في هذا المقال على تنسيق ملف HTML بسيط كي نطبق عمليًا بعض ميزات اللغة. لا بد أن تمتلك دراية بأساسيات عمل الحاسوب وقد ثبت البرمجيات الأساسية لتطوير الويب قبل متابعة القراءة، كما يُفضل أن تطلع على أساسيات HTML وأيضًا أساسيات التعامل مع الملفات.

تحضير ملف HTML

سنبدأ العمل انطلاقًا من ملف HTML، لذلك انسخ الشيفرة التالية واحفظها في حاسوبك في ملف جديد باسم index.html:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Getting started with CSS</title>
</head>

<body>

    <h1>I am a level one heading</h1>

    <p>This is a paragraph of text. In the text is a <span>span element</span>
and also a <a href="https://example.com">link</a>.</p>

    <p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>

    <ul>
        <li>Item <span>one</span></li>
        <li>Item two</li>
        <li>Item <em>three</em></li>
    </ul>

</body>

</html>

إضافة تنسيقات CSS إلى الملف

ينبغي علينا بدايةً إخبار ملف HTML بوجود بعض قواعد التنسيق التي نريد تطبيقها، وهنالك ثلاث طرق مختلفة لإنجاز الأمر لكننا سنستخدم الآن الطريقة الأكثر تداولًا وفائدةً وهي ربط ملف CSS بملف HTML عبر ترويسته أي ضمن العنصر <head>.

انشئ ملفًا في نفس المجلد الذي يضم ملف HTML واحفظه باسم styles.css، إذ يدل الامتداد css. على أنّ الملف هو ملف تنسيق CSS.

ضع الشيفرة التالية داخل العنصر <head> في ملف HTML لكي تربط به ملف التنسيق styles.css:

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

يخبر العنصر <link> المتصفح عن وجود ملف منفصل يضم قواعد تنسيق من خلال استخدام السمة rel ويدله على مكان وجوده من خلال السمة href.

يمكنك اختبار نجاح عملية الربط بإضافة القاعدة التالية إلى ملف التنسيق ثم تجريب الشيفرة عبر المحرر.

h1 {
  color: red;
}

تحفظ التغييرات التي أجريتها على ملفي CSS و HTML ثم حمّل الصفحة من جديد ضمن المتصفح. سيتحوّل لون عنوان المستوى الأول في أعلى الصفحة إلى الأحمر. فإن حدث ذلك يكون عملك صحيحًا، وإن لم يحدث ذلك تحقق من كتابة التعليمات بدقة.

بإمكانك متابعة العمل على ملف styles.css على حاسوبك أو استخدام محرر الشيفرة الذي ستراه تاليًا. سيتعامل محرر الشيفرة مع تنسيقات CSS التي نكتبها في اللوحة الأولى كما لو أنها ارتبطت بملف HTML بالطريقة التي شرحناها سابقًا.

تنسيق ملف HTML

لقد أظهرنا إمكانية استهداف أي عنصر من عناصر HTML وتنسيقه عندما حوّلنا لون العنوان إلى الأحمر. ننجز الأمر باستخدام "محدد عناصر element selector" وهو محدد يستهدف عنصر HTML وفقًا لاسمه. فلكي نستهدف مثلًا عنصر الفقرة النصية، عليك استخدام المحدد p. لاحظ كيف ستحول القاعدة التالية جميع الفقرات النصية إلى اللون الأخضر:

p {
  color: green;
}

بإمكانك أيضًا استهداف عدة عناصر في الوقت ذاته باستخدام فاصلة "," بين أسمائها. ستحوّل القاعدة التالية عنصر الفقرة النصية وجميع عناصر القائمة إلى اللون الأخضر:

p, li {
    color: green;
}

حاول أن تطبق ما تعلمته في محرر الشيفرة التالي:

تغيير السلوك الافتراضي للعناصر

عندما نلقي نظرة على ملف HTML محكم التوصيف حتى لو كان بسيطًا كما في مثالنا، نلاحظ كيف يضيف المتصفح بعض التنسيقات الافتراضية لتسهُل قراءة الصفحة. فالعناوين كبيرة وسميكة والقوائم منسقة على شكل نقاط، ويعود السبب في ذلك إلى التنسيقات الافتراضية التي بُنيت ضمن المتصفح والتي يطبقها على جميع الصفحات. إنّ غياب هذه التنسيقات الأساسية سيجعل الصفحة في حالة فوضى كبيرة ويتوجب علينا حينها تنسيق كل شيء من الصفر. تجدر الإشارة هنا إلى أن جميع المتصفحات الحديثة ستعرض الصفحات وفق نفس التنسيق الافتراضي تقريبًا.

لكننا نفضل في بعض الأحيان اختيار تنسيقات مختلفة عن الطريقة التي يتبعها المتصفح، عندها نختار العنصر الذي نريد أن نغيّر تنسيقه ونستخدم قواعد CSS لتغيير مظهره. فإن أردت مثلًا تغيير عرض عناصر القائمة غير المرتبة <ul> كي لا تظهر على شكل نقاط، يمكنك إضافة القاعدة التالية:

li {
  list-style-type: none;
}

يمكنك الاطلاع على تفاصيل أكثر عن الخاصية list-style-type ضمن موسوعة حسوب وستجد الكثير من الأمثلة التي تعرض جميع القيم الممكنة التي تأخذها هذه الخاصية بدلًا من إزالة قائمة النقاط فقط.

إضافة أصناف

لقد رأينا حتى اللحظة إمكانية استهداف العنصر باسمه ثم تنسيقه، وتتيح لك هذه الطريقة تنسيق جميع العناصر من النوع ذاته كي تُعرض بالمظهر ذاته. لكنك لن تفعل ذلك في أغلب الأوقات بل تحتاج إلى طريقة لتطبيق بعض القواعد على مجموعة محددة من العناصر دون غيرها. وأكثر الطرق شيوعًا لإنجاز الأمر هي إضافة صنف class إلى عنصر HTML ثم استهداف جميع العناصر التي تضم هذا الصنف.

لتجرب الأمر، أضف السمة class إلى العنصر الثاني من القائمة غير المرتبة <ul> لتصبح كالتالي:

<ul>
  <li>Item one</li>
  <li class="special">Item two</li>
  <li>Item <em>three</em></li>
</ul>

يمكنك استهداف جميع العناصر التي تنتمي إلى الصنف special بإنشاء "محدد صنف class selector" يبدأ بنقطة يليه اسم الصنف كالتالي:

.special {
  color: orange;
  font-weight: bold;
}

احفظ التعديلات ثم حمل الصفحة من جديد ضمن المتصفح.

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

قد تجد أحيانًا قاعدة CSS تضم اسم العنصر يليها اسم الصنف كالتالي:

li.special {
  color: orange;
  font-weight: bold;
}

تعني الصياغة السابقة أنّ القاعدة ستستهدف جميع عناصر <li> التي تمتلك الصنف special فقط. وهكذا لن تكون قادرًا على تطبيق هذا التنسيق على العنصر  السابق أو أية عناصر أخرى تمتلك الصنف special، وعليك حينها تحديد العناصر التي ستطبق عليها التنسيق على شكل قائمة كالتالي:

li.special,
span.special {
  color: orange;
  font-weight: bold;
}

وكما قد تتصور، بإمكانك تطبيق بعض القواعد على عناصر مختلفة ولا حاجة لكتابة القواعد مجددًا في كل مرة تحتاجها فيها. لهذا من الأفضل أحيانًا تجاوز العنصر والإشارة إلى صنفه إلا إن أردت تطبيق قواعد خاصة على عنصر بمفرده أو أردت التأكد من أنها لن تُطبق على عناصر أخرى.

تنسيق أشياء بناءً على موقعها في الملف

قد ترغب أحيانًا بعرض بعض الأجزاء بشكل مختلف وفقًا لموقعها ضمن الصفحة، وستجد عددًا من المحددات التي تساعدك على إنجاز الأمر، لكننا سنلقي نظرة الآن على اثنين من هذه العناصر. لاحظ وجود عنصري  في ملف HTML أحدهما داخل فقرة نصية والآخر ضمن عنصر قائمة. ولاختيار عنصر  الذي يقع داخل عنصر القائمة <li> يمكنك استخدام محدد يُدعى "محددات العناصر السلسلة descendant combinator" والذي يتكوّن من اسم العنصر الأب يليه فراغ ثم العنصر الابن.

أضف القاعدة التالية إلى ملف التنسيق:

li em {
  color: rebeccapurple;
}

سيختار هذا المحدد أي عنصر  داخل العنصر <li>. وهكذا من المفترض أن تجد محتوى  الموجود ضمن عنصر القائمة الثالث باللون البنفسجي بينما يبقى العنصر الآخر كما هو.

كما قد ترغب أحيانًا بتنسيق فقرة نصية عندما تأتي مباشرة بعد عنوان ويكون لهما نفس المستوى في شجرة HTML. لإنجاز الأمر، ضع الإشارة + (محدد العناصر الأخوة sibling combinator) بين محددي العنصرين:

h1 + p {
  font-size: 200%;
}

يضم المثال الموجود في محرر الشيفرة التالي القاعدتين السابقتين، حاول أن تضيف قاعدة لتجعل العنصر  أحمر اللون إن كان داخل فقرة نصية. ستعرف إن نجحت في الأمر عندما ترى هذا العنصر أحمر اللون في الفقرة النصية ولم يتغير لون نفس العنصر داخل عنصر القائمة الأول.

ملاحظة: تمنحك CSS طرق عدة لاستهداف عناصر HTML ولا يمثل ما عرضناه سوى البداية! سنتعرف لاحقًا على تفاصيل هذه المحددات والكثير غيرها في مقالات لاحقة.

تنسيق أشياء بناءً على حالتها

سنلق نظرة الآن على طريقة تنسيق العناصر وفقًا لحالتها، ومن أوضح الأمثلة على هذه الفكرة تنسيق الروابط التشعبية. لتنسيق الروابط التشعبية نستهدف العنصر <a> الذي يأخذ حالات مختلفة كأن يكون الرابط قد نقُر أو لم يُنقر بعد أو أن يكون مؤشر الفأرة فوقه أو لا، أو تلقى تركيز الدخل عبر لوحة المفاتيح أو أنه نُقر وتجري عملية الانتقال إلى الهدف. بإمكانك أن تغير تنسيق الرابط التشعبي باستخدام CSS لتميز الحالات السابقة. لاحظ كيف تنسق الشيفرة التالية الرابط باللون الزهري إن لم يُنقر بعد وبالأخضر عند زيارة الرابط:

a:link {
  color: pink;
}

a:visited {
  color: green;
}

كما يمكنك تغيير مظهر الرابط عند تمرير مؤشر الفأرة فوقه كان تزيل الخط الذي يظهر تحته افتراضيًا:

a:hover {
  text-decoration: none;
}

حاول أن تجرب قواعد CSS المختلفة للتحكم بحالة الرابط في محرر الشيفرة التالي:

لقد أزلنا في الشيفرة السابقة الخط أسفل الرابط التشعبي عند تمرير مؤشر الفأرة فوقه، كما يمكن إزالته أيضًا في جميع حالات الرابط. لكن ينبغي أن تدرك أنّ الرابط لا بدّ وأن يبدو رابطًا في المواقع الحقيقية، وبالتالي إبقاء الخط تحته أمر مهم جدًا كي يدرك المستخدم وجود جزء يمكن نقره من النص، فهذا هو السلوك المتوقع للرابط. إذًا فقد تجعل بعض تنسيقات CSS صفحتك صعبة القراءة وأقل شمولية (لا يمكن لجميع الزوار الوصول إليها).

ملاحظة: سنشير أحيانًا إلى مصطلح سهولة الوصول accessibility أو الشمولية في سلسلة المقالات هذه ويقصد بها ما يجعل الصفحة مفهومة وسهلة الاستخدام لأي كان. فقد يستخدم زائري الصفحة حاسوبًا مع فأرة أو هاتف مزود بشاشة لمس أو قارئ شاشة ينطق محتوى الصفحة أو قد يحتاج إلى حجم أكبر للنص أو قد يتنقل في الموقع باستخدام لوحة مفاتيح فقط.

عادة ما يكون التنسيق الافتراضي لملف HTML مناسبًا للجميع، فلا تعقد استخدامه عندما تبدأ تطبيق تنسيقات CSS.

الجمع بين المحددات والمجمّعات

يمكنك الجمع بين عدة محددات selectors أو مجمّعات combinator معًا. إليك مثالًا:

/*<article> الموجود ضمن  <p> داخل  <span> اختر أي عنصر */
article p span { ... }

/*<h1>الذي يأتي بعد <ul> الذي يأتي مباشرة بعد العنصر <p> اختر العنصر  */
h1 + ul + p { ... }

يمكن الجمع بين عدة أنواع أيضًا:

body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}

تنسق الشيفرة السابقة أي عنصر من الصنف special موجودة ضمن فقرة  تأتي مباشرة بعد عنصر <h1> موجود داخل عنصر <body>.

لا تقلق إن بدت القاعدة السابقة معقدة، ستعتاد على ذلك حالما تبدأ بكتابة المزيد من قواعد CSS.

خلاصة

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

ترجمة -وبتصرف- للمقال Getting started with CSS.