تعلّم استهداف العناصر بدقة عبر مُحدِّدات العنصر والفئة والمعرّف، ثم طبّق عليها الألوان.
افتح هذا الدرس في Kodokonالمُحدِّد هو الجزء من قاعدة CSS الذي يقول أي العناصر ستُنسَّق. أبسطها هو مُحدِّد العنصر: تكتب اسم الوسم، من دون قوسين زاويّين. p يستهدف كل فقرة، وh1 كل عنوان رئيسي من المستوى الأعلى. هذا يعمل جيدًا، لكنه أحيانًا واسع أكثر من اللازم: ماذا لو أردت تلوين فقرة واحدة فقط من بين عشر؟ هنا تدخل الفئات والمعرّفات.
الفئة بطاقة تصقها على عنصر HTML واحد أو أكثر عبر الخاصية class. على جانب CSS، تستهدفها بنقطة: .important يختار كل عنصر يحمل class="important". أما المعرّف فهو بطاقة فريدة: يجب أن يظهر مرة واحدة فقط في الصفحة، مثلًا على الترويسة. على جانب CSS، تستهدفه بمربّع #: #header.
<h1 id="main-title">My cooking blog</h1>
<p class="highlight">Recipe of the day: the pie.</p>
<p>A perfectly ordinary paragraph.</p>
<p class="highlight">Tip: preheat the oven.</p>#main-title {
color: darkgreen;
}
.highlight {
background-color: yellow;
}
p {
color: black;
}في هذا المثال، يتحوّل العنوان إلى أخضر داكن، ويحصل الفقرتان الموسومتان بـ highlight على خلفية صفراء (background-color تضبط لون الخلفية)، ويكون لكل فقرة نص أسود. تذكّر الفرق: الفئة قابلة لإعادة الاستخدام على أي عدد تشاء من العناصر، بينما المعرّف فريد داخل الصفحة. عند الشك، استخدم فئة.
لنتحدّث الآن عن الألوان. تقبل CSS عدة صيغ. أسماء الألوان (red وblue وorange...) بسيطة لكنها محدودة. تبدأ الصيغة الست عشرية بـ # يتبعها ست خانات تجرّع الأحمر والأخضر والأزرق: #ff0000 هو أحمر خالص. أخيرًا، تعبّر صيغة rgb() عن الجرعات نفسها بأرقام من 0 إلى 255: rgb(255, 0, 0) هو أيضًا أحمر خالص.
.highlight {
color: tomato;
background-color: #fff3cd;
}
#main-title {
color: rgb(0, 100, 0);
}<h1> وحده أخضر داكنا.<style>
___ {
color: darkgreen;
}
</style>
<h1 id="banner"></h1>
<p class="banner"></p>