Способы подключения CSS к HTML

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

Итак, начнем с самого распространённого:

<link rel="stylesheet" href="адрес_css_файла" />

Первые два атрибута изменяться не будут.

Атрибут «media»
В зависимости от устройства, через которое будет просмотрена HTML-страница, можно подключать различные CSS.

<link rel="stylesheet" href="адрес_css_файла" media="all" />
<link rel="stylesheet" href="адрес_css_файла" media="screen" />
<link rel="stylesheet" href="адрес_css_файла" media="projection" />
<link rel="stylesheet" href="адрес_css_файла" media="handheld" />
<link rel="stylesheet" href="адрес_css_файла" media="print" />

all — ну понятно, для всех устройств,
screen — мониторы,
projection — проекторы,
handheld — карманные устройства,
print — принтеры;

Также возможно подключение CSS-стилей в теле самого HTML-документа. Тут есть два способа:

<style>
   body{margin:0;padding:0;background:#f4f4f4;}
</style>

…и второй способ, через html-атрибут:

<div style="width:100px;height:100px;background:#f4f4f4;"></div>

Не рекомендую увлекаться этими вариантами, однако они тоже могут оказаться весьма полезными.

Импорт @import
Сильно влияет на производительность (скорость загрузки) веб-страницы, поэтому я даже рассматривать его не стану.

Миша Рудрастых Разработчик WordPress WooCommerce

Миша Рудрастых

Впервые познакомился с WordPress в 2009 году, и после двух лет мучений с Joomla и самописными движками это был просто бальзам на душу. С 2014 года меня можно встретить на WordCamp — официальной конфе по WP в Москве, иногда там выступаю. Также в настоящее время веду курсы по WordPress в Epic Skills в Питере.

Смотрите также