HTML таг `style`

Пример

Кратък пример как се използва тагът <style>.

<! -- Вътрешни CSS стилове в <head> -->
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f8f9fa;
    }

    h1 {
      color: #0d6efd;
      text-align: center;
    }

    .custom-box {
      border: 1px solid #0d6efd;
      padding: 1rem;
      border-radius: .5rem;
      background-color: #ffffff;
      max-width: 400px;
      margin: 1rem auto;
    }
  </style>
</head>

<body>
  <h1>Заглавие със стил</h1>
  <div class="custom-box">
    Това е кутия, стилизирана чрез вътрешния <style> елемент.
  </div>
</body>

Опитай в редактора

Дефиниция и употреба

Тагът <style> се използва за дефиниране на вътрешни CSS стилове директно в HTML документа. Обикновено се поставя в секцията <head> и съдържа CSS код, който описва как да бъдат визуализирани HTML елементите на страницата.

Всичко, което се намира между отварящия и затварящия таг <style>...</style>, се интерпретира като CSS. Тези стилове важат за целия документ (освен ако не са ограничени чрез селектори) и имат приоритет над външните стилови файлове, но са с по-нисък приоритет от inline стиловете (атрибут style="" върху елемент).

Препоръчително е за по-големи проекти да се използват външни CSS файлове чрез <link>, а <style> да се използва за малки примери, бързи тестове, специфични overrides или когато няма достъп до външен файл.

Синтаксисът е:

<style>
  селектор {
    свойство: стойност;
  }
</style>

Browser Support

Browser	Поддръжка
Chrome	✔️
Firefox	✔️
Edge	✔️
Safari	✔️
Opera	✔️

Атрибути

Този елемент няма специфични атрибути.

Тагове

a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fencedframe fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 head header hgroup hr html i iframe img input ins kbd label legend li link main map mark menu meta meter nav noscript object ol optgroup option output p picture pre progress q rp rt ruby s samp script search section select selectedcontent slot small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr

HTML таг style