ما هو CSS؟ — تصميم CSS

ما هو CSS؟

HTML يحدد ما هو المحتوى، و CSS (Cascading Style Sheets) يحدد كيف يبدو: الألوان، الخطوط، المسافات، التخطيط، والتجاوب مع الشاشات. فصلهما يعني أنك تغيّر شكل موقع كامل بتعديل ملف واحد.

تركيب القاعدة

h1 {
    color: navy;
    font-size: 32px;
}

| الجزء | المثال | الدور |

|---|---|---|

| المحدد (selector) | h1 | أي العناصر |

| الخاصية (property) | color | ماذا نغيّر |

| القيمة (value) | navy | إلى ماذا |

| التصريح (declaration) | color: navy; | خاصية + قيمة، وينتهي بـ ; |

نسيان ; أو } يُبطل التصريح التالي بصمت — المتصفح لا يعرض أخطاء CSS، يتجاهل ما لا يفهمه.

ثلاث طرق لإضافة CSS

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>طرق إضافة CSS</title>
    <!-- 1) ملف خارجي — الأفضل -->
    <link rel="stylesheet" href="css/style.css">
    <!-- 2) داخل الصفحة -->
    <style>
        p { color: gray; }
    </style>
</head>
<body>
    <!-- 3) على العنصر مباشرة -->
    <p style="color: red;">نص</p>
</body>
</html>

| الطريقة | متى |

|---|---|

| ملف خارجي | دائماً تقريباً: ملف واحد لكل الصفحات، والمتصفح يخزنه مؤقتاً |

| <style> | تجارب سريعة أو صفحة واحدة |

| style="" | نادراً: صعب الصيانة، ويغلب كل القواعد الأخرى (الدرس 3) |

التعليقات

/* تعليق */ — لا يوجد // في CSS؛ سطر يبدأ بـ // قد يكسر القاعدة التالية.

أدوات المطور: أهم مهارة

انقر بالزر الأيمن على أي عنصر ← فحص (Inspect). في لوحة Styles ترى:

- كل القواعد المطبقة على العنصر ومن أي ملف وسطر.

- القواعد المشطوبة: غلبتها قاعدة أخرى (ستفهم لماذا في درس التتالي).

- يمكنك تعديل القيم مباشرة وتجربتها قبل كتابتها في الملف.

عندما "لا يعمل التنسيق"، افتح أدوات المطور أولاً: هل القاعدة موجودة؟ هل مشطوبة؟ هل المحدد يطابق العنصر أصلاً؟

تنسيق المتصفح الافتراضي

حتى بلا CSS للعناوين حجم وللفقرات هوامش — هذا تنسيق المتصفح الافتراضي (user agent stylesheet). لذلك يبدأ كثيرون ملفهم بإعادة ضبط بسيطة:

*, *::before, *::after {
    box-sizing: border-box;
}
body {
    margin: 0;
    line-height: 1.6;
}
img {
    max-width: 100%;
    display: block;
}

(ستفهم كل سطر خلال الدورة.)

تمرين

أنشئ style.css واربطه بصفحتك الشخصية من دورة HTML. غيّر لون خلفية body ولون العناوين وخط الصفحة. ثم افتح أدوات المطور وعدّل لوناً مباشرة وراقب التغيير.

/* هذا تعليق في CSS */

/* تنسيق كل الفقرات */
p {
    color: blue;
    font-size: 16px;
}

/* تنسيق العناوين */
h1 {
    color: #333;
    text-align: center;
}

/* تنسيق باستخدام class */
.highlight {
    background-color: yellow;
    padding: 10px;
}