في هذا الدرس 5تصفّح المواضيع
CSS Colors
ألوان النصوص في لغة CSS
CSS Colors ألوان النصوص في لغة CSS
تستخدم الخاصية color لتحديد لون النص. يمكن كتابة اللون باسم مثل red، أو بصيغة رقمية مثل #f00 أو rgb(255,0,0).
- اسم اللون: مثل red وblue وblack.
- HEX: مثل
#f00للأحمر و#0f0للأخضر. - RGB: مثل
rgb(255,0,0). - قناة الشفافية: مثل
rgba(255,0,0,0.5)؛ وتقبل الصيغة الحديثة rgb قناة alpha أيضًا. - HSL: مثل
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 Hex Color
طريقة إستخدام ألوان الهيكس في لغة CSS
CSS Hex Color طريقة إستخدام ألوان الهيكس في لغة CSS
تعبّر ألوان HEX عن المكونات الأحمر والأخضر والأزرق بالترتيب RGB، وتقرأ الصيغة من اليسار إلى اليمين بعد #.
- في
#RRGGBBلكل مكوّن خانتان سداسيتان، من 00 إلى ff؛ الأرقام هي 0–9 والحروف a–f، ولا يختلف المعنى باختلاف حالة الحروف. - الأحمر
#ff0000، والأزرق#0000ff، والأخضر#00ff00. - يمكن الاختصار إلى
#RGBعندما تتكرر الخانتان في كل زوج:#ff0000تصبح#f00و#ffaa00تصبح#fa0. يكرر المتصفح كل خانة عند توسيع الصيغة القصيرة. - خفض المكوّن الأحمر من ff إلى ee يخفض شدة ذلك المكوّن؛ النتيجة الكلية تعتمد على بقية المكونات أيضًا.
- توجد صيغتا
#RGBAو#RRGGBBAAلإضافة alpha؛ 00 شفافية كاملة وff عتامة كاملة.
HEX color
إضافة اللون الأحمر الصريح f00.
HEX color
طريقة إستخدام خاصية color مع hex color.
HEX color blue
إضافة اللون الأزرق الصريح 00f.
HEX color
طريقة إستخدام خاصية color مع hex color.
CSS RGB Color
طريقة إستخدام ألوان RGB في لغة CSS
CSS RGB Color طريقة إستخدام ألوان RGB في لغة CSS
RGB اختصار Red وGreen وBlue؛ تأتي المكونات بهذا الترتيب داخل الدالة. في الصيغة العددية الشائعة تكون القيم من 0 إلى 255، ويمكن استخدام نسب من 0% إلى 100%.
rgb(255,0,0)أحمر، وrgb(0,255,0)أخضر، وrgb(0,0,255)أزرق.- الصيغة المستخدمة في الأمثلة تفصل المكونات بفواصل:
rgb(R,G,B). - تسمح الصيغة الحديثة بالمسافات وبقناة alpha بعد /، مثل
rgb(255 0 0 / 50%). لا تخلط فواصل الصيغتين في الاستدعاء نفسه.
RGB color Red
إستخدام قيمة خاصية color ب RGB أول خانة أعلي قمية 255 لتصبح لون أحمر صريح.
RGB color Red
طريقة كتابة RGB مع خاصية color بأستخدام كود RGB.
RGB color Blue
المكوّن الثالث B يساوي 255 والأولان يساويان صفرًا، لذلك ينتج المثال اللون الأزرق.
RGB color Blue
طريقة كتابة RGB مع خاصية color بأستخدام كود RGB.
CSS RGBA Color
طريقة إستخدام ألوان RGBA في لغة CSS
CSS RGBA Color طريقة إستخدام ألوان RGBA في لغة CSS
تضيف قناة alpha إلى مكونات RGB للتحكم في عتامة اللون، مثل rgba(255,0,0,0.5).
- 0 تعني شفافية كاملة، و1 تعني عتامة كاملة، و0.5 تعني نصف العتامة.
- 0.99 قريبة من العتامة الكاملة لكنها لا تساوي 1.
- يمكن التعبير عن alpha كنسبة أيضًا؛ 50% تكافئ 0.5.
RGBA Color
القيمة A متوسطة وهي تعني شفافية اللون بمقدار 50%
RGBA Color
طريقة كتابة قيمة RGBA لخاصية color.
CSS HSL Color
طريقة إستخدام ألوان HSL في لغة CSS
CSS HSL Color طريقة إستخدام ألوان HSL في لغة CSS
HSL اختصار Hue وSaturation وLightness: زاوية اللون والتشبع والإضاءة.
- Hue: زاوية على دائرة اللون؛ 0 أو360 للأحمر، و120 للأخضر، و240 للأزرق. تلتف الزوايا حول الدائرة، وليست القيم محصورة في دورة واحدة.
- Saturation: 0% دون تشبع فيكون اللون رماديًا، و100% تشبع كامل؛ ليست 100% درجة الظلام.
- Lightness: 0% أسود و100% أبيض؛ 50% مستوى متوسط للإضاءة.
تستخدم أمثلتنا الصيغة ذات الفواصل hsl(hue, saturation, lightness)، مثل hsl(0, 100%, 50%). في هذه الصيغة تكتب % مع التشبع والإضاءة.
HSL color
قيمة hue هي صفر وقيمة saturation هي 100% وقيمة lightness هي 50%
HSL color
طريقة كتابة HSL color في لغة CSS
HSL color
طريقة كتابة HSL color في لغة CSS
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات13
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Color لون
- للمراجعة
- 02 Property خاصية
- للمراجعة
- 03 Paragraph فقرة
- للمراجعة
- 04 Heading عناوين
- للمراجعة
- 05 Links روابط
- للمراجعة
- 06 Value قيمة
- للمراجعة
- 07 Black اسود
- للمراجعة
- 08 Blue ازرق
- للمراجعة
- 09 Red أحمر
- للمراجعة
- 10 Opacity شفافية
- للمراجعة
- 11 Lightness إضاءة
- للمراجعة
- 12 Saturation تشبع
- للمراجعة
- 13 Hue مسحة
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات6
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- صفحات الأنماط الانسيابية
- للمراجعة
- 02 HTML HTML
- Hypertext Markup Language
- لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت<p><a href="https://www.closetag.com/tutorial/html/html-introduction">المزيد عن HTML</a></p>
- للمراجعة
- 03 Hex Hex
- Hexadecimal
- أرقام سداسية عشرية
- للمراجعة
- 04 RGB RGB
- Red، Green، Blue
- أحمر , أخضر , أزرق
- للمراجعة
- 05 RGBA RGBA
- Red، Green، Blue , Alpha
- أحمر , أخضر , أزرق , مستوي الشفافية
- للمراجعة
- 06 HSL HSL
- Hue, Saturation, Lightness
- مسحة ، تشبع ، إضاءة
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.