HTML-тег <style>

HTML-тег <style> используется для определения внутренних CSS(каскадных таблиц стилей) непосредственно в HTML-документе. Он позволяет задавать стили для HTML-элементов, включая их расположение, внешний вид и поведение. Тег <style> размещается внутри раздела <head> документа и влияет на все соответствующие элементы на странице.

Внутренний CSS, определенный с помощью тега <style> полезен для добавления стилей, специфичных для одной страницы, или когда внешние таблицы стилей не нужны.

Базовый синтаксис тега HTML <style>

Базовая структура тега <style> следующая: 

<style>
    selector {
        property: value;
    }
</style>

Здесь selector указывает HTML-элементы для стилизации, а property: value; определяет стили, которые необходимо применить.

Пример внутреннего CSS с тегом <style>

Вот пример определения стилей внутри тега <style> : 

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                font-family: Arial, sans-serif;
                margin: 20px;
            }
            h1 {
                color: #007BFF;
                text-align: center;
            }
            p {
                font-size: 16px;
                line-height: 1.5;
            }
        </style>
    </head>
    <body>
        <h1>Welcome to My Page</h1>
        <p>This is an example of using the <style> tag to add internal CSS to an HTML document.</p>
    </body>
</html>
Пример внутреннего CSS с тегом style

Пояснение: Внутренние стили определяют шрифт, цвет текста и выравнивание для элементов страницы, таких как <body> , <h1> и <p> . Эти стили применяются только к данному документу.

Атрибуты HTML-тега <style>

  • type: определяет MIME-тип стилей. Значение по умолчанию — text/css , поэтому этот атрибут необязателен в современном HTML.
  • media: указывает тип носителя, для которого определены стили, например screen , print или all .

Например, вы можете использовать атрибут media для применения стилей к определенным устройствам: 

<style media="print">
    body {
        font-size: 12px;
        color: black;
    }
</style>

Этот стиль будет применяться только при печати документа.

Стилизация определенных элементов

Используя тег <style> , вы можете выбирать различные элементы и классы для определения пользовательских стилей: 

<style>
    .highlight {
        background-color: yellow;
        font-weight: bold;
    }
    #important {
        color: red;
        font-size: 18px;
    }
</style>

<p>This is a <span class="highlight">highlighted</span> word.</p>
<p id="important">This is an important message.</p>
Стилизация определенных элементов

Результат: слово «выделено» отображается на желтом фоне и жирным шрифтом, а «важное сообщение» — красным и большего размера.

Преимущества использования тега <style>

  • Удобно для небольших проектов: идеально подходит для добавления стилей в одностраничные проекты без необходимости использования внешней таблицы стилей.
  • Немедленное применение: внутренние стили применяются немедленно, без дополнительной загрузки файлов.
  • Стилизация под различные носители: применяйте стили для различных типов носителей, например, печати или экрана, в одном документе.

Ограничения тега <style>

  • Невозможно повторное использование: стили, определенные в теге <style> , нельзя использовать повторно на нескольких страницах.
  • Увеличение размера страницы: встроенные стили могут увеличить размер HTML-файла, что скажется на производительности крупных проектов.
  • Более сложное обслуживание: управление стилями в HTML-документе может стать обременительным для сложных макетов.

Для более крупных проектов предпочтительны внешние таблицы стилей, поскольку они удобны в обслуживании и повышают производительность.

Практическое применение тега <style>

  • Прототипирование: быстрое оформление элементов на этапе разработки без настройки внешних файлов.
  • Одностраничные проекты: идеально подходят для простых веб-страниц, не требующих повторно используемых стилей.
  • Настройки, зависящие от носителя: определяйте стили, зависящие от печати, или адаптивные стили непосредственно в HTML-документе.
  • Тестирование и отладка: временное применение стилей для устранения неполадок во время разработки.

Тег <style> — это гибкое и быстрое решение для стилизации элементов в небольших проектах или особых сценариях.