نمط HTML <style>

  • الصفحة السابقة <strong>
  • الصفحة التالية <sub>

التعريف والاستخدام

<style> يستخدم العنصر لتحديد معلومات النمط في الوثيقة (CSS).

في <style> في العنصر، يمكنك تحديد كيفية ظهور عنصر HTML في المتصفح.

لاحظ أن عنصر style يحدد أنماط CSS المدمجة في وثيقة HTML، بينما يتم استخدام عنصر link لاستيراد أنماط من جدول أنماط خارجي.

يمكن أن يظهر عنصر style في أي جزء من وثيقة HTML. يمكن أن تحتوي الوثيقة على عدة عناصر style، لذا لا تحتاج إلى وضع جميع تعريفات الأنماط في جزء head. هذا الميزة مفيدة جدًا في حالة استخدام محركات النماذج لإنشاء الصفحات، حيث يمكن استخدام أنماط صفحة محددة لتقديم إضافة إلى الأنماط المحددة من النموذج.

انظر أيضًا:

دليل HTML:HTML CSS

دليل CSS:دليل CSS

دليل HTML DOM:مفهوم Style

مثال

مثال 1

استخدام <style> يطبق العنصر جدول الأنماط البسيط على وثيقة HTML:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</head>
<body>
<h1>هذا هو العنوان</h1>
<p>هذا هو فقرة.</p>
</body>
</html>

جرب بنفسك

مثال 2

عدة أنماط لجسم نفس العنصر:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
<style>
  h1 {color:green;}
  p {color:pink;}
</style>
</head>
<body>
<h1>هذا هو العنوان</h1>
<p>هذا هو فقرة.</p>
</body>
</html>

جرب بنفسك

الإرشادات والتعليقات

ملاحظة:عندما يقرأ المتصفح جدول الأنماط، يقوم بتنسيق وثيقة HTML بناءً على معلومات جدول الأنماط. إذا تم تعريف بعض الخصائص لنفس المختار (العنصر) في أنماط مختلفة، فإنه سيستخدم القيمة التي تم قراءتها آخر مرة (انظر المثال أعلاه)!

نصيحة:للروابط إلى جدول النصوص الخارجي، استخدم <link> تسمية.

نصيحة:للحصول على معلومات إضافية حول نماذج النصوص، يرجى قراءة دليل CSS.

الخصائص

الخصائص القيمة وصف
media استعلام وسائل الإعلام يحدد وسيلة استخدام النمط.
type text/css يحدد نوع وسيلة <style>.

خصائص العالمية

<style> الدعم عن طريق خصائص العالمية في HTML.

خصائص الحدث

<style> الدعم عن طريق خصائص الحدث في HTML.

إعدادات CSS الافتراضية

معظم المتصفحات ستعرض ما يلي كقيم افتراضية: <style> العنصر:

style {
  display: none;
}

دعم المتصفحات

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم
  • الصفحة السابقة <strong>
  • الصفحة التالية <sub>