في هذا الدرس 4تصفّح المواضيع
CSS Colors
ألوان النصوص في لغة CSS
CSS Colors ألوان النصوص في لغة CSS
تُستخدم خاصية color property في لغة CSS لتغيير ألوان النصوص الأفتراضية إلي أي لون أخر تُكتب قيمية خاصية color لون النص سواء إسم اللون أو كود اللون لتصبح بهذا الشكل color:red أو color:#f00.
طرق كتابة قيمة خاصية color:
- color name كتابة إسم اللون مباشرة بعد خاصية color property مثل red, blue, black.
- hex color كتابة كود اللون hex بالهيكس مباشرة بعد خاصية color property مثل #f00 أو 0f0#.
- RGB color كتابة كود اللون RGB مباشرة بعد خاصية color property مثل rgb(255,0,0).
- RGBA color كتابة كود اللون RGBA مباشرة بعد خاصية color property مثل rgb(255,0,0,.5) إضافة القيمة الرابعة لعمل اللون شفاف.
- HSL color تابة كود اللون HSL مباشرة بعد خاصية color property بهذا الشكل hsl (0, 100%, 50%).
Color Name
طريقة إستخدام قيمة خاصية color property بواسطة إسم اللون color name.
p {color:red}hex color
طريقة إستخدام قيمة خاصية color property بواسطة hex الهيكس اللون hex color.
p {color:#f00}RGB Color
طريقة إستخدام قيمة خاصية color property بواسطة RGB اللون RGB color.
p {color:rgb(255,0,0)}RGBA Color
القيمة الرابعة تستخدم في عمل اللون شفاف بلغة CSS.
p {color:rgba(255,0,0,0.5)}
CSS Colors keyword
الكلمات المفتاحية في الألوان في لغة CSS
CSS Colors keyword الكلمات المفتاحية في الألوان في لغة CSS
يمكن إستخدام مع color وخاصية background-color قيم علي هيئة keywords أسماء وهي تحديد إسم اللون مثل [red - green - blue] فمثلاً pink بدلاً من كتابة كود للون في لغة CSS.
CSS Colors keyword
تحديد قيم الألون عن طريق CSS keywords color names.
.success
{
color: darkgreen;
background-color: mediumaquamarine;
border:darkgreen solid 1px;
padding:20px;
}
CSS HSL Colors
HSL في الألوان في لغة CSS
CSS HSL Colors HSL في الألوان في لغة CSS
HLS تشير الي Hue , saturation and Lightness ويمكن في لغة CSS تحديد الألوان بنظام HLS داخل قيم خاصية color وخاصية background-color.
CSS HSL Colors
<body>
<div style="background: hsl(0, 100%, 30%);padding:18px">hsl(0, 100%, 30%);</div>
<div style="background: hsl(0, 100%, 50%);padding:18px">hsl(0, 100%, 50%);</div>
<div style="background: hsl(0, 100%, 70%);padding:18px">hsl(0, 100%, 70%);</div>
<div style="background: hsl(0, 100%, 90%);padding:18px">hsl(0, 100%, 90%);</div>
</body>
CSS color opacity
الشفافية مع الألوان في لغة CSS
CSS color opacity الشفافية مع الألوان في لغة CSS
تستخدم خاصية opacity في تحديد درجة ظهور العنصر وتتراوح قيمتها من 0.0 وهي تعني غير مرئي و 1.0 تعني واضح كليا و 0.5 تعني 50% شفافية في لغة CSS.
CSS color opacity
CSS color opacity
شفافة الألوان في لغة CSS.
#p1 {background-color:rgb(255,0,0);opacity:0.6;}
#p2 {background-color:rgb(0,255,0);opacity:0.6;}
#p3 {background-color:rgb(0,0,255);opacity:0.6;}
#p4 {background-color:rgb(192,192,192);opacity:0.6;}
#p5 {background-color:rgb(255,255,0);opacity:0.6;}
#p6 {background-color:rgb(255,0,255);opacity:0.6;}سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات5
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Colors ألوان
- للمراجعة
- 02 Hue مسحة
- للمراجعة
- 03 Saturation تشبع
- للمراجعة
- 04 Lightness إضاءة
- للمراجعة
- 05 Opacity مستوي الشفافية
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- صفحات الأنماط الانسيابية
- للمراجعة
- 02 RGB RGB
- Red، Green، Blue
- أحمر , أخضر , أزرق
- للمراجعة
- 03 RGBA RGBA
- Red، Green، Blue , Alpha
- أحمر , أخضر , أزرق , مستوي الشفافية
- للمراجعة
- 04 HSL HSL
- Hue, Saturation, Lightness
- مسحة ، تشبع ، إضاءة
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي4 أسئلة تنتظرك ＋
alpha في rgba هي خاصة ب.........؟
Saturation : هي نسبة مئوية وتشير الي درجة الإضاءة
.......... هي نسبة مئوية وتشير الي درجة التباين
____