كيفية إضافة CSS
عندما يقرأ المستعرض ورقة أنماط ، فإنه يقوم بتنسيق مستند HTML وفقًا للمعلومات الموجودة في ورقة الأنماط.
ثلاث طرق لإدراج CSS
توجد ثلاث طرق لإدراج ورقة أنماط:
- CSS خارجي
- CSS داخلي
- مضمنة CSS
CSS خارجي
باستخدام ورقة أنماط خارجية ، يمكنك تغيير مظهر موقع ويب بأكمله عن طريق تغيير ملف واحد فقط!
يجب أن تتضمن كل صفحة HTML مرجعًا لملف ورقة الأنماط الخارجية داخل عنصر <link> ، داخل قسم الرأس.
مثال
يتم تحديد الأنماط الخارجية داخل عنصر <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;
}
ملاحظة: لا تضف مسافة بين قيمة الخاصية والوحدة:
غير صحيح (مسافة): margin-left: 20 px;
صحيح (مسافة):margin-left: 20px;
CSS داخلي
يمكن استخدام ورقة أنماط داخلية إذا كانت صفحة HTML واحدة لها نمط فريد.
يتم تحديد النمط الداخلي داخل عنصر <style> ، داخل قسم الرأس.
مثال
يتم تحديد الأنماط الداخلية داخل عنصر <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>
مضمنة CSS
يمكن استخدام نمط مضمن لتطبيق نمط فريد لعنصر واحد.
لاستخدام الأنماط المضمنة ، أضف سمة النمط إلى العنصر ذي الصلة. يمكن أن تحتوي سمة النمط على أي خاصية CSS.
مثال
يتم تحديد الأنماط المضمنة في سمة "النمط" للعنصر ذي الصلة:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This
is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
نصيحة: يفقد النمط المضمن العديد من مزايا ورقة الأنماط (عن طريق مزج المحتوى مع العرض التقديمي). استخدم هذه الطريقة باعتدال.
أوراق نمط متعددة
إذا تم تحديد بعض الخصائص لنفس المحدد (العنصر) في أوراق أنماط مختلفة ، فسيتم استخدام القيمة من آخر ورقة أنماط تمت قراءتها.
افترض أن ورقة الأنماط الخارجية لها النمط التالي للعنصر <h1>:
h1
{
color: navy;
}بعد ذلك ، افترض أن ورقة الأنماط الداخلية تحتوي أيضًا على النمط التالي للعنصر <h1>:
h1
{
color: orange;
}مثال
إذا تم تحديد النمط الداخلي بعد الارتباط بورقة الأنماط الخارجية ، فستكون عناصر <h1> "برتقالية":
<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)
- أوراق الأنماط الخارجية والداخلية (في قسم الرأس)
- المتصفح الافتراضي
لذلك ، فإن الأولوية القصوى للنمط المضمن ، وسوف يلغي الأنماط الخارجية والداخلية وافتراضيات المتصفح.
هل سمعت عن W3Schools Spaces ؟ هنا يمكنك إنشاء موقع الويب الخاص بك ، أو حفظ مقتطفات التعليمات البرمجية لاستخدامها لاحقًا مجانًا.
ابدأ مجانًا ❯* بطاقة الإئتمان غير مطالب بها