CSS

Part 1 – مقدمة عن CSS – سلسلة FSWD -CSS

ahmedمنذ 4 أسابيع

0 142 2 دقائق

1. مقدمة عن CSS

ما هو CSS؟

CSS اختصار لـ Cascading Style Sheets، هو لغة تنسيق تُستخدم لتحديد مظهر وتنسيق عناصر HTML في صفحات الويب. يساعد CSS في التحكم في:

الألوان: تحديد الألوان للنصوص، الخلفيات، والحدود.
الخطوط: التحكم في نوع وحجم الخطوط.
التنسيق: تحديد كيفية ترتيب العناصر في الصفحة.
التفاعلات: إضافة تأثيرات أو تغييرات في المظهر عند التفاعل مع العناصر.

ببساطة، CSS يجعل صفحات HTML أكثر جمالاً وتنظيماً.

أنواع CSS

CSS يمكن أن يُكتب بعدة طرق حسب المكان الذي تكتب فيه الشيفرة:

1. Inline CSS

يتم كتابة الـ CSS داخل وسم HTML نفسه باستخدام خاصية style.
يُستخدم عندما تريد تطبيق تنسيق معين على عنصر واحد فقط في الصفحة.

مثال على Inline CSS

<p style="color: red; font-size: 20px;">هذا نص باللون الأحمر وحجمه 20px.</p>

2. Internal CSS

يتم كتابة الـ CSS داخل وسم <style> داخل رأس الصفحة (داخل وسم <head>).
يُستخدم في حال كانت التنسيقات خاصة بصفحة واحدة فقط ولا تريد استخدامها في صفحات أخرى.

مثال على Internal CSS

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال على Internal CSS</title>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>هذا النص باللون الأزرق وحجمه 18px.</p>
</body>
</html>

3. External CSS

يتم كتابة الـ CSS في ملف خارجي بامتداد .css ويتم ربطه بصفحة الـ HTML باستخدام وسم <link> في رأس الصفحة.
يُستخدم عندما تريد تطبيق نفس التنسيق على العديد من الصفحات في موقع الويب.

مثال على External CSS:

ملف HTML (index.html)

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال على External CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>هذا نص سيتم تنسيقه باستخدام ملف CSS خارجي.</p>
</body>
</html>

ملف CSS (styles.css)

p {
    color: green;
    font-size: 16px;
}

أهمية الـ CSS

تحسين الشكل العام للموقع: يساعد CSS في جعل الموقع أكثر جذبًا من الناحية البصرية من خلال التحكم في الألوان، والخطوط، والمسافات، وما إلى ذلك.
الفصل بين المحتوى والتصميم: مع CSS، يمكن فصل هيكل المحتوى (HTML) عن مظهره (CSS). هذا يجعل من الأسهل تعديل التصميم دون التأثير على المحتوى.
تحسين التفاعل مع المستخدم: يمكنك إضافة تأثيرات مثل التحولات (Transitions) والرسوم المتحركة (Animations) لجعل الموقع أكثر تفاعلًا وجاذبية.
تحسين تجربة المستخدم (UX): مع CSS يمكن تحسين تجربة المستخدم من خلال تصميم متجاوب (Responsive Design) يجعل الموقع يعمل بشكل جيد على جميع الأجهزة (مثل الهواتف والحواسيب).
زيادة سرعة تحميل الموقع: يمكن تحسين الأداء من خلال استخدام تقنيات CSS مثل تقليل عدد الاستعلامات الخارجية أو تحسين الكود

كود مثال كامل:

لتوضيح الأنواع الثلاثة، سنقدم مثالًا كاملًا يجمع بين Inline CSS و Internal CSS و External CSS:

1. ملف HTML (index.html)

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال على أنواع CSS</title>
    <!-- ربط ملف External CSS -->
    <link rel="stylesheet" href="styles.css">
    <style>
        /* Internal CSS */
        h1 {
            color: darkblue;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <!-- Inline CSS -->
    <p style="color: red; font-size: 20px;">هذا نص باللون الأحمر وحجمه 20px باستخدام Inline CSS.</p>
    
    <h1>عنوان الصفحة باستخدام Internal CSS</h1>
    
    <p>هذا نص سيتم تنسيقه باستخدام External CSS.</p>
</body>
</html>

2. ملف CSS خارجي (styles.css):

/* External CSS */
p {
    color: green;
    font-size: 18px;
}

الشرح:

Inline CSS: يتم تطبيقه مباشرة داخل الوسم <p> باستخدام خاصية style.
Internal CSS: تم تضمين الـ CSS داخل وسم <style> في رأس الصفحة.
External CSS: تم ربط ملف خارجي styles.css الذي يحتوي على تنسيقات خاصة بنصوص الفقرات.