تصميم CSS:

الأدوات التي تشكل محتوى الصفحة

• العرض: العرض } تلقائي/ أولي

• الارتفاع: الارتفاع } الحد الأدنى / الحد الأقصى

• وريث: يحافظ على المقياس المحدد بالفعل

• الهامش: أعلى / يسار / يمين / أسفل

• المساحة المتروكة: المسافة بين المحتوى الداخلي والخارجي

• حجم الصندوق: إرجاع العنصر إلى أحجام محددة مسبقًا

الألوان في CSS

• RGB: القيم بين 0 و 255 لتحديد درجات اللون الأحمر والأخضر والأزرق، مفصولة بفاصلة. مثال:

#rgb{
   color: rgb(250, 30, 70);
}

تمثل القيمة 250 اللون الأحمر، و30 يمثل اللون الأخضر، و70 يمثل اللون الأزرق، وهو ما قد يؤدي في هذه الحالة إلى شيء مشابه لـ:

• RGBA: يشبه إلى حد كبير RGB، ولكن تمت إضافة عامل الشفافية، والذي يتراوح بين 0 و1؛
• HEX: تعريف سداسي عشري بين 0 و9، ومن A إلى F، حيث F هي أعلى قيمة، باتباع نمط مشابه لـ rgb. مثال:

00FF00 -> أخضر
FF0000 -> أحمر
0000FF -> أزرق

#hex{
  color: #03BB76;
}

سينتج عن ذلك شيء مثل:

• HSL (تدرج اللون، التشبع، الإضاءة): تحديد اللون من خلال تدرجه (0 أحمر، 120 أخضر، 240 أزرق)، التشبع (0% درجة رمادية، 100% لون كامل)، اللمعان (0% أسود) ، 100% أبيض) - يوجد أيضًا HSLA الذي يعتمد على عامل ألفا (0 إلى 1) لقياس مستوى الشفافية. مثال:

#hsl{
  color: hsla(120, 100%, 50%, 1.0);
}

ستؤدي هذه البرمجة إلى الحصول على لون أخضر بالكامل، ولكن يمكنك البحث عن درجات أخرى باستخدام عجلة الألوان HSL.

أموال

• لون الخلفية: لون الخلفية الصلبة
• صورة الخلفية: صورة مرجعية في الخلفية
• التدرج الخطي: التدرج الخطي
• التدرج الشعاعي: التدرج الدائري
• تكرار: تكرار التأثير

background-size: يحدد حجم خلفية العنصر، مصحوبة بالإعدادات:

• تلقائي: الضبط التلقائي
• الغلاف: يغطي كامل مساحة العنصر
• تحتوي على: تغيير حجم المحتوى بحيث تظهر الصورة الكاملة/غير المقصوصة
• القيمة: ضبط حجم الصورة داخل العنصر

التكرار تكرار الخلفية: يحدد المحور الذي تتكرر عليه الصورة:

• التكرار: أقصى عدد ممكن من التكرار
• تكرار x: يتكرر فقط على المحور x (أفقي)
• تكرار ص: يتكرر فقط على المحور ص (عموديًا)
• الفضاء: يتكرر على كلا المحورين دون قطع بمسافات
• مستدير: يتكرر في كل الاتجاهات دون أن يتم قطعه، فقط تم تغيير حجمه
• عدم التكرار: عدم التكرار

موضع الخلفية: تحديد موضع صور الخلفية
الوسط، اليسار، اليمين، x%،y%

مرفق الخلفية: كيف ستتصرف الصورة وفقًا لنافذة المتصفح

• ثابت: لا يتحرك
• التمرير: تم تثبيته على كائن
• محلي: "التمرير" بجوار المحتوى

background-origin: يحدد منطقة موضع الصورة

• مربع الحشو: الزاوية الأصلية بجوار الحشو
• مربع الحدود: تبدأ الصورة بجوار المنطقة الخارجية للحدود
• مربع المحتوى: أقل من الحشو، محاذاة لمحتوى العنصر

background-flip: يحدد ما إذا كان لون العنصر يغطي الحواف أم لا

• مربع الحشو: محاذاة للحشوة
• مربع الحدود: محاذاة الحدود
• مربع المحتوى: يملأ منطقة المحتوى
• مقطع النص: الخلفية في النص (يجب أن يكون اللون شفافًا)

وضع الخلفية اللطيف: تأثيرات على خلفية العناصر

حواف

• عرض الحدود: الحجم الذي ستحتوي عليه الحدود
• نمط الحدود: نوع الحدود
• لون الحدود: لون الحدود
• نصف قطر الحدود: حدود مستديرة

صورة الحدود

• المصدر: ضبط مسار الصورة
• العرض: عرض صورة الحدود
• تكرار: التحكم في تكرار الصورة أم لا
• البداية: المسافة من حافة العنصر
• شريحة: تقسيم إلى مناطق

المحتوى (صورة أو فيديو)

ملاءمة الكائن : كيف يتصرف محتوى العنصر في المربع المحدد

• fill: املأ المساحة بالكامل وقم بتشويهها
• تحتوي على: لن يتم تشويهها، ولكنها ستتناسب مع القياسات المقررة
• الغلاف: املأ كل المساحة دون تشويه
• لا شيء: يتجاهل قياسات الكائن الأصلي ويستخدم قياساته الأصلية
• تصغير الحجم: أصغر إعداد للصورة دون تشويه

موضع الكائن : الصورة المركزية

• المحور السيني والمحور الصادي
• يسار، يمين، وسط، أعلى، أسفل