خاصية اللون Color في css
تحدد الخاصية color لون النص (لون المحتوى في المقدمة بشكل عام) للعنصر.
على سبيل المثال في المثال التالي ، تحدد الخاصية color المحددة في المحدد body لون النص الافتراضي للصفحة بأكملها.
لنجرب المثال التالي لنرى كيفة عمل هذه الخاصية:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>تحديد لون النص في CSS</title>
<style>
body {
color: #ff5722;
}
.text-green {
color: #008000;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<div class="text-green">This is a simple piece of text.</div>
</body>
</html>
المخرجات
عادة ما تكتسب العناصر الخاصية color قيمة اللون من العنصر الأب، باستثناء عناصر <a>.
على سبيل المثال ، إذا تم تحديد لون للعنصر body ، فسيتم تمريره تلقائيًا إلى العناوين والفقرات وما إلى ذلك.
تحديد القيم Values للخاصية Color في css
غالبًا ما يتم تحديد الألوان Colors في CSS بالطرق التالية:
- بإستخدام اسم اللون color name مثلا
red - بإستخدام قيمة اللون بالنظام السادس عشر
HEXمثلا#ff0000 - بإستخدام نظام
RGBللألوان مثلاrgb(255, 0, 0)
هنالك العديد من تنسيقات الألوان الأخرى التي تم ادخالها على CSS3 مثل HSL و HSLA و RGBA التي تدعم أيضًا الشفافية ألفا alpha transparency.
سنتعرف عليها بمزيد من التفصيل لاحقا من خلال هذه الدورة.
قيم الألوان الإسمية css
هنالك مجموعة من الكلمات التي تتيح لنا تحديد قيم الألوان بطريقة سهلة مثل :
aqua و black و blue و fuchsia و gray و green و lime و maroon و navy و olive و purple و red و silver و teal و white و yellow .....الخ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مثال على استخدام القيم الإسمية للألوان</title>
<style>
h1 {
color: red;
}
p {
color: purple;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
المخرجات
ومع ذلك ، تدعم متصفحات الويب الحديثة عمليا العديد من أسماء الألوان أكثر مما هو محدد في معيار CSS ، ولكن لكي تكون على الجانب الأكثر أمانًا ، يجب عليك استخدام قيم الألوان بالنظام السادس عشر hex color بدلاً من ذلك.
قيم الألوان بنظام RGB في css
يمكننا استخدام نظام اللألوان RGB اختصار Red, Green, Blue الأحمر والأخضر والأزرق لقيم الألوان في لغة CSS.
يتم كتابة القيمة في هذا النظام بالشكل التالي : rgb(rr,gg,bb) حيث rr تحدد مقدار المكون الأحمر و gg تحدد مقدار المكون الأخضر و bb تحدد مقدار المكون الأزرق للون. عادةً ما يتم تحديد هذه القيم كأرقام صحيحة بين 0 و 255.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مثال على استخدام قيم RGB للألوان</title>
<style>
h1 {
color: rgb(255, 165, 0);
}
p {
color: rgb(0, 255, 0);
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
المخرجات
يمكنك أيضًا تحديد قيم RGB بالنسبة المئوية ، حيث 100٪ تكافئ 255 ، و 0٪ تكافئ 0 . على سبيل المثال ، يمكنك تحديد اللون الأحمر إما rgb(255, 0, 0) أو rgb (100٪ ، 0٪ ، 0٪).
قيم الألوان بالنظام السادس عشر HEX
Hex اختصار لـ Hexadecimal وهي الطريقة الأكثر استخدامًا لتحديد اللون على الويب.
في هذا النظام يتم تمثيل الألوان باستخدام رمز مكون من ستة أرقام ، يسبقه الرمز # ، ويتكب بالشكل التالي : #rrggbb ، حيث يرمز rr إلى المكون الأحمر و gg إلى المكون الأخضر و bb إلى المكون الأزرق .
تكون قيمة كل مكون من 00 إلى FF بالترميز السداسي العشري . وبالتالي فإن #ffffff يمثل اللون الأبيض و #000000 يمثل اللون الأسود.
لنلقي نظرة على المثال التالي:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>قيم الألوان بالنظام السادس عشر HEX</title>
<style>
h1 {
color: #ffa500;
}
p {
color: #00ff00;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
المخرجات
يشير Hexadecimal أو Hex إلى نظام ترقيم يستخدم 16 حرفًا كقاعدة له. يستخدم الأرقام من 0 إلى 9 والأحرف A و B و C و D و E و F التي تقابل الأرقام العشرية 10 و 11 و 12 و 13 و 14 و 15 على التوالي.
أداة تحديد قيمة اللون بنظام HEX ونظام RGB
أداة تحديد قيمة اللون بنظام HEX ونظام RGB
تأثير الخاصية Color على الحدود Borders والتخطيط Outlines
الخاصية color ليست فقط للمحتوى النصي للعنصر ، ولكن لأي شيء في المقدمة يمكن ان يتأثر باللون. على سبيل المثال ، إذا لم يتم تحديد قيمة border-color أو outline-color بشكل صريح للعنصر ، فسيتم استخدام قيمة color بدلاً من ذلك. لنلق نظرة على مثال:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مثال على تأثير الخاصية Color على الحدود Borders والتخطيط Outlines</title>
<style>
p.one {
color: #0000ff;
border: 2px solid;
}
p.two {
color: #00ff00;
outline: 2px solid;
}
</style>
</head>
<body>
<p class="one">The border color of this paragraph is same as the element's text color.</p>
<p class="two">The outline color of this paragraph is same as the element's text color.</p>
</body>
</html>
المخرجات
