يمكن لـ HTML تقديم بعض المعلومات فقط ولها إمكانات أداء محدودة جدًا ويجب استخدامها مع CSS لجعل الصفحة أكثر جمالًا. في صفحة الويب، يمكن نقل كافة رموز الأنماط من مستند HTML إلى ورقة أنماط منفصلة.
يمكن إدخال أنماط CSS في مستندات HTML كملفات منفصلة (ملفات من النوع .css) أو كتابتها مباشرة في مستندات HTML ويمكن تقسيمها تقريبًا إلى الطرق الأربع التالية:
1. ورقة الأنماط المضمنة
مضمن: تركيز أنماط CSS في زوج علامات <style></style> من زوج علامات <head></head> لصفحة الويب؛
أضف أنماط CSS إلى علامة <style> في علامة <head> الخاصة بـ HTML. لا يمكن استخدام أنماط CSS المحددة باستخدام أوراق الأنماط المضمنة إلا داخل صفحة الويب الحالية.
<!DOCTYPEhtml><html><head><title>النمط المضمّن</title><style>body{background-color:linen;}h1{color:maroon;margin-left:40px;}</style>< / head><body><h1>النمط</h1></body></html>نظرًا لأن ورقة الأنماط المضمنة تحتاج إلى تحديد نمط CSS داخل مستند HTML، فسيؤدي ذلك إلى زيادة حجم المستند، وعندما تحتاج المستندات الأخرى أيضًا إلى استخدام نفس النمط في ورقة الأنماط المضمنة، لا يمكن إدخاله في مستندات أخرى و يجب أن تؤدي إعادة تعريفه في مستندات أخرى إلى تكرار الكود ولا يؤدي إلى الصيانة اللاحقة.
2. الأنماط المضمنة
مضمن: يُسمى أيضًا مضمنًا، ويتم تعيين نمط CSS في سمة النمط الخاصة بالعلامة. لا يعكس هذا النهج مزايا CSS؛
النمط المضمن هو تحديد معلومات النمط مباشرةً في سمة النمط لعلامة HTML، نظرًا لأن النمط المضمّن محدد داخل العلامة، فهو صالح فقط للعلامة التي يوجد بها.
<!DOCTYPEhtml><html><head><title>مضمن</title></head><body><h1style=color:maroon;margin-left:40px>مضمن</h1></body ><</html >على الرغم من أن النمط المضمّن يمكن أن يمنح أنماط CSS لعلامات HTML بسهولة، إلا أن عيوبه واضحة جدًا أيضًا، ولا يُنصح باستخدامه كثيرًا.
(1) يتطلب تحديد الأنماط المضمنة تحديد سمة النمط في كل علامة HTML، وهو أمر غير مريح للغاية؛
(2) كن حذرًا بشكل خاص عند استخدام علامات الاقتباس المزدوجة أو علامات الاقتباس المفردة في الأنماط المضمنة، لأن سمات علامات HTML تستخدم عادةً علامات الاقتباس المزدوجة لتغليف قيمة السمة، مثل <input type=text>؛
(3) لا يمكن إعادة استخدام الأنماط المحددة في الأنماط المضمنة في أي مكان آخر؛
(4) الأنماط المضمنة غير ملائمة جدًا للصيانة اللاحقة، لأن موقع الويب عادةً ما يتكون من عدة صفحات، وعند تعديل نمط الصفحة، يجب تعديل الصفحات واحدة تلو الأخرى؛
(5) ستؤدي إضافة عدد كبير جدًا من الأنماط المضمنة إلى زيادة حجم مستند HTML.
3. أوراق الأنماط الخارجية
نوع الرابط: مثل نوع الاستيراد الرابع، يُطلق عليهما النوع الخارجي أو نوع الرابط الخارجي. استخدم الارتباط للإشارة إلى ملفات CSS الخارجية؛
تعد أوراق الأنماط الخارجية الطريقة الأكثر شيوعًا والموصى بها للإشارة إلى CSS، ما عليك سوى تحديد نمط CSS في ملف بتنسيق .css، ثم استخدام علامة HTML <link> لتطبيق ملف النمط بتنسيق .css على HTML الوثيقة.
<!DOCTYPEhtml><html><head><title></title><linkrel=stylesheethref=./style.css></head><body><h1>ورقة الأنماط الخارجية</h1></body>< / أتش تي أم أل>
نظرًا لأنه تم تعريف نمط CSS في ملف بتنسيق .css منفصل، فيمكن الرجوع إليه بين صفحات متعددة. إذا كنت تريد تعديل نمط صفحة ويب، فأنت بحاجة فقط إلى تعديل ملف نمط CSS هذا، وهو أمر مريح للغاية.
4. استيراد ورقة الأنماط
مستورد: استخدم @import للإشارة إلى ملفات CSS الخارجية؛
يمكنك أيضًا استخدام @import للإشارة إلى أوراق الأنماط الخارجية، وهو ما يشبه استخدام العلامة <link>. قم بإنشاء style.css عام أولاً، ثم قم باستيراد جميع الأنماط إلى style.css أولاً.
HTML:
<!DOCTYPEhtml><html><head><title></title><linkrel=stylesheethref=style.css></head><body><h1>ورقة الأنماط الخارجية</h1></body></html >
style.css:
@import1.css;@import2.css;@import3.css;@import4.css;
1.css: (الأرقام من 1 إلى 4 هي نفسها، وكلها تضيف أنماطًا)
.top1{list-style-type:none;margin:0;padding:0;}