Руководство по CSS-стилям в HTML

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

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

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

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

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

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

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

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

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

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

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

Это заголовок
 
Это абзац.
 
Это какой-то текст.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@import url("css/layout.css"); @import url("css/color.css"); body

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

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

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

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

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

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

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

HTML-элемент — это отдельный компонент документа HTML. Он представляет собой семантику или некоторое значение. Например, элемент

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

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

до ; чем выше уровень заголовка, тем больше его важность — поэтому тег

определяет самый важный заголовок, а тег определяет наименее важный заголовок в документе. По умолчанию браузеры отображают заголовки более крупным и жирным шрифтом, чем обычный…

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

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

Разработка сайтов для бизнеса

Если у вас есть вопрос, на который вы не знаете ответ — напишите нам, мы поможем разобраться. Мы всегда рады интересным знакомствам и новым проектам.

Источник

Добавление стилей на веб-страницу

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

Внешняя таблица стилей

Стили располагаются в отдельном файле с расширением css, для связывания HTML-документа с CSS-файлом применяется элемент . Он располагается внутри , как показано в примере 1.

Пример 1. Подключение внешних стилей

Значение атрибута rel у всегда будет stylesheet и остаётся неизменным. В качестве значения href указывается путь к CSS-файлу; путь может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте. В примере выше мы подключаем кириллический шрифт Lobster с сайта Google Fonts.

Содержимое файла style.css показано в примере 2.

Пример 2. Содержимое файла style.css

Как видно из данного примера, файл со стилем является обычным текстовым файлом и содержит только синтаксис CSS. В свою очередь и HTML-документ содержит только указатель на файл со стилем, таким способом в полной мере реализуется принцип разделения кода и оформления сайта. Поэтому использование внешней таблицы стилей — наиболее универсальный и удобный метод добавления стиля на сайт. Это позволяет независимо редактировать файлы HTML и CSS.

Внутренняя таблица стилей

Стили пишутся в самом HTML-документе внутри элемента , который в свою очередь располагается внутри . По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но часто применяется в ситуациях, когда речь идёт об одной веб-странице (пример 3).

h1

Заголовок

Текст

В данном примере задан стиль элемента , который затем можно повсеместно использовать на данной веб-странице (рис. 1). Обратите внимание, что мы можем спокойно комбинировать со .

Рис. 1. Вид заголовка, оформленного с помощью стилей

Встроенный стиль

Встроенный стиль является по существу расширением для одиночного элемента, используемого на текущей веб-странице. Для определения стиля элемента к нему добавляется атрибут style , а значением атрибута выступает набор стилевых правил (пример 4).

Пример 4. Использование атрибута style

В данном примере стиль элемента

меняется с помощью атрибута style , в котором через точку с запятой перечисляются стилевые свойства (рис. 2).

Рис. 2. Использование встроенного стиля для изменения вида текста

Встроенные стили не рекомендуется применять на сайте, поскольку это усложняет редактирование стилей и нарушает принцип разделения кода и оформления.

Все описанные методы добавления CSS могут быть задействованы как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым имеет приоритет встроенный стиль, затем внутренняя таблица стилей и в последнюю очередь внешняя таблица стилей. В примере 5 применяется сразу два метода добавления стиля в документ.

Пример 5. Сочетание разных методов

h1

Заголовок 1

Заголовок 2

В данном примере для первого заголовка задан красный цвет и размер 36 пикселей с помощью атрибута style , для второго заголовка — зелёный цвет через элемент (рис. 3).

Рис. 3. Результат применения стилей

Импорт CSS

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

@import url("имя файла"); @import "имя файла";

После ключевого слова @import указывается путь к стилевому файлу одним из двух приведённых способов — с помощью url или без него. В примере 6 показано, как можно импортировать стиль из внешнего файла.

@import url(‘https://fonts.googleapis.com/css?family=Lobster&subset=cyrillic’); h1

Заголовок 1

Заголовок 2

В данном примере показан импорт стилевого файла с сайта Google Fonts для подключения кириллического шрифта Lobster.

Аналогично происходит импорт и в CSS-файле, который затем подключается к документу через элемент (пример 7).

Пример 7. Импорт в файле style.css

@import url('https://fonts.googleapis.com/css?family=Lobster&subset=cyrillic'); h1

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

Источник