HTML يبني هيكل الصفحة، لكنه لا يحدد شكلها. لتلوين النص أو تكبيره نستخدم لغة ثانية اسمها CSS. نكتبها في محرر منفصل، والمتصفح يطبّقها على الصفحة.
قاعدة CSS لها ثلاثة أجزاء: المُحدِّد (أيّ عنصر)، ثم بين القوسين { } الخاصية (ماذا نغيّر) والقيمة (كيف)، بينهما نقطتان وبعدهما فاصلة منقوطة. غيّر red إلى blue:
h1 {
color: red;
}| الخاصية | تغيّر | أمثلة للقيم |
|---|---|---|
| color | لون النص | red, blue, navy |
| background-color | لون الخلفية | yellow, orange |
| font-weight | سُمك الخط | bold, normal, 100 … 900 |
| font-size | حجم الخط | 10px, 50px |
| text-align | محاذاة النص | left, center, right |
يمكن وضع أكثر من خاصية في القاعدة نفسها، كل واحدة في سطر. الحجم يُكتب بوحدة px (بكسل):
h1 {
color: blue;
background-color: yellow;
text-align: center;
}
p {
font-weight: bold;
font-size: 24px;
}; بعد كل سطر. ولا تضع مسافة بين الرقم وpx: 24px وليس 24 px.الفئات (class)
المُحدِّد p يغيّر كل الفقرات. لنميّز فقرة واحدة نعطيها اسم فئة في وسم البداية: class="sea"، ثم نكتب في CSS نقطة قبل الاسم: .sea.
.sea {
color: blue;
}
.mountains {
color: green;
}والتعليق في CSS يُكتب بين /* و*/ (وليس <!-- --> كما في HTML):
/* Sea in blue */
.sea {
color: blue;
}sea { } يبحث عن وسم اسمه <sea> فلا يجد شيئًا؛ الصحيح .sea { }. والنقطة في CSS فقط، لا في class="sea".تدريبات
اجعل لون نص الوسم p أحمر (red).
أكمل القاعدة لتصبح خلفية h1 صفراء (yellow).
h1 {
color: blue;
___: ___;
}في قاعدة واحدة للوسم p: اجعل font-weight يساوي 900، ثم font-size يساوي 50px (بهذا الترتيب).
p {
}CSS جاهز. أعطِ الفقرة الأولى الفئة apple والثانية الفئة watermelon.
<p>Apple</p> <p>Watermelon</p>
لوّن كل تحية بفئتها، بهذا الترتيب: .arabic باللون lime، ثم .english باللون purple، ثم .french باللون navy.
اجعل السطر الأول تعليقًا في CSS.
___ Change the text color to navy. ___
p {
color: navy;
}نسّق لوحة إعلانات الفصل بقاعدتين بهذا الترتيب: (1) h1 بالخاصية text-align وقيمتها center. (2) الفئة exam: اللون red ثم سُمك الخط bold.
تلميح
لا تنسَ النقطة قبلexam.النقاط الرئيسية
- قاعدة CSS:
مُحدِّد { خاصية: قيمة; }. colorوbackground-colorوfont-weightوfont-size(بـ px) وtext-align.- الفئة
class="x"في HTML تقابلها.xفي CSS، والتعليق/* */.