Главная страница » CSS » 4. Запись стилей в теге style

4. Запись стилей в теге style

Тег <style> используется для определения внутренних стилей (inline styles) внутри HTML-документа. Внутренние стили определяются в секции <head> и применяются только к этой конкретной странице. Это удобный способ добавления CSS, когда требуется уникальное оформление для одной страницы.

Структура тега `<style>`

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

Пример структуры:

				
					<!DOCTYPE html>
<html>
<head>
    <title>Пример использования тега style</title>
    <style>
        /* CSS-код */
    </style>
</head>
<body>
    <!-- Содержимое страницы -->
</body>
</html>

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

Рассмотрим пример использования тега <style> для задания стилей для заголовков и параграфов на странице.

				
					<!DOCTYPE html>
<html>
<head>
    <title>Пример внутренних стилей</title>
    <style>
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: navy;
            text-align: center;
        }
        p {
            color: green;
            font-size: 16px;
            line-height: 1.5;
        }
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h1>Заголовок с внутренним стилем</h1>
    <p>Это пример параграфа с внутренним стилем.</p>
    <p class="highlight">Этот параграф выделен жёлтым цветом.</p>
</body>
</html>

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

Преимущества:

Легкость применения: Внутренние стили легко добавить и изменить.
Локальность: Стили применяются только к конкретной странице, что удобно для уникального оформления.

Недостатки:

Увеличение размера HTML-файла: Стили включены в HTML-документ, что может увеличить его размер.
Трудности в поддержке и повторном использовании: Стили нельзя легко применить к другим страницам.
Нарушение принципа разделения содержания и представления: Внутренние стили смешивают структуру HTML и оформление.

Специфичность и приоритеты

Внутренние стили имеют более высокий приоритет, чем внешние стили, но менее высокий приоритет, чем inline-стили.

Пример:

				
					<!DOCTYPE html>
<html>
<head>
    <title>Пример специфичности</title>
    <style>
        p {
            color: blue;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p style="color: red;">Этот текст будет красным, несмотря на другие стили.</p>
</body>
</html>

В этом примере параграф будет красным, потому что inline-стили имеют самый высокий приоритет.

Распространённые ошибки

Неправильный синтаксис: Пропущенные точки с запятой или фигурные скобки.
- Неверно: color: blue
- Верно: color: blue;
Конфликты стилей: Путаница в специфичности и приоритетах стилей.
- Inline-стили имеют высший приоритет, внутренние стили идут далее, и внешние стили имеют наименьший приоритет.
Отсутствие кроссбраузерной совместимости: Использование CSS-свойств, не поддерживаемых всеми браузерами.
- Решение: Проверка совместимости свойств и использование вендорных префиксов.

Заключение

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

Тестовое задание

Создайте HTML-документ с заголовком и несколькими параграфами.
Добавьте внутренние стили с помощью тега <style>:
- Установите фоновый цвет для тела страницы.
- Задайте стили для заголовка и параграфов.
- Создайте класс для выделения текста и примените его к одному из параграфов.

HTML-документ:

				
					<!DOCTYPE html>
<html>
<head>
    <title>Тестовое задание</title>
    <style>
        body {
            background-color: lightgrey;
            font-family: Verdana, sans-serif;
        }
        h1 {
            color: darkblue;
            text-align: center;
        }
        p {
            color: darkgreen;
            font-size: 18px;
            margin: 10px 0;
        }
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Заголовок</h1>
    <p>Это первый параграф.</p>
    <p class="highlight">Этот параграф выделен жёлтым цветом.</p>
    <p>Это третий параграф.</p>
</body>
</html>

После выполнения этого задания вы будете уверенно использовать внутренние стили и понимать их преимущества и недостатки.