اكتشف ما هي CSS، وكيف تربطها بصفحة HTML، وكيف تكتب أول قاعدة لك على الإطلاق.
افتح هذا الدرس في Kodokonتصف HTML محتوى صفحة الويب: العناوين والفقرات والصور. أما CSS (اختصارًا لـ Cascading Style Sheets، أي صفحات الأنماط المتتالية) فتصف مظهرها: الألوان والأحجام والتباعد. تخيّل منزلًا: HTML هي الجدران والغرف؛ وCSS هي الطلاء والأثاث والزينة. من دون CSS، لبدت كل صفحات الويب متشابهة: نص أسود على خلفية بيضاء.
تتكوّن قاعدة CSS من ثلاثة أجزاء. أولًا يأتي المُحدِّد: وهو يقول أي العناصر في الصفحة سيتأثر (مثلًا، جميع الفقرات). ثم، بين القوسين المعقوفين { }، يأتي إعلان واحد أو أكثر. يقرن كل إعلان خاصية (ما تريد تغييره، مثل اللون) بـ قيمة (الاختيار الذي تتخذه، مثل الأحمر)، يفصل بينهما نقطتان رأسيتان : وينتهي بفاصلة منقوطة ;.
p {
color: red;
font-size: 18px;
}لنقرأ هذه القاعدة كلمة كلمة. p هو المُحدِّد: يستهدف كل عنصر <p> في الصفحة، أي الفقرات. وcolor خاصية تضبط لون النص، وred قيمتها. وfont-size تضبط حجم النص، هنا 18px (18 بكسل، الوحدة المستخدمة لقياس الشاشات). هناك ثلاث طرق لربط هذه CSS بصفحة HTML. الطريقة المنصوح بها هي الملف الخارجي: تعيش CSS في ملفها الخاص، مثلًا styles.css، وتوصّله بـ HTML عبر وسم <link> يوضع داخل الـ <head>.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This text will be red.</p>
</body>
</html>الطريقة الثانية: CSS الداخلية. تكتب القواعد مباشرة داخل HTML، ضمن وسم <style> يوضع في الـ <head>. هذا مفيد لاختبار سريع، لكن الأنماط تنطبق على تلك الصفحة الواحدة فقط. الطريقة الثالثة: CSS السطرية. تكتب الإعلانات مباشرة على وسم، في خاصية style. لاحظ أنه لا يوجد مُحدِّد ولا أقواس معقوفة، لأن النمط ينطبق على ذلك الوسم فقط.
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p style="color: blue;">I am blue.</p>
<p>I am red.</p>
</body>p { color: red; }، ما هو color؟