ورقة غش أنماط CSS

تُستخدم CSS (صفحات الأنماط الانسيابية) للتحكم في تخطيط وتنسيق صفحات الويب. تغطي ورقة الغش هذه الخصائص والمحددات الأكثر استخداماً.

المحددات (Selectors)

النوع	مثال	الوصف
All	`* { }`	مطابقة جميع العناصر
Type	`h1 { }`	مطابقة وسم HTML محدد
Class	`.header { }`	مطابقة العناصر بـ class=“header”
ID	`#main { }`	مطابقة العنصر بـ id=“main”
Descendant	`div p { }`	مطابقة جميع p داخل div
Pseudo	`a:hover { }`	الحالة عند تمرير الماوس

نموذج الصندوق (Box Model)

.box {
  width: 300px;
  height: 200px;
  padding: 10px;    /* الحشوة الداخلية */
  border: 1px solid #ccc; /* الحدود */
  margin: 20px;     /* الهامش الخارجي */
  box-sizing: border-box; /* يشمل الحدود والحشوة */
}

تنسيق الخطوط والطباعة

Property	الوصف	مثال
`font-family`	عائلة الخط	`font-family: Arial, sans-serif;`
`font-size`	حجم الخط	`font-size: 16px;`
`font-weight`	وزن الخط	`font-weight: bold;`
`text-align`	محاذاة النص	`text-align: center;`
`line-height`	ارتفاع السطر	`line-height: 1.5;`
`color`	لون الخط	`color: #333;`

الألوان والخلفيات

Property	الوصف	مثال
`background-color`	لون الخلفية	`background-color: #f0f0f0;`
`background-image`	صورة الخلفية	`background-image: url('bg.jpg');`
`background-size`	حجم الخلفية	`background-size: cover;`
`opacity`	الشفافية	`opacity: 0.8;`

تحديد المواقع (Positioning)

position: static; : تخطيط انسيابي افتراضي
position: relative; : إزاحة نسبةً إلى موضعه الأصلي
position: absolute; : تحديد الموقع نسبةً إلى أول عنصر أب غير ثابت
position: fixed; : تحديد الموقع نسبةً إلى نافذة المتصفح
position: sticky; : ثابت عند التمرير لموضع معين
z-index: 10; : التحكم في ترتيب الطبقات

العرض والتخطيط

display: block; : عنصر كتلة (Block)
display: inline; : عنصر سطري (Inline)
display: inline-block; : عنصر سطري كتلوي
display: flex; : تفعيل تخطيط Flex
display: grid; : تفعيل تخطيط Grid
display: none; : إخفاء العنصر دون حجز مساحة

اختصارات الخصائص الشائعة

margin: 10px 5px 15px 20px; (أعلى يمين أسفل يسار)
padding: 10px 5px; (أعلى-أسفل يمين-يسار)
border: 1px dashed red; (العرض النمط اللون)