تگ <style></style> در html - وب سایت PNLdev

نمونه کد

HTML یک نمونه کد ساده از تگ <style>

<style>
    body {
      font-family: 'Arial', sans-serif;
      background-color: #f2f2f2;
      margin: 0;
      padding: 0;
    }

    .container {
      text-align: center;
      margin-top: 50px;
    }

    .text {
      color: #e74c3c; 
      font-size: 24px;
      font-weight: bold;
      text-decoration: underline;
    }

    .button {
      background-color: #2ecc71; 
      color: #ffffff;
      padding: 10px 20px;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
</style>

آزمایشگاه

تعریف و کاربرد

با استفاده از تگ <style> می توانید حالت و ویژگی های مختلفی را برای کد های خود در سند های html درست کنید.

سازگاری با مرورگر

#	کروم	ادج	فایرفاکس	سافاری	اپرا
<style>

ویژگی ها

ویژگی ها	مقادیر	توضیحات
media	media-query	برای تعیین نوع لینک سند و اینکه آن به چه دستگاه و رسانه ای بهینه شده است، استفاده می شود.
type	text , css	نوع تگ های مربوطه در سمت را تعیین می کند.

ویژگی های سراسری

تگ style از ویژگی های سراسری HTML پشتیبانی می کند.

ویژگی های رویداد

تگ style از ویژگی های رویداد HTML پشتیبانی می کند.

نمونه کد های بیشتر

نمونه کد

نمونه کد تگ <style> در HTML - مثال شماره 1

<style>
    body {
      font-family: 'Arial', sans-serif;
      background-color: #f8f8f8;
      color: #333;
      margin: 20px;
      text-align: center;
    }

    h1 {
      color: #0066cc;
      text-decoration: underline;
    }

    p {
      color: #333;
      font-size: 18px;
    }
    button {
      background-color: #4caf50;
      color: white;
      padding: 10px 20px;
      font-size: 16px;
      border: none;
      cursor: pointer;
      border-radius: 5px;
    }
    button:hover {
      background-color: #45a049;
    }
</style>

آزمایشگاه

استایل css پیش فرض

بیشتر مرورگر ها تگ style را با استایل پیشفرض زیر نمایش می دهند:

style {
	display: none;
}

تگ <style> در HTML <style></style> tag HTML

نمونه کد

تعریف و کاربرد

سازگاری با مرورگر

ویژگی ها

ویژگی های سراسری

ویژگی های رویداد

نمونه کد های بیشتر

نمونه کد

استایل css پیش فرض

تگ <style> در HTML
<style></style> tag HTML