أحدث البرامج التعليمية وتطوير الشبكة
×

CSS البرنامج التعليمي

CSS الصفحة الرئيسية CSS المقدمة CSS بناء الجملة CSS كيف CSS الألوان CSS خلفيات CSS حدود CSS هوامش CSS حشوة CSS عرض ارتفاع CSS نص CSS الخطوط CSS الروابط CSS قوائم CSS الجداول CSS صندوق نموذج CSS المخطط CSS العرض CSS العرض الاقصى CSS الوظيفة CSS تطفو CSS Inline-block CSS محاذاة CSS Combinators CSS الفئة المزيفة CSS شبه عنصر CSS شريط التنقل CSS القوائم المنسدلة CSS تلميحات CSS معرض الصور CSS صورة التعتيم CSS العفاريت صورة CSS ATTR المختارون أشكال CSS CSS عدادات

CSS3

CSS3 المقدمة CSS3 زوايا مدورة CSS3 صور الحدود CSS3 خلفيات CSS3 الألوان CSS3 التدرجات CSS3 ظلال CSS3 نص CSS3 الخطوط CSS3 2D التحويلات CSS3 التحويلات 3D CSS3 التحولات CSS3 الرسوم المتحركة CSS3 صور CSS3 أزرار CSS3 ترقيم الصفحات CSS3 أعمدة متعددة CSS3 واجهة المستخدم CSS3 مربع تحجيم CSS3 Flexbox CSS3 تساؤلات الإعلام CSS3 أمثلة MQ

CSS تصميم ويب مستجيب

تصميم ويب مستجيب مقدمة تصميم ويب مستجيب العرض تصميم ويب مستجيب شبكة عرض تصميم ويب مستجيب تساؤلات الإعلام تصميم ويب مستجيب صور تصميم ويب مستجيب فيديوهات تصميم ويب مستجيب الأطر

CSS Examples

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

CSS References

CSS مرجع CSS محددات CSS وظائف CSS إشارة أورال CSS Web Safe الخطوط CSS Animatable CSS وحدات CSS PX-EM محول CSS الألوان CSS قيم اللون CSS أسماء الألوان CSS3 دعم المتصفح

 

CSS الألوان

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

CSS3 الألوان

CSS يدعم أسماء الألوان، عشري والألوان RGB.

وبالإضافة إلى ذلك، يقدم CSS3 أيضا:

  • الألوان رغبا
  • الألوان هسل
  • الألوان HSLA
  • غموض

دعم المتصفح

الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل قيم الألوان CSS3 / الممتلكات.

الملكية
RGBA, HSL, and HSLA 4.0 9.0 3.0 3.1 10.1
غموض 4.0 تسعة 2.0 3.1 10.1

رغبا الألوان

قيم الألوان رغبا هي امتداد لقيم الألوان RGB مع alpha القناة - التي تحدد التعتيم للون.

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

رغبا (255، 0، 0، 0.2)؛
رغبا (255، 0، 0، 0.4)؛
رغبا (255، 0، 0، 0.6)؛
رغبا (255، 0، 0، 0.8)؛

يحدد المثال التالي رغبا ألوان مختلفة:

مثال

#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 */
انها محاولة لنفسك »

هسل الألوان

هسل لتقف على هوى، والتشبع والخفة.

تم تحديد قيمة اللون هسل مع: هسل (هوى، والتشبع، وخفة).

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

يحدد المثال التالي الأعرج ألوان مختلفة:

مثال

#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 هي امتداد لقيم الألوان هسل مع alpha القناة - التي تحدد التعتيم للون.

تم تحديد قيمة اللون HSLA مع: HSLA (هوى، والتشبع، وخفة، alpha )، حيث alpha تحدد المعلمة التعتيم. و alpha المعلمة عددا بين 0.0 (شفافة بالكامل) و 1.0 (مبهمة تماما).

HSLA (0، 100٪، 30٪، 0.3)؛
HSLA (0، 100٪، 50٪، 0.3)؛
HSLA (0، 100٪، 70٪، 0.3)؛
HSLA (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 */
انها محاولة لنفسك »

غموض

الخاصية CSS3 التعتيم يحدد التعتيم عن قيمة RGB محدد.

يجب أن تكون قيمة الممتلكات التعتيم عدد يتراوح بين 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.

لاحظ أن النص أعلاه ستكون أيضا مبهمة.

يظهر المثال التالي قيم RGB مختلفة مع التعتيم:

مثال

#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 */
انها محاولة لنفسك »

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

التمرين 1 » التمرين 2» التمرين 3 » التمرين 4»


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