علامة <نمط> HTML
مثال
استخدم عنصر <style> لتطبيق ورقة أنماط بسيطة على مستند HTML:
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
تُستخدم <style>العلامة لتحديد معلومات النمط (CSS) للمستند.
داخل <style>العنصر تحدد كيفية عرض عناصر HTML في المستعرض.
نصائح وملاحظات
ملاحظة: عندما يقرأ المستعرض ورقة أنماط ، فإنه يقوم بتنسيق مستند HTML وفقًا للمعلومات الموجودة في ورقة الأنماط. إذا تم تحديد بعض الخصائص لنفس المحدد (العنصر) في أوراق أنماط مختلفة ، فسيتم استخدام القيمة من آخر ورقة أنماط تمت قراءتها (انظر المثال أدناه)!
نصيحة: للارتباط بورقة أنماط خارجية ، استخدم علامة <link> .
نصيحة: لمعرفة المزيد حول أوراق الأنماط ، يرجى قراءة دروس CSS الخاصة بنا .
دعم المتصفح
| Element | |||||
|---|---|---|---|---|---|
| <style> | Yes | Yes | Yes | Yes | Yes |
صفات
| Attribute | Value | Description |
|---|---|---|
| media | media_query | Specifies what media/device the media resource is optimized for |
| type | text/css | Specifies the media type of the <style> tag |
السمات العالمية
تدعم <style>العلامة أيضًا السمات العامة في HTML .
سمات الحدث
تدعم <style>العلامة أيضًا سمات الحدث في HTML .
مزيد من الأمثلة
مثال
أنماط متعددة لنفس العناصر:
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
<style>
h1 {color:green;}
p {color:pink;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This
is a paragraph.</p>
</body>
</html>
الصفحات ذات الصلة
دروس HTML: HTML CSS
دروس CSS : دروس CSS
مرجع DOM HTML: كائن النمط
إعدادات CSS الافتراضية
ستعرض معظم المتصفحات <style>العنصر بالقيم الافتراضية التالية:
style {
display: none;
}