جميع اكواد CSS: مع الشرح .. بتنسيق سهل الفهم

للعلّم - توفير جميع أكواد CSS مع الشرح يتطلب الكثير من المساحة نظرًا لأن CSS تتضمن العديد من الخصائص التي يمكن استخدامها لتنسيق صفحة ويب. لكنني سأعطيك نظرة شاملة لأهم الأكواد والخصائص في CSS مع شرح كل واحدة.

1. الخصائص الأساسية
1.1 اللون (color)
تحدد لون النص.
p {
color: red;
}
1.2 حجم الخط (font-size)
تحدد حجم الخط.
p {
font-size: 16px;
}
1.3 العائلة الخطية (font-family)
تحدد نوع الخط.
p {
font-family: Arial, sans-serif;
}
1.4 عرض النص (text-align)
تحدد محاذاة النص داخل العنصر.
p {
text-align: center; /* يمكن أن تكون left, right, center, justify */
}
1.5 ارتفاع السطر (line-height)
تتحكم في المسافة بين الأسطر.
p {
line-height: 1.5;
}
2. التنسيق والتخطيط (Layout)
2.1 عرض العنصر (width)
تحدد عرض العنصر.
div {
width: 200px;
}
2.2 ارتفاع العنصر (height)
تحدد ارتفاع العنصر.
div {
height: 100px;
}
2.3 هوامش (margin)
تحدد المسافة بين حدود العنصر والعناصر الأخرى.
div {
margin: 20px;
}
2.4 تعبئة (padding)
تحدد المسافة بين محتويات العنصر وحدوده.
div {
padding: 10px;
}
2.5 مربع الحد (border)
تحدد خصائص الحد المحيط بالعنصر.
div {
border: 2px solid black;
}
3. الخصائص المتقدمة
3.1 التحولات (transition)
تضيف تأثيرات انتقالية بين حالتين.
button {
background-color: blue;
transition: background-color 0.3s ease;
}
button:hover {
background-color: red;
}

3.2 الظلال (box-shadow)
تضيف ظلًا للعنصر.
div {
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}
3.3 التحولات ثلاثية الأبعاد (transform)
تحول العنصر باستخدام بعض العمليات مثل التدوير والتكبير.
div {
transform: rotate(45deg);
}
3.4 التحديدات (pseudo-classes)
تسمح بتحديد حالة معينة لعنصر، مثل :hover, :focus.
a:hover {
color: red;
}
4. خصائص النصوص المتقدمة
4.1 الحروف الكبيرة (text-transform)
تحول النصوص إلى حروف كبيرة أو صغيرة أو لا شيء.
h1 {
text-transform: uppercase;
}
4.2 التباعد بين الحروف (letter-spacing)
تحدد المسافة بين الحروف.
h1 {
letter-spacing: 2px;
}
4.3 التحديد الغامق/المائل (font-weight, font-style)
font-weight لتحديد سمك الخط، وfont-style لتحديد إذا كان الخط مائلًا.
p {
font-weight: bold;
font-style: italic;
}
5. إعدادات الخلفيات (backgrounds)
5.1 خلفية الصورة (background-image)
تحدد صورة كخلفية للعنصر.
div {
background-image: url('background.jpg');
}
5.2 تكرار الخلفية (background-repeat)
تحدد إذا كان يجب تكرار الصورة في الخلفية أم لا.
div {
background-repeat: no-repeat;
}
5.3 موقع الخلفية (background-position)
تحدد موقع الصورة الخلفية.
div {
background-position: center;
}
5.4 تغطية الخلفية (background-size)
تحدد كيفية تغطية الخلفية داخل العنصر.
div {
background-size: cover;
}
6. النماذج (Forms)
6.1 إخفاء/إظهار العناصر (display)
يمكن استخدام display للتحكم في كيفية عرض العناصر.
div {
display: none; /* إخفاء العنصر */
}
6.2 عرض العنصر كـ (block, inline)
يمكن استخدام display لجعل العنصر يعرض كـ بلوك أو كخط مستمر.
div {
display: block;
}
span {
display: inline;
}
6.3 تحكم في محاذاة العناصر (vertical-align)
تتحكم في محاذاة العناصر عموديًا.
img {
vertical-align: middle;
}
7. الخصائص المتعلقة بالتنقلات (Flexbox & Grid)
7.1 Flexbox
يسمح Flexbox بتوزيع المساحات بشكل ديناميكي بين العناصر.
.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 1;
}

7.2 Grid
يستخدم لتوزيع العناصر على شبكة.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

.item {
grid-column: span 2;
}

8. وسائط الاستعلام (Media Queries)
تستخدم لتغيير التنسيق بناءً على حجم الشاشة أو خصائص أخرى.
@media (max-width: 600px) {
.container {
display: block;