نبذة عامة
تعرفنا بالدرس السابق على البنية الصحيحة لكتابة أكواد الـ CSS ولكن هذه الأكواد أين أقوم بكتابته ، هناك ثلاث طرق بكتابة أكواد الـ CSS ، سنتعرف عليهم بالتفصيل في هذا الدرس .
الطريقة الأولى – كتابة كود CSS داخل العنصر نفسه
في هذه الطريقة يمكننا كتابة أكواد الـ CSS داخل العنصر نفسه ويكون الكود كـ Attribute ويكون إسم هذا الـ Attribute هو style والقيمة الخاصة به هي خصائص الـ CSS التي تريد تطبيقها على هذا العنصر
<p style='color: red; font-size: 22px'> This Is Paragraph </p>
في هذه الحالة ، سيكون الـ Selector هو العنصر نفسه الذي قمت بكتابة أكواد الـ CSS داخله وسيتم تطبيق هذه الأكواد عليه ، بجرد كتابة style وهو بمثابة Attribute لهذا العنصر يتم بين ( ‘ ‘ ) كتابة التصريح Declaration الذي سيكون قيمة الـ Style Attribute يحتوي على إسم الخاصة وقيمتها مع الفصل بين كل Declaration وأخر بفاصلة منقوطة ( ; )
ملاحظة: هذه الطريقة لن يتم تطبيق أكواد الـ CSS الإ فقط على هذا العنصر الذي تقوم بكتابة هذه الأكواد بداخله ، وتسمي هذه الطريقة ( Inline Style )
الطريقة الثانية – كتابة أكواد الـ CSS داخل الـ <head>
في هذه الطريقة يتم كتابة أكواد الـ CSS في ملف الـ HTML أيضاََ ولكن في جزء الـ <head> وجميع أكواد الـ CSS ستكون في داخل الوسم <style>
لو أردتنا تطبيق بعض خصائص الـ CSS على عنصر الـ <p> مثل تغير لونه وحجمه .
<p> This Is Paragraph </p>
في هذه الحالة سنقوم بالذهاب إلى جزء الـ <head> و وضع الخصائص داخل عنصر <style>
<!DOCTYPE html>
<html>
<head>
<title>Learn Css</title>
<style>
p { color: red; font-size: 22px}
</style>
</head>
<body>
<p> This Is Paragraph </p>
</body>
</html>
كما لاحظنا ، قمنا بإختيار العنصر <p> لتطبيق عليه الخصائص ومن ثم اضافة هذه الخصائص داخل <style> … </style> ، المثال بشكل كامل:
3
في هذه الطريقة سيتم تطبيق خصائص الـ CSS على صفحة الـ HTML الموجود بها كود الـ CSS فقط .
ملاحظة: تسمي هذه الطريقة ( Internal Style )
الطريقة الثالثة – كتابة أكواد الـ CSS في ملف منفصل
في هذه الطريقة يتم كتابة أكواد الـ CSS في ملف منفصل تماما عن الـ HTML ويتم ربط هذا الملف في الصفحة المراد تطبيق عليها خصائص التنسيق من خلال عنصر <link> في داخل <head>
يفضل دائما وضع ملفات الـ CSS المنفصلة في مجلد خاص بها كنوع من الترتيب ويكون هذا المجلد بجانب ملفات الـ HTML وملفات الـ CSS تكون بإمتداد .css
عنصر الـ <link>
هو أحد عناصر الـ HTML وله العديد من الإستخدامات ، ومن إستخداماته هو ربط صفحات التنسيق الـ CSS بصفحة الـ HTML وتوضيح العلاقة بينهما ويتم الربط من خلال خاصية href وقيمة هذه الخاصية تكون مسار أو مكان تواجد ملف الـ CSS .
ملاحظة: تسمي هذه الطريقة ( External Style )
لماذا كتابة كود CSS في ملف منفصل هي الطريقة الأفضل !
للإجابة على هذا السؤال ، تخيل معي أن لديك موقع يتكون من 10 صفحات HTML وكل صفحة تحتوي على المئات من العناصر والتي تحتاج لتنسيقها وتضبيط جماليتها ، كيف ستعمل على تنسيقها ، هل ستقوم بإنشاء لكل صفحة ملف css منفصل خاص به وربطه بهذه الصفحة ، حسناََ ماذا لو أردت التعديل في الصفحات العشرة ، هل ستقوم ايضاََ بالتعديل على العشر ملفات css المربوطة بهذه الصفحات ، بكل تأكيد هذه الطريقة خاطئة ، ميزة الطريقة الثالثة أنه لو كان لديك موقع كامل يتكون من عشرات الصفحات ومئات الأكواد وتريد تنسيقها بإمكانك ربط جميع هذه الصفحات بملف css واحد فقط وعند التعديل ستقوم بالتعديل من مكان واحد فقط !
سنتعلم في الدرس التالي ما هي الـ Selectors التي يمكن عمل عليها التنسيقات من خلال الـ CSS .