3- كورس CSS للمبتدئين – CSS: طرق كتابة CSS داخلية وخارجية وinline

مقدمة في CSS

تعتبر CSS (أوراق الأنماط المتتالية) من التقنيات الأساسية في تطوير الويب، حيث تُمكن المطورين من تنسيق وتصميم صفحات الويب بشكل جذاب ومتناسق. تتيح CSS التحكم في الألوان والخطوط والتخطيطات والعديد من الجوانب الأخرى لصفحات الويب. يمكن استخدام CSS بطرق متعددة لتطبيق الأنماط على العناصر، وتشمل هذه الطرق: الداخلية والخارجية وinline.

الطرق الثلاثة لكتابة CSS

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

1. CSS الداخلية (Internal CSS)

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

body {
            background-color: lightblue;
        }
        h1 {
            color: navy;
            margin-left: 20px;
        }
    


    <h1>مرحباً بكم في موقعنا</h1>
    <p>هذا مثال على استخدام CSS الداخلية.

2. CSS الخارجية (External CSS)

في هذه الطريقة، يتم كتابة أكواد CSS في ملف منفصل بامتداد .css، ثم يتم ربط هذا الملف بملف HTML باستخدام وسم . تُعد هذه الطريقة مثالية للمشاريع الكبيرة التي تتطلب تنسيقًا موحدًا عبر عدة صفحات، حيث تتيح فصل المحتوى عن التصميم وتسهيل إدارة الأكواد وتحديثها.

<!-- ملف HTML -->



    


    <h1>مرحباً بكم في موقعنا</h1>
    <p>هذا مثال على استخدام CSS الخارجية.</p>



<!-- ملف CSS (styles.css) -->
body {
    background-color: lightblue;
}
h1 {
    color: navy;
    margin-left: 20px;
}

3. CSS المضمنة (Inline CSS)

يتم تطبيق CSS المضمنة مباشرة داخل وسم HTML باستخدام خاصية style. تُستخدم هذه الطريقة لتطبيق أنماط محددة على عنصر واحد فقط. رغم أنها ليست الأفضل من حيث التنظيم والكفاءة، إلا أنها مفيدة في حالة الحاجة لإجراء تعديل سريع على عنصر فردي دون التأثير على باقي الصفحة.

<h1 style=\"color: navy;margin-left: 20px\">مرحباً بكم في موقعنا</h1>
    <p style=\"background-color: lightblue\">هذا مثال على استخدام CSS المضمنة.

الخاتمة

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