HTML довольно ограничен, когда дело доходит до визуального оформления веб-страниц. CSS (каскадные таблицы стилей) был представлен в декабре 1996 года Консорциумом World Wide Web (W3C) для обеспечения лучшего способа оформления HTML-элементов.

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

Добавление стилей в HTML-элементы

CSS может быть прикреплен как отдельный файл или встроен в сам HTML-документ. Существует три способа включения CSS в HTML-документ:

  • Встроенные стили (Inline) — использование атрибута style в самом теге HTML.
  • Внедренные стили (Embed) — использование элемента <style> в разделе <head> документа.
  • Внешние стили (External) — с помощью элемента <link> указывающего на внешний файл CSS.

В этом материале мы рассмотрим все эти способы управления стилями.

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

Встроенные стили (Inline)

Встроенные стили используются для применения уникальных правил к элементу путем помещения CSS-правил непосредственно в начальный тег. Его можно прикрепить к элементу с помощью атрибута style.

Атрибут style включает ряд пар свойств и значений CSS. Каждая пара свойство: значение разделяется точкой с запятой (;), так же, как вы пишете во встроенную или внешнюю таблицу стилей, но одной строкой, т. е. после точки с запятой не должно быть разрыва строки.

В следующем примере показано, как установить color и font-size для текста:

<h1 style="color:red; font-size:30px;">Это заголовок</h1>
<p style="color:green; font-size:18px;">Это абзац.</p>
<div style="color:green; font-size:18px;">Это какой-то текст.</div>

Использование встроенных стилей считается плохой практикой. Поскольку правила стилей встроены непосредственно в тег html, это приводит к тому, что разметка смешивается с содержимым документа, что делает обновление или поддержку кода очень трудоемкой.

Чтобы узнать подробнее о различных CSS-свойствах, см. CSS Свойства.

Невозможно стилизовать псевдо-элементы и псевдо-классы с помощью встроенных стилей. Для этого используйте внешние таблицы стилей.

Внедренные стили (Embed)

Встроенные или внутренние таблицы стилей влияют только на документ, в котором они находятся.

Встроенные таблицы стилей определены в разделе <head> HTML-документа с помощью тега <style>. Вы можете определить любое количество элементов <style> в разделе <head>.

В следующем примере демонстрируется, как CSS-правила встраиваются в веб-страницу.

<head>
    <style>
        body { background-color: YellowGreen; }
		h1 { color: blue; }
        p { color: red; }
    </style>
</head>

Внешние стили (External)

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

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

Вы можете прикрепить внешние таблицы стилей двумя способами — с помощью ссылки (link) или импорта (import) .

Внешняя таблица стилей может быть связана с HTML-документом с помощью тега <link>.

Тег <link> должен находится внутри раздела <head>, как в этом примере:

<head>
    <link rel="stylesheet" href="css/style.css">
</head>

Прикрепление стилей с помощью @import

Правило @import — это еще один способ загрузки внешней таблицы стилей. Оператор @import указывает браузеру импортировать внешнюю таблицу стилей и использовать ее стили.

Вы можете использовать его двумя способами. Самый простой способ — использовать его внутри элемента <style> в разделе <head>. Обратите внимание, что другие CSS-правила все еще могут быть включены в элемент <style>.

<style>
    @import url("css/style.css");
    p {
        color: blue;
        font-size: 16px;
    }
</style>

Точно так же вы можете использовать правило @import для импорта одной таблицы стилей в другую.

@import url("css/layout.css");
@import url("css/color.css");
body {
    color: blue;
    font-size: 14px;
}

Все правила @import должны появляться в начале таблицы стилей. Любое правило, определенное в самой таблице стилей, переопределяет конфликтующие правила в импортированных таблицах стилей. Однако импортировать таблицу стилей в другую таблицу стилей не рекомендуется из-за проблем с производительностью.

Похожие посты

Руководство по тегам и элементам в HTML

HTML-элемент — это отдельный компонент документа HTML. Он представляет собой семантику или некоторое значение. Например, элемент <title> представляет заголовок документа. Большинство элементов HTML пишутся с начальным тегом (или открывающим) и конечным тегом (или закрывающим) с содержимым между ними. Элементы могут также содержать атрибуты, которые определяют его дополнительные свойства. Например, абзац, который представлен элементом <p>, будет…

Руководство по заголовкам в HTML

Заголовки помогают определить иерархию и структуру содержимого веб-страницы. В HTML есть шесть уровней заголовков, от <h1> до <h6>; чем выше уровень заголовка, тем больше его важность — поэтому тег <h1> определяет самый важный заголовок, а тег <h6> определяет наименее важный заголовок в документе. По умолчанию браузеры отображают заголовки более крупным и жирным шрифтом, чем обычный…

Руководство по мета-тегам в HTML

Теги <meta> обычно используются для предоставления структурированных метаданных, таких как ключевые слова (keywords), описание (description), имя автора (author name), кодировка символов (character encoding) и т.д. В теге <head> может быть размещено любое количество метатегов <meta>. Метаданные не будут отображаться на веб-странице, но будут обрабатываться поисковиками, браузерами и другими веб-сервисами. Теперь рассмотрим использование мета-тегов. Объявление кодировки…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.