ألوان CSS

يتم تعيين الألوان باستخدام أسماء الألوان المسبقة، أو قيم RGB、HEX、HSL、RGBA、HSLA.

أسماء الألوان CSS

في CSS، يمكن استخدام أسماء الألوان لتعيين الألوان:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

تجربة شخصية

دعم CSS/HTML 140 لونًا معياريًا.

لون الخلفية CSS

يمكنك تعيين لون الخلفية للعناصر HTML:

مرحبًا بك في الصين
الصين هي بلد عظيم!

مثال

<h1 style="background-color:DodgerBlue;">الصين</h1>
<p style="background-color:Tomato;">الصين هي بلد عظيم!</p>

تجربة شخصية

لون النص CSS

يمكنك تعيين لون النص:

الصين

الصين هي بلد عظيم!

الصين، رسميًا جمهورية الصين الشعبية، هي بلد في شرق آسيا.

مثال

<h1 style="color:Tomato;">الصين</h1>
<p style="color:DodgerBlue;">الصين هي بلد عظيم!</p>
<p style="color:MediumSeaGreen;">الصين، رسميًا جمهورية الصين الشعبية...</p>

تجربة شخصية

لون الحواف CSS

يمكنك تعيين لون الحدود:

مرحبًا بالعالم
مرحبًا بالعالم
مرحبًا بالعالم

مثال

<h1 style="border:2px solid Tomato;">مرحبًا بالعالم</h1>
<h1 style="border:2px solid DodgerBlue;">مرحبًا بالعالم</h1>
<h1 style="border:2px solid Violet;">مرحبًا بالعالم</h1>

تجربة شخصية

قيم الألوان الخاصة بـ CSS

في CSS، يمكنك أيضًا استخدام قيم RGB أو HEX أو HSL أو RGBA أو HSLA لتحديد الألوان:

مماثل لاسم اللون "Tomato":

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

مماثل لاسم اللون "Tomato" ولكن شفافية 50%:

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
<h3>مثال</h3> 
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

تجربة شخصية

للتعرف على معلومات إضافية حول قيم الألوان

في الفصل التالي، ستتعلم عن RGB、HEX و HSL معرفة المزيد.