2- أين نكتب رموز لغة CSS

في هذا الدرس سوف نتعلم أين نكتب الرموز الخاصة بلغة css, أو بمعنى آخر كيفية ربط لغة css مع ملفات أو لغة html
وهنالك ثلاثة طرق للكتابة وهي
1. الكتابة باستخدام وسم style داخل وسم head
2. الكتابة المباشرة مع أوسمة لغة html
3. كتابتها في ملف منفصل وربطها مع ملفات html
أما الآن فدعونا ننظر في التفاصيل
ولكن قبل هذا إليكم المثال التالي للغة html
والذي سوف نستخدمه في هذا الدرس
والنموذج هو كما يلي


<!DOCTYPE html>

<html lang=“ar”>

<head>

    <meta charset=“UTF-8”>

    <title>CSS</title>

</head>

<body>

    <h1>المدخل لتعلم لغة CSS</h1>

    <p>أول إستخدام لملفات CSS</p>

</body>

</html>

أولا قم بحفظ هذه السطور في ملف باسم a.html على سطح المكتب ثم قم بفتحه باستخدام المتصفح الخاص بك
في هذا النموذج قمنا باستخدام وسم العناوين h1 ووسم الفقرات p فقط,
وسوف نقوم بتطبيق الطرق الثلاثة على هذا النموذج
وسوف نقوم بتغيير لون وحجم هذه النصوص التي تظهر لنا

1. الكتابة باستخدام وسم style

عند إستخدام هذه الطريقة يجب كتابة وسم <style> داخل وسم <head>
وبهذه الطريقة يمكننا تغيير جميع محتويات وسم <body> وطريقةكتابتها تكون على النحو التالي


<!DOCTYPE html>

<html lang=“ar”>

<head>

    <meta charset=“UTF-8”>

    <title>CSS</title>

        <style>

            h1 {color: red; }

        </style>

</head>

<body>

    <h1>المدخل لتعلم لغة CSS</h1>

    <p>أول إستخدام لملفات CSS</p>

</body>

</html>

كما هو موضح أعلاه قمنا بتغيير لون وسم العناوين إلى اللون الأحكر
وبنفس الطريقة يمكننا كتابة وتغيير أي شيء متعلق بشكل ومظهر النصوص والصور المختلفة

الطريقة الثانية هي كتابة أكواد css مباشرة داخل أوسمة html وذلك على النحو التالي


<!DOCTYPE html>

<html lang=“ar”>

<head>

    <meta charset=“UTF-8”>

    <title>CSS</title>

        <style>

            h1 {color: red; }

        </style>

</head>

<body>

    <h1>المدخل لتعلم لغة CSS</h1>

    <p style="color: blue;">أول إستخدام لملفات CSS</p>

</body>

</html>

وكما هو موضح, قمنا بتغيير نمط وسم العناوين كما هو في المثال البسابق, بين وسم head
وقمنا بتغيير لوم وسم الفقرات باستخدام وسم style عند كتابة وسم الفرقرات ,
وبهذه الطريقة أيضا يمكننا تغيير لون وحجم النصوص المختلفة
وبناءا على ما تقدم, فيمكن إستخدام الطريقة الأولى أو الثانية بصورة منصلة أودمجهما في نفس الملف لتصميم المواقع الإلكترونية
ومن أهم مميزات هتين الطريقتين هي سهولة الكتابة والإستخدام وبالإضافة سهولة التعديل والتغيير, وخاصة إذا كان الموقع مكون من عدد قليل جدا من الصفحات
لكن ومن أكبر عيوب هتين الطريقتين هي, صعوبة التعديل وخسارة الوقت والجهد المستقرق, خاصة إذا كان لدينا عدد كبير من الصفحات المراد تعديلها
ولتجنب هذه المشكلة واختصار الوفت يجب إستخدام الطريقة التالية
والتي تعتبر أكثر إستخداما وشيوعا

الطريقة الثالثة هي طتابة أكواد css في ملف خارجي

كما ذكرنا هي أكثر الطرق إستخداما والأفضل لدى الكثير من مصممي مواقع وتطبيقات الويب
وفي الغالب الأعم لا نقوم بكتابة أكواد css داخل ملفات html
وإنما نقوم بكتابتها في ملف منفصل ثم نقوم بربطه مع ملفات html
ويجب أن يكون إمتداد هذه الملفات هو .css
أما الآن فدعونا نقوم بإنشاء ملف css وربطه مع نموذج html السابق
فمثلاإذا أردنا تغيير حجم النص الخاص بوسم العناوين نقوم بكتابتها على النحو التالي
h1{
font-size:40px;
}
أولا نقوم بنسخ هذه السطور وحفظها في ملف باسم style.css على سطح المكتب
ملحوظة يجب أن يكون الإمتداد هو .css
ملحوظة ثانية يجب حفظ هذا الملف في نفس مجلد ملفات html المراد ربطه معها
ثانيا كيف نقوم بربط هذا الملف مع ملف a.html الذي أنشأناه سابقا
وعند الربط بين ملفات css وملفات html نستخدم خاصية link ويجب كتابتها داخل وسم head
وطريقة كتابتها تكون على النحو التالي
<link rel=“stylesheet” href=“style.css”>
ملحوظة يجب كتابة هذا السطر بهذه الطريقة فقط مع إمكانية تغيير اسم الملفات وفي هذا النموذج هو ملف style.css إلى أي اسم آخر
وإذا كان الملف في مجلد منفصل عن ملفات html فيجب مراعات كتابة المسار الصحيح
ملحظة rel تشير إلى ملف القراءة, أما href فتشير إلى مسار هذا الملف المراد قراءته
ويجب أن يكون محتوى ملف htjl السابق هو على النحو التالي


<!DOCTYPE html>

<html lang=“ar”>

<head>

    <meta charset=“UTF-8”>

    <title>CSS</title>

        <style>

            h1 {color: red; }

        </style>

 <link rel="stylesheet" href="style.css">

</head>

<body>

    <h1>المدخل لتعلم لغة CSS</h1>

    <p style="color: blue;">أول إستخدام لملفات CSS</p>

</body>

</html>

قم بحفظ هذا الملف ثم فتحه باستخدام المتصفحات ويستم قراءة وتفعيل محتوى ملف css الذي تم ربطه
ومن أهم مميزات هذه الطريقة
فمثلاإذا كان لدينا عدد كبير أو غير محدود من لفات html تم ربطها بهذا الملف
فسوف يتم تغيير مظهر وتصميم هذه الملفات جميعا في مرة واحدة بمجرد التعديل على ملف css فقط
وبتعديل ملف واحد يمكننا التحكم في شكل وظهر أي موقع من المواقع المختلفة
ومن خلال الدرس القادم, سوف نقوم بكتابة المزيد من النماذج باستخدام هذه الطريقة