Как применить стиль css в html

Способы добавления стилей на страницу

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

Связанные стили

При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <link> . Данный тег помещается в контейнер <head> , как показано в примере 3.1.

Пример 3.1. Подключение связанных стилей

HTML5 CSS 2.1 IE Cr Op Sa Fx

Значение атрибута тега <link> &#8212; rel остаётся неизменным независимо от кода, как приведено в данном примере. Значение href задаёт путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте.

Содержимое файла mysite.css подключаемого посредством тега <link> приведено в примере 3.2.

Пример 3.2. Файл со стилем

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

Глобальные стили

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

Пример 3.3. Использование глобального стиля

HTML5 CSS 2.1 IE Cr Op Sa Fx

В данном примере задан стиль тега <h1> , который затем можно повсеместно использовать на данной веб-странице (рис. 3.1).

Рис. 3.1

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

Внутренние стили

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

Пример 3.4. Использование внутреннего стиля

HTML5 CSS 2.1 IE Cr Op Sa Fx

В данном примере стиль тега <p> задаётся с помощью атрибута style , в котором через точку с запятой перечисляются стилевые свойства (рис. 3.2).

Рис. 3.2

Рис. 3.2. Использование внутренних стилей для изменения вида текста

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

В данном примере первый заголовок задаётся красным цветом размером 36 пикселов с помощью внутреннего стиля, а следующий &#8212; зелёным цветом через таблицу глобальных стилей (рис. 3.3).

Рис. 3.3

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

Импорт CSS

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

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

Пример 3.6. Импорт CSS

HTML5 CSS 2.1 IE Cr Op Sa Fx

В данном примере показано подключение файла header.css , который расположен в папке style.

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

Пример 3.7. Импорт в таблице связанных стилей

В данном примере показано содержимое файла mysite.css , который добавляется к нужным документам способом, показанным в примере 3.1, а именно с помощью тега <link> .

Вопросы для проверки

1. Сайт имеет более ста HTML-документов, имеющих одинаковое стилевое оформление. Какой способ подключения CSS подходит лучше всего?

  1. Связанные стили.
  2. Глобальные стили.
  3. Блочные стили.
  4. Внутренние стили.
  5. Экспорт стиля.

2. В данном примере, какой цвет будет у текста на веб-странице?

  1. Чёрный
  2. Красный
  3. Зелёный
  4. Синий
  5. Оливковый

3. Какой HTML-код применяется для подключения внешнего CSS-файла?

  1. <style>mystyle.css</style>
  2. <style>@mystyle.css</style>
  3. <link rel="stylesheet" href="mystyle.css">
  4. <link>@import url(mystyle.css)</link>
  5. <stylesheet>mystyle.css</stylesheet>

4. Какой атрибут используется для определения внутреннего стиля?

HTML Стили

CSS (Cascading Style Sheets), или каскадные таблицы стилей, используются для описания внешнего вида веб-документа, написанного языком разметки. CSS устанавливает стилевые правила, которые изменяют внешний вид элементов, размещенных на веб-страницах, выполняют тонкую настройку их деталей, таких как цвет, шрифт, размер, границы, фон и местоположение в документе.

Вы можете встроить CSS-код непосредственно в элемент разметки в виде значения атрибута style. Этот атрибут доступен для всех элементов HTML. С помощью CSS можно указать ряд свойств стиля для данного HTML-элемента. Каждое свойство имеет имя и значение, разделенные двоеточием (:). Каждое объявленное свойство отделяется точкой с запятой (;).

Вот как это выглядит для элемента </p>:

Пример: применение стилей к элементу <p>

Способы добавления CSS стилей

Стандарт CSS предлагает три варианта применения таблицы стилей к веб-странице:

  • Внешняя таблица стилей &#8212 определение правил таблицы стилей в отдельном файле .css, с последующим подключением этого файла в HTML-документ с помощью тега <link> .
  • Внутренняя таблица стилей &#8212 определение правил таблицы стилей с использованием тега <style> , который обычно располагается в разделе <head> HTML-документа .
  • Встроенный стиль &#8212 это способ вставки языка таблицы стилей прямо в начальный тег HTML-элемента.

