برچسب <style> HTML

تعریف و استفاده

<style> برچسبی برای تعریف اطلاعات استایل مستند (CSS) استفاده می‌شود.

در <style> در این عنصر، می‌توانید نحوه‌ی نمایش عنصر HTML در مرورگر را مشخص کنید.

لطفاً توجه داشته باشید که عنصر استایل استایل‌های CSS درونی مستند HTML را تعریف می‌کند، در حالی که عنصر link برای وارد کردن استایل‌های پوسته‌های خارجی استفاده می‌شود.

عنصر استایل می‌تواند در هر بخشی از مستند HTML ظاهر شود. یک مستند می‌تواند شامل چندین عنصر استایل باشد، بنابراین لازم نیست همه تعاریف استایل را در بخش head قرار دهید. در مواردی که از موتورهای قالب‌سازی استفاده می‌شود، این ویژگی بسیار مفید است زیرا به این ترتیب می‌توان استایل‌های خاص صفحه را برای استایل‌های تعریف شده در قالب اضافه کرد.

لطفاً به: مراجعه کنید

آموزش HTML:HTML CSS

آموزش CSS:آموزش CSS

دستورالعمل HTML DOM:موضوع استایل

مثال

مثال 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
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی