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

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

Комментарии 2

  • Daria11 июля 2014 в 22:07 #

    Здравствуйте, Миша! Я хотела спросить по поводу подключения таблиц стилей внутри документа. Вот рассматриваю я, например, файл functions.php стандартной темы Twenty Eleven и вижу, что по крайней мере пару раз встречается в его теле style type="text/css". Зачем это сделано? Ведь неспроста разработчики не поместили эти стили в ту таблицу, что link rel="stylesheet" ?

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

    • Миша12 июля 2014 в 06:07 #

      Добрый день!

      Ну, так можно задавать стили через PHP. Т.е пользователь настраивает цвета в админке, а потом они задействуются в стилях. Через внешнюю таблицу стилей такой сделать не удастся.

      Второе, там могут стоять условия в PHP, if, else. Т.е если какое-либо условие выполняется, добавляем какой-то CSS-код, если не выполняется, то другой CSS-код.

      Часть стилей админ-панели WordPress тоже выводится в теле документа.

Оставить комментарий / вопрос

phpjsHTMLCSSSQLПросто код
  Комментарии закрыты.