الدليل الشامل لعنصر <style> في HTML
مقدمة عن عنصر <style>
عنصر <style> في HTML يُستخدم لتضمين قواعد التنسيق (CSS) مباشرة داخل مستند HTML، مما يسمح بتطبيق الأنماط دون الحاجة إلى ملف خارجي منفصل. هذا العنصر أساسي في تصميم صفحات الويب ويعتبر من العناصر الأساسية في لغة HTML.
المواقع الصحيحة لوضع عنصر <style>
1 داخل قسم <head> (الاستخدام الأمثل)
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
}
</style>
</head>
<body>
<h1>مرحباً بالعالم!</h1>
</body>
</html>2 داخل <body> (استخدام محدود)
<body>
<style>
.highlight {
background-color: yellow;
}
</style>
<p class="highlight">نص مميز</p>
</body>السمات الرئيسية لعنصر <style>
1 سمة type (اختيارية في HTML5)
<style type="text/css">
p { line-height: 1.6; }
</style>2 سمة media (للتكيف مع وسائط مختلفة)
<style media="screen">
/* أنماط لشاشات العرض */
</style>
<style media="print">
/* أنماط للطباعة */
body { font-size: 12pt; }
</style>3 سمة scoped (غير مدعومة حالياً)
<div>
<style scoped>
/* كانت تنطبق فقط على العنصر الأب وأطفاله */
</style>
</div>تقنيات متقدمة مع <style>
1 استعلامات الوسائط (Media Queries)
<style>
body {
background-color: lightblue;
}
@media screen and (max-width: 600px) {
body {
background-color: lightgreen;
}
}
</style>2 تضمين خطوط مخصصة
<style>
@font-face {
font-family: 'MyCustomFont';
src: url('myfont.woff2') format('woff2');
}
body {
font-family: 'MyCustomFont', sans-serif;
}
</style>3 متغيرات CSS
<style>
:root {
--main-color: #4CAF50;
--secondary-color: #f8f8f8;
}
body {
background-color: var(--secondary-color);
}
h1 {
color: var(--main-color);
}
</style>أفضل الممارسات لاستخدام <style>
- استخدم
<style>في<head>للأنماط العامة التي تنطبق على الصفحة بأكملها - للأنماط المحدودة، فكر في استخدام ملف CSS خارجي أو أنماط مضمنة (inline styles)
- يمكن تعديل محتويات
<style>ديناميكياً باستخدام JavaScript - للصفحات الكبيرة، يُفضل استخدام ملفات CSS خارجية بدلاً من عناصر
<style>متعددة
دعم المتصفحات
عنصر <style> مدعوم من قبل جميع المتصفحات الحديثة بما في ذلك:
Chrome
مدعوم بالكامل
Firefox
مدعوم بالكامل
Safari
مدعوم بالكامل
Edge
مدعوم بالكامل
Internet Explorer
منذ الإصدارات القديمة
Opera
مدعوم بالكامل
الخلاصـــة
عنصر <style> هو أداة قوية لتضمين CSS مباشرة في مستندات HTML. بينما يفضل استخدام ملفات CSS خارجية للمشاريع الكبيرة، يظل <style> خياراً ممتازاً للأنماط الصغيرة أو الخاصة بصفحة معينة أو للتجارب السريعة.
