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

На этом уроке мы рассмотрим различные способы добавление стилей CSS на веб-страницу.

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

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

<p style="color: blue; font-size: 20px;">Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.</p>
<p>Lorem ipsum dolor sit amet. <span style="background: yellow;">Porro quisquam est</span>, qui dolorem ipsum, quia voluptas.</p>

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

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

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

<script>
    $(document).ready(function(){
  $("head").append($("<style type='text/css'>.blue-20 {color: blue; font-size: 20px; } .bg-yellow { background: yellow; }"));
    });
</script>

<head>
...
<!-- Добавление стилей в HTML документ с помощью тега style -->
<style type="text/css">
<!-- Код CSS -->
.blue-20 {
color: blue;
font-size: 20px;
}
.bg-yellow {
background: yellow;
}
</style>
...
</head>
<body>
...
<p class="blue-20">Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.</p>
<p>Lorem ipsum dolor sit amet. <span class="bg-yellow">Porro quisquam est</span>, qui dolorem ipsum, quia voluptas.</p>

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

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

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

<head>
...
<!-- Подключение внешнего файла CSS -->
<!-- Атрибут rel сообщает, что файл следует использовать по отношению к текущему документу как каскадную таблицу стилей. -->
<!-- Атрибут type сообщает, что подключаемый файл содержит CSS -->
<!-- Атрибут href хранит имя файла и путь к нему -->
<link rel="stylesheet" type="text/css" href="samples.css">
...
</head>
<body>
...
<p class="blue-20">Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.</p>
<p>Lorem ipsum dolor sit amet. <span class="bg-yellow">Porro quisquam est</span>, qui dolorem ipsum, quia voluptas.</p>

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

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

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

<head>
...
<!-- Подключение файлов CSS с помощью @import -->
<style>
@import url("путь к файлу в виде url");
@import "путь к файлу";
</style>
...
</head>
<body>
...
<p class="blue-20">Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.</p>
<p>Lorem ipsum dolor sit amet. <span class="bg-yellow">Porro quisquam est</span>, qui dolorem ipsum, quia voluptas.</p>

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

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

<!-- Атрибут media означает, что браузер будет использовать этот стиль только при отображении сайта на экране -->
<script>
  $(document).ready(function(){
    $("head").append($("<link rel='stylesheet' href='samples.css' type='text/css' media='screen' />"));
    });
</script>

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

<script src=".../js/jquery.min.js"></script>

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

<script>
    $(document).ready(function(){
  $("head").append($("<style type='text/css'>.blue-20 {color: blue; font-size: 20px; } .bg-yellow { background: yellow; }</style>"));
    });
</script>

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

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

--- Содержимое внешнего файла samples.css ---
.red {
color: red;
}

--- Содержимое HTML документа ---
<head>
<link rel="stylesheet" type="text/css" href="samples.css">
<style>
.blue {
color: blue;
}
</style>
...
</head>
<body>
...
<p class="blue red" style="color:yellow">Lorem ipsum dolor sit amet. Sunt, explicabo quia non recusandae eaque ipsa, quae ab illo inventore.<p>

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

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

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

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

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