عندما يقرأ المتصفح ورقة أنماط، فإنه سيكون على شكل وثيقة HTML وفقا للمعلومات في ورقة الأنماط.
ثلاث طرق لإدراج CSS
هناك ثلاث طرق لإدراج ورقة أنماط:
ورقة نمط خارجية
مع ورقة نمط خارجية، يمكنك تغيير شكل كامل الموقع عن طريق تغيير ملف واحد فقط!
ويجب أن تتضمن كل صفحة إشارة إلى ملف ورقة النمط الخارجي داخل <link> العنصر. و <link> عنصر يذهب داخل <head> القسم:
ورقة نمط خارجية يمكن أن يكتب في أي محرر نصوص. يجب أن لا يحتوي الملف على أية علامات HTML. يجب أن يتم حفظ ملف ورقة الاسلوب مع .css التمديد.
هنا هو كيف يمكن لل "myStyle.css" النظرات:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
} | لا تقم بإضافة مسافة بين قيمة العقار وحدة (مثل margin-left:20 px; ). الطريقة الصحيحة هي: margin-left:20px; |
|---|
ورقة نمط الداخلية
ويمكن استخدام ورقة نمط الداخلية إذا كانت صفحة واحدة لديها أسلوب فريد من نوعه.
يتم تعريف الأنماط الداخلية داخل <style> العنصر داخل <head> قسم من صفحة HTML:
مثال
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head> انها محاولة لنفسك » أنماط مضمنة
نمط مضمن يمكن استخدامها لتطبيق أسلوب فريد من نوعه لعنصر واحد.
لاستخدام أساليب المضمنة، إضافة سمة نمط العناصر ذات الصلة. يمكن أن تحتوي السمة أسلوب أي ممتلكات CSS.
المثال التالي يوضح كيفية تغيير لون والهامش الأيسر من <h1> العنصر:
| نمط مضمن يفقد العديد من المزايا من ورقة نمط (عن طريق خلط المحتويات مع العرض). استخدام هذا الأسلوب لماما! |
|---|
أوراق الأنماط المتعددة
إذا لم يتم تحديد بعض الخصائص لنفس محدد (عنصر) في أوراق الأنماط المختلفة، وسوف يتم استخدام قيمة من آخر ورقة نمط قراءة.
مثال
نفترض أن ورقة نمط خارجية لديها النمط التالي ل <h1> العنصر:
h1
{
color: navy;
}ثم، افترض أن ورقة نمط الداخلية أيضا لديه النمط التالي ل <h1> العنصر:
h1
{
color: orange;
}إذا تم تعريف النمط الداخلي بعد الارتباط إلى ورقة الأنماط الخارجية، و <h1> العناصر سيكون "orange" :
مثال
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head> انها محاولة لنفسك » ومع ذلك، إذا تم تعريف النمط الداخلي قبل الارتباط إلى ورقة الأنماط الخارجية، و <h1> العناصر ستكون "navy" :
مثال
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> انها محاولة لنفسك » المتتالية ترتيب
ما هو النمط سوف تستخدم عندما يكون هناك يتم تحديد أسلوب أكثر من واحد لعنصر HTML؟
وبصفة عامة يمكننا القول أن كل الأنماط سوف "تعاقب" إلى "افتراضية" ورقة نمط جديد وفقا للقواعد التالية، حيث رقم واحد لديه أولوية قصوى:
- النمط المضمن (داخل عنصر HTML)
- أوراق الأنماط الخارجية والداخلية (في قسم الرأس)
- المتصفح الافتراضي
لذلك، وهو النمط المضمن (داخل عنصر HTML معين) له الأولوية العليا، الأمر الذي يعني أنها ستتجاوز أسلوب محددة داخل <head> العلامة، أو في ورقة نمط خارجية، أو قيمة المتصفح الافتراضي.
اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 » التمرين 4»