آموزش HTML – تگ style

نویسنده : مرتضی گنج | تاریخ انتشار : 2020/01/14 | بخش : آموزش HTML

تعریف و کاربرد تگ style در HTML

تگ <style> (استایل) ، تگی است که با استفاده از آن می توان برای یک صفحه وب استایل تعریف و یا ایجاد کرد.

منظور از استایل یعنی همون رنگ دادن به صفحه وب ، یا مثلا شکل و شمایل سایت رو درست کردن، و بطور کلی هرچیزی که بتونه در ظاهر سایت نقشی داشته باشه رو می تونیم بگیم استایل اون سایت.

زبان CSS نیز دقیقا برای همین کار ایجاد شده، یعنی برای ایجاد استایل و بطور کلی برای شکل و شمایل دادن به سایت ما باید از زبان CSS و دستوراتی که در این زبان وجود دارند استفاده نماییم.

  • تگ <style> برای تعریف اطلاعات استایل برای یک سند HTML استفاده می شود.
  • در داخل عنصر <style> مشخص می کنید که چگونه عناصر HTML باید در یک مرورگر نمایش داده شود.

نکات و توضیحات

  • تگ <style> همیشه در بین تگ <head> قرار می گیرد و تگ <head> نیز همیشه قبل از تگ <body> در یک صفحه وب قرار می گیرد.
  • از چندین تگ <style> می توان درون یک صفحه وب استفاده کرد و مشکلی ندارد .
  • از تگ <style> فقط و فقط می توان درون یک صفحه وب استفاده کرد، یعنی اگه شما ۳ صفحه وب داشته باشید باید داخل هر ۳تای آنها بصورت جداگانه از تگ style و دستورات css مورد نظرتان استفاده نمایید.
  • برای لینک کردن به یک فایل CSS خارجی، از تگ <link> استفاده می کنیم.
  • اگر خصوصیت “scoped” استفاده نشود، هر تگ <style> باید در قسمت <head> قرار گیرد.

 

تفاوت بین HTML 4.01 و HTML5

خصوصیت “scoped” در HTML5 جدید است، که اجازه می دهد style ها برای بخش مشخصی از سند تعریف شود. اگر خصوصیت”scoped” وجود داشته باشد، آن style ها فقط به عناصر style عنصر والد و عنصر فرزند اعمال می شود.

 

مثال از تگ 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 در HTML

Element
<style> بله بله بله بله بله

 

جدول صفات تگ style در HTML

نام صفت  مقدار توضیح
media media_query مشخص می کند که دستورات css مورد نظر برای دستگاهای مختلف بهینه سازی شود.
(برای واکنش گرایی صفحات وب)
scoped scoped مشخص می کند که style ها فقط به عناصر style عنصر والد و عنصر فرزند اعمال می شود.
type text/css نوع رسانه یا نوع محتوایی تگ style را مشخص می کند.