Как добавить CSS в HTML

от

Добавление CSS в HTML может сбивать с толку, потому что есть много способов сделать это.

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

Сегодня мы рассмотрим плюсы и минусы каждого метода CSS, посмотрим, как они работают, и узнаем, когда использовать каждый из них.

Мы также рассмотрим некоторые распространенные вопросы, возникающие у разработчиков при вставке CSS в HTML-документы:

Давайте начнем.

Это наиболее распространенный метод прикрепления правил CSS к HTML-документам.

С помощью этого метода все ваши правила оформления содержатся в одном текстовом файле, который сохраняется с расширением .css. Этот файл сохраняется на вашем сервере, и вы ссылаетесь на него непосредственно из каждого HTML-файла. Мы используем link тег, который представляет собой простую строку HTML, которую вы помещаете в head раздел вашего HTML-документа, он выглядит следующим образом:

<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />

rel Атрибут имеет значение stylesheet, чтобы сообщить браузеру, что связанный файл представляет собой каскадную таблицу стилей (CSS).

Если вы используете HTML5, type атрибут не требуется, вы можете удалить его и сэкономить несколько байт на странице.

href Атрибут — это место, где вы указываете путь к вашему CSS-файлу.

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

Если файл сохранен в папке, вы можете указать путь к папке относительно HTML-файла следующим образом:

 

<link href="foldername/mystyles.css" ... >

Вы также можете указать путь относительно корня вашего домена, добавив к нему косую черту, например, так:

<link href="/foldername/mystyles.css" ... >

Абсолютные URL-адреса также работают:

<link href="https://www.yourdomain.com/foldername/mystyles.css" ... >

media Атрибут в теге link указывает, когда должны применяться правила CSS. Вот наиболее распространенные значения:

  • screen предназначен для использования на экране компьютера.
  • projection для проектируемых презентаций.
  • handheld для портативных устройств (обычно с маленькими экранами).
  • print для оформления печатных веб-страниц.
  • all (значение по умолчанию) Это то, что выбирает большинство людей. Вы можете полностью отказаться от атрибута media, если хотите, чтобы ваши стили применялись ко всем типам мультимедиа.

Преимущества ссылки на отдельный файл CSS

  • Изменения в вашем CSS отражаются на всех страницах: вам нужно только один раз внести изменения в CSS в вашем отдельном файле CSS, и все страницы веб-сайта обновятся.
  • Изменить тему вашего веб-сайта несложно: вы можете заменить свой CSS-файл, чтобы полностью изменить внешний вид вашего веб-сайта. Ознакомьтесь с CSS Zen Garden, чтобы увидеть лучший пример этого. 
  • Скорость сайта увеличивается при многократных запросах страниц: когда пользователь впервые посещает ваш веб-сайт, его браузер загружает HTML текущей страницы плюс связанный CSS-файл. Когда пользователь переходит на другую страницу, его браузеру нужно только загрузить HTML новой страницы, файл CSS кэшируется, поэтому его не нужно загружать снова. Это может иметь большое значение, особенно если у вас большой CSS-файл.

Недостатки

  • Для каждого связанного CSS-файла требуется дополнительный HTTP-запрос: избыточные HTTP-запросы могут задержать рендеринг вашей страницы. Вскоре мы рассмотрим решение этой проблемы.

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

2. Встроить CSS с тегом Style

Вы можете встраивать правила CSS непосредственно в HTML-документы, используя style тег. Вот как это выглядит:

<style type="text/css" media="screen">
    /* Add style rules here */
</style>

Подобно тегу link, type атрибут можно опустить для HTML5, а media значение определяет, когда применяются ваши стили (оставьте его отключенным по умолчанию для всех устройств).

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

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

Преимущества встроенных тегов стилей

  • Более быстрое время загрузки: Поскольку CSS является частью HTML-документа, вся страница существует как один файл. Никаких дополнительных HTTP-запросов не требуется. Я использую этот метод в своих демонстрационных макетах responsive columns, поэтому, когда люди просматривают исходный код страницы, они могут видеть HTML и CSS-код вместе.
  • Отлично работает с динамическими стилями: Если вы используете базу данных для создания содержимого страницы, вы также можете одновременно создавать динамические стили. Blogger делает это путем динамической вставки цветов заголовков и других элементов в правила CSS, встроенные в страницу. Это позволяет пользователям изменять эти цвета со страницы администратора, фактически не редактируя CSS в шаблонах своих блогов. 

Недостатки

  • Встроенные стили необходимо загружать при каждом запросе страницы: эти стили не могут быть кэшированы браузером и повторно использованы для другой страницы. Из-за этого рекомендуется встраивать минимальное количество CSS, насколько это возможно.

3. Как добавить встроенные стили к элементам HTML с атрибутом Style

Правила стиля могут быть добавлены непосредственно к любому элементу HTML. Для этого просто добавьте атрибут стиля к элементу, затем введите свои правила в виде одной строки текста (строки символов) для значения.

Вот пример заголовка со встроенными стилями:

<h2 style="color:red; background:black;">
    This is a red heading with a black background
</h2>

Преимущества встроенных стилей

  • Встроенные стили переопределяют внешние стили: Это связано с тем, что встроенные стили обладают более высокой специфичностью, чем внешний CSS.
  • Более быстрые страницы: как и во встроенном CSS, никаких дополнительных HTTP-запросов не требуется.
  • Вы можете изменять стили, не редактируя основной файл CSS: Иногда вам может потребоваться изменить правило стиля, но у вас нет доступа к основной таблице стилей веб-сайта, с помощью этого метода вы можете добавлять правила непосредственно к каждому элементу. 
  • Отлично подходит для динамических стилей: например, вы можете добавить URL-адрес фонового изображения в качестве встроенного стиля, если он отличается для каждого элемента.
  • Полезно для электронных писем в формате HTML: EDMS (электронный директ-маркетинг) может быть сложно настроить во всех почтовых клиентах, часто лучший способ — использовать встроенные стили везде.

Недостатки

  • Избыток стилей может раздуть вашу страницу: если вы снова и снова указываете одни и те же стили, вес вашей страницы будет расти.
  • Обслуживание может быть сложным: изменения стиля в масштабах всего сайта необходимо будет вносить на каждой странице, это может быть утомительно.