<style>: عنصر STYLE
آخر تحديث: 2026-10-13
<style>عنصر STYLE
يكتب قواعد CSS مضمّنة في المستند دون ملف خارجي؛ media يمكنها تقييد متى يُطبق.
| الفئة | البيانات الوصفية |
|---|---|
| نموذج المحتوى | محتوى تدفقي |
| العناصر الأم المسموحة | أي عنصر يقبل المحتوى التدفقي |
| وسم الإغلاق | نعم — يتطلب إغلاق </style> وسم |
| الحالة | قياسي |
📝 البنية
<style>
selector { property: value; }
</style>⚙️ السمات
يدعم هذا العنصر السمات العامة بالإضافة إلى ما يلي:
| السمة | القيمة | الوصف |
|---|---|---|
type | Style language, default text/css, usually omitted. | |
media | Media condition that limits when the style applies. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفح
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <style> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
نصيحة： style مناسب للعروض التوضيحية؛ مواقع الإنتاج تفضل CSS خارجية عبر link لإعادة الاستخدام.
❓ الأسئلة الشائعة
Qأين يوضع وسم style: في head أم body؟
Aتقيد المواصفة style في head فقط (وضعه في body لا يوافق نموذج المحتوى). عمليًا تتسامح المتصفحات معه، لكن الصواب تركيز CSS الحرجة في head تفاديًا لـ FOUC؛ أما حقن style عبر JS في سيناريوهات المكونات فشأن آخر.
Qما الفرق بين style و link في إدخال CSS؟
A
<style> كتلة أنماط مضمنة تصل مع HTML دون طلبات إضافية، تناسب CSS الحرجة للشاشة الأولى؛ و<link> رابط خارجي قابل للتخزين المؤقت وإعادة الاستخدام عبر الصفحات وأيسر صيانة، يناسب أنماط الموقع كلها. وتركيبة الأداء الكلاسيكية: style للحرجة في head، وlink يحمل البقية بشكل غير معرقِل.Qكيف تستخدم سمة media في style؟
Aأضف
media='print' ليتفعَّل هذا الجزء عند الطباعة فقط، أو media='(max-width: 600px)' للتفعيل الشرطي. وانتبه: كتلة style غير المطابقة لا تُطبق لكنها تُنزَّل وتُحلل مع ذلك.🏷️ وسوم ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قادمة قريبًا — ترقبوا.
📚 دروس ذات صلة