Давайте познакомимся со всеми тремя способами на конкретных примерах.

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

CSS, как и HTML, не является языком программирования. Это язык каскадных таблиц стилей, то есть он позволяет выборочно применять нужные стили к элементам в HTML-документах. Например, чтобы выбрать все элементы <p> , т.е. параграфы на HTML-странице и окрасить их текст в красный цвет, вы должны написать на CSS следующее:

Давайте поместим эти три строки CSS в новый файл в любом текстовом редакторе (например Notepad++), а затем сохраним файл как style.css в папке styles.

Чтобы применять CSS к нашему HTML-документу, вставьте следующую строку в шапку, то есть между тегами <head> и </head> :

Пример: Внешняя таблица стилей

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

Данный стиль определяется в самом HTML-документе и обычно располагается в заголовке веб-страницы HEAD. По своей гибкости и возможностям этот способ подключения стилей уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, стили разполагаются прямо в теле HTML-документа. Вы можете включить правила CSS в НТМL-страницу, поместив их внутри элемента <style> , который обычно находится в элементе <head> , но фактически может быть помещен в любом месте документа. Этих тегов на странице может быть несколько.

Тег <style> позволяет записывать внутри себя код в формате CSS:

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

В данном примере мы с помощью CSS установили цвет фона для элемента <body> : background-color:palegreen, цвет и тип шрифта для заголовков <h1> : color: blue; font-family:verdana, а также размер шрифта, цвет и выравнивание текста по центру для параграфов <p> : font-size:20px; color:red; text-align:center.

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

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

Такие стили называют встроенными (inline), или внедренными. Правила, определенные непосредственно внутри открывающего тега элемента перекрывают правила, определенные во внешнем файле CSS, а также правила, определенные в элементе <style> .

В следующем примере к HTML-документу подключены все три рассмотренные стиля форматирования:

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

Александр Мальцев

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

Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.

Lorem ipsum dolor sit amet. Porro quisquam est , qui dolorem ipsum, quia voluptas.

Добавление стилей в HTML документ

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

Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.

Lorem ipsum dolor sit amet. Porro quisquam est , qui dolorem ipsum, quia voluptas.

Добавление стилей с помощью внешних файлов CSS

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

Данный способ подключения файлов стилей является предпочтительным, т.к. он обеспечивает загрузку файлов в том порядке, в каком они указаны в HTML-документе (в отличие от @import ). Также данный способ увеличивает скорость загрузки веб-страницы, т.к. файлы CSS загружаются одновременно. Реализация сайта с помощью внешних файлов CSS облегчает редактирование стилей и изменения дизайна сайта. В завершение, можно прокомментировать пожелание компании Google, которая рекомендует размещать все стили в одном внешнем файле, что приведёт к ещё более быстрой загрузки сайта.

Добавление стилей с помощью @import

Добавить файлы CSS можно также с помощью конструкции @import , которую необходимо поместить в самом верху блока стилей HTML-документа. Данный способ не рекомендуется использовать, т.к. он не гарантирует последовательную загрузку файлов CSS. Также его использование, можно приводить к ошибкам при работе веб-страницы (Например: загрузка скрипта может выполниться раньше, чем загрузка стилей, от которых он зависит).

Динамическое подключение файлов CSS

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

Примечание: при использовании данного способа не забудьте подключить библиотеку jQuery к вашей веб-странице:

Динамическое добавление стилей в HTML документ

Приоритет стилей и минимизация CSS

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

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

Минимизация CSS

Минимизирование (сокращение кода) файлов CSS предназначено для уменьшения их объема, что приводит к увеличению скорости загрузки сайта и его производительности. Для примера рассмотрим процесс уменьшения объема файла CSS с помощью оптимизатора CSSTidy.

Запускаем программу " cmd (Командная строка)", в которой набираем название программы csstidy.exe ,а в качестве параметров указываем исходный файл CSS и имя минимизированного файла. Минимизация файла samples.css

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *