عندما يقرأ المتصفح ورقة الأنماط، سيفرم وثيقة HTML وفقًا للمعلومات الموجودة في ورقة الأنماط.
ثلاث طرق لإضافة CSS
هناك ثلاث طرق لإضافة ورقة أنماط:
- CSS خارجية: يمكنك من خلالها تغيير مظهر موقع ويب بالكامل عن طريق تغيير ملف واحد فقط!
- CSS داخلية: يتم تعريفها داخل وثيقة HTML نفسها.
- CSS مضمنة: يتم تعريفها مباشرة داخل عنصر HTML.
الـ CSS الخارجية
باستخدام أنماط خارجية، يمكنك تغيير مظهر موقع ويب بالكامل عن طريق تغيير ملف واحد فقط!
يجب أن تتضمن كل صفحة HTML إشارة إلى ملف الأنماط الخارجية داخل عنصر <link>, داخل قسم <head>.
مثال:
يتم تعريف الأنماط الخارجية داخل عنصر <link>, داخل قسم <head> لصفحة HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
يمكن كتابة الأنماط الخارجية في أي محرر نص، ويجب حفظها بامتداد .css.
يجب ألا تحتوي ملفات .css الخارجية على أي علامات HTML.
هكذا يبدو ملف “mystyle.css”:
“mystyle.css”
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
ملاحظة: لا تضع مسافة بين قيمة الخاصية (20) ووحدة القياس (px):
خطأ (مسافة): margin-left: 20 px;
صحيح (بدون مسافة): margin-left: 20px;
الـ CSS الداخلية
يمكن استخدام الأنماط الداخلية إذا كانت صفحة HTML واحدة لها نمط فريد.
يتم تعريف النمط الداخلي داخل عنصر <style>، داخل قسم <head>.
مثال:
يتم تعريف الأنماط الداخلية داخل عنصر <style>، داخل قسم <head> لصفحة HTML:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
ملفات أنماط متعددة
إذا تم تعريف بعض الخصائص لنفس المحدد (العنصر) في ملفات أنماط مختلفة، فستُستخدم القيمة من آخر ملف أنماط تمت قراءته.
الافتراض:
- لديك ملف أنماط خارجي يحتوي على القاعدة التالية لعناصر h1:
h1 {
color: navy;
}
- لديك أيضًا ملف أنماط داخلي يحتوي على القاعدة التالية لعناصر h1:
h1 {
color: orange;
}
التأثير على حسب ترتيب قراءة الأنماط:
- مثال 1: إذا تم تعريف الأنماط الداخلية بعد الرابط إلى ملف الأنماط الخارجي، ستكون عناصر h1 باللون البرتقالي (“orange”):
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
- مثال 2: أما إذا تم تعريف الأنماط الداخلية قبل الرابط إلى ملف الأنماط الخارجي، ستكون عناصر h1 باللون الأزرق الداكن (“navy”):
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
الخلاصة:
ترتيب قراءة ملفات الأنماط يؤثر على المستخدمات النهائية للأنماط. لذا، من المهم ترتيب ملفات الأنماط بشكل يتناسب مع احتياجات التصميم وتجنب التعارضات غير المقصودة.
ترتيب تداخل الأنماط (Cascading Order)
عندما يتم تحديد أكثر من نمط لعنصر HTML، أي نمط سيتم تطبيقه؟
تتحد جميع أنماط الصفحة في “تسلسل تنازلي” لإنشاء نمط “افتراضي” جديد وفقًا للقواعد التالية، حيث يحظى الرقم الأول بأعلى الأولوية:
- النمط المضمن (داخل عنصر HTML): له أعلى الأولوية.
- الأنماط الخارجية والداخلية (في قسم head): تأتي بعد النمط المضمن.
- الأنماط الافتراضية للمتصفح: تأتي في النهاية.
لذلك، يملك النمط المضمن أعلى الأولوية وسيستبدل بالأنماط الخارجية والداخلية والأنماط الافتراضية للمتصفح.
