Способы подключения 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
Сильно влияет на производительность (скорость загрузки) веб-страницы, поэтому я даже рассматривать его не стану.

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