HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

دروس CSS

الصفحة الرئيسية لـ CSS مقدمة CSS بنية CSS محددات CSS كيفية استخدام CSS تعليقات CSS ألوان CSS
الألوان RGB عرافة HSL
خلفيات CSS
لون الخلفية الصورة الخلفية تكرار الخلفية مرفق الخلفية اختزال الخلفية
حدود CSS
الحدود عرض الحدود لون الحدود جوانب الحدود اختزال الحدود حدود مدورة
هوامش CSS
الهوامش Margin Collapse
حشوة CSS ارتفاع / عرض CSS نموذج مربع CSS مخطط CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
نص CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
خطوط CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
أيقونات CSS روابط CSS قوائم CSS جداول CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
عرض CSS أقصى عرض لـ CSS موقف CSS CSS Z- الفهرس تجاوز CSS تعويم CSS
Float Clear Float Examples
كتلة مضمنة CSS محاذاة CSS موحد CSS فئة CSS الزائفة عنصر زائف لـ CSS تعتيم CSS شريط التنقل CSS
Navbar Vertical Navbar Horizontal Navbar
القوائم المنسدلة CSS معرض صور CSS صور CSS العفاريت محددات CSS Attr نماذج CSS عدادات CSS تخطيط موقع الويب CSS وحدات CSS خصوصية CSS CSS! مهم وظائف الرياضيات CSS

CSS متقدم

زوايا مستديرة CSS صور الحدود CSS خلفيات CSS ألوان CSS الكلمات الأساسية الملونة CSS تدرجات CSS
Linear Gradients Radial Gradients Conic Gradients
ظلال CSS
Shadow Effects Box Shadow
تأثيرات نص CSS خطوط الويب CSS تحويلات CSS 2D تحويلات CSS ثلاثية الأبعاد انتقالات CSS الرسوم المتحركة CSS تلميحات CSS صور نمط CSS انعكاس صورة CSS كائن CSS مناسب موضع كائن CSS اخفاء CSS أزرار CSS ترقيم صفحات CSS أعمدة CSS المتعددة واجهة مستخدم CSS متغيرات CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
تحجيم صندوق CSS استعلامات وسائط CSS أمثلة على CSS MQ فليكس بوكس ​​CSS
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

استجابة CSS

مقدمة RWD منفذ عرض RWD عرض شبكة RWD استعلامات وسائط RWD صور RWD مقاطع فيديو RWD أطر RWD قوالب RWD

شبكة CSS

مقدمة الشبكة حاوية الشبكة عنصر الشبكة

CSS SASS

دروس SASS

أمثلة CSS

قوالب CSS أمثلة CSS اختبار المغلق تمارين CSS شهادة CSS

مراجع CSS

مرجع CSS محددات CSS وظائف CSS CSS المرجعي Aural الخطوط الآمنة للويب CSS متحرك CSS وحدات CSS محول CSS PX-EM ألوان CSS قيم ألوان CSS القيم الافتراضية لـ CSS دعم مستعرض CSS

ألوان CSS

❮ سابق التالي ❯

يدعم CSS أكثر من 140 اسمًا من أسماء الألوان ، وقيم HEX ، وقيم RGB ، وقيم RGBA ، وقيم HSL ، وقيم HSLA ، والعتامة.

ألوان RGBA

قيم ألوان RGBA هي امتداد لقيم ألوان RGB مع قناة ألفا - والتي تحدد عتامة اللون.

يتم تحديد قيمة ألوان RGBA بـ: rgba (أحمر ، أخضر ، أزرق ، ألفا). معامل ألفا هو رقم بين 0.0 (شفاف بالكامل) و 1.0 (معتم بالكامل).

rgba (255 ، 0 ، 0 ، 0.2) ؛
rgba (255 ، 0 ، 0 ، 0.4) ؛
rgba (255 ، 0 ، 0 ، 0.6) ؛
rgba (255 ، 0 ، 0 ، 0.8) ؛

يحدد المثال التالي ألوان RGBA المختلفة:

مثال

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */

ألوان HSL

HSL تعني Hue و Saturation و Lightness.

يتم تحديد قيمة لون HSL بـ: hsl (تدرج اللون ، التشبع ، الإضاءة).

  1. Hue هي درجة على عجلة الألوان (من 0 إلى 360):
    • 0 (أو 360) أحمر
    • 120 أخضر
    • 240 هو أزرق
  2. التشبع هو قيمة النسبة المئوية: 100٪ هو اللون الكامل.
  3. الخفة هي أيضا نسبة؛ 0٪ غامق (أسود) و 100٪ أبيض.
hsl (0 ، 100٪ ، 30٪) ؛
hsl (0 ، 100٪ ، 50٪) ؛
hsl (0 ، 100٪ ، 70٪) ؛
hsl (0 ، 100٪ ، 90٪) ؛

يحدد المثال التالي ألوان HSL المختلفة:

مثال

#p1 {background-color: hsl(120, 100%, 50%);}  /* green */
#p2 {background-color: hsl(120, 100%, 75%);}  /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}  /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green */

ألوان HSLA

قيم ألوان HSLA هي امتداد لقيم ألوان HSL مع قناة ألفا - والتي تحدد عتامة اللون.

يتم تحديد قيمة لون HSLA بـ: hsla (تدرج اللون ، التشبع ، الإضاءة ، ألفا) ، حيث تحدد معلمة ألفا التعتيم. معامل ألفا هو رقم بين 0.0 (شفاف بالكامل) و 1.0 (معتم بالكامل).

هسلا (0 ، 100٪ ، 30٪ ، 0.3) ؛
هسلا (0 ، 100٪ ، 50٪ ، 0.3) ؛
هسلا (0 ، 100٪ ، 70٪ ، 0.3) ؛
هسلا (0 ، 100٪ ، 90٪ ، 0.3) ؛

يحدد المثال التالي ألوان HSLA المختلفة:

مثال

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green with opacity */

العتامة

تحدد خاصية CSS opacityالتعتيم للعنصر بأكمله (سيكون لون الخلفية والنص معتمًا / شفافًا).

يجب opacityأن تكون قيمة الخاصية رقمًا بين 0.0 (شفاف تمامًا) و 1.0 (معتم بالكامل).

RGB (255 ، 0 ، 0) ؛ العتامة: 0.2 ؛
RGB (255 ، 0 ، 0) ؛ العتامة: 0.4 ؛
RGB (255 ، 0 ، 0) ؛ العتامة: 0.6 ؛
RGB (255 ، 0 ، 0) ؛ العتامة: 0.8 ؛

لاحظ أن النص أعلاه سيكون أيضًا شفافًا / معتمًا!

يوضح المثال التالي عناصر مختلفة مع تعتيم:

مثال

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* blue with opacity */

اختبر نفسك مع التمارين

ممارسه الرياضه:

أدخل قيمة لون RGBA للحصول على لون خلفية أحمر كامل لعنصر <h1> ، بدون شفافية.

<style>
h1 {
  background-color: ;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>


❮ سابق التالي ❯