Подключение стилей CSS

Урок №2

Основная задача каскадных таблиц стилей (CSS) — добавить документам HTML оформление без программирования или сложной логики. Это цвета, шрифты, расположение отдельных блоков на странице и т.д.
В таблице стилей мы прописываем стили (правила) представления элементов.

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

Основные три способа подключения таблиц стилей к веб-странице:

Внешние (связанные) таблицы стилей
Внутренние (глобальные) таблицы стилей
Встроенный стиль CSS

Подключение CSS к HTML

Создать css-файл так же легко, как и html.
Достаточно зайти в любой текстовой редактор, например Блокнот, и там создать файл с расширением css. Назовём его стандартным именем - style.css.

Далее при помощи специальных команд он подключается к необходимым документам. Такой вид называется внешней таблицей стилей.

Итак, всё по порядку:

1. Подключение CSS через внешний файл стилей тегом link

Наиболее правильный вариант определения общих стилей для сайта - это подключение внешнего файла CSS с помощью тега <link>.

Прописываем путь как раз в теге head. В нем указывается вся необходимая системная информация для отображения страницы. Подключается вот таким образом:

Пример кода:

<link href="URL_адрес_CSS_файла" rel="stylesheet" type="text/css">

Расшифровка:

В атрибуте href необходимо указать URL адрес файла, содержащего набор стилей CSS. Атрибуты rel="stylesheet" и type="text/css" указывают, что указанный файл является таблицей стиля в формате CSS.

Данный способ наиболее предпочтителен. Он позволяет разрабатывать стили сайта отдельно от HTML-документов. Затем стилизацию можно использовать в одном файле style.css на многих страницах.

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

2. Подключение CSS внутренними стилями

Второй способ — это подключение CSS прямо внутри html документа. Это уже будут внутренние стили. Описываются они в теге head но уже при помощи парного элемента style.

Этот метод подойдет когда нужно вставить (определить) стили для группы уникальных элементов страницы, то есть, набор стилей, которые используются только в пределах одной страницы и не нужны для корректной работы остальных страниц сайта.

Пример кода:

<style>
body {
  background-color: blue;
}
</style>

Внутри тега style стили прописываем только по своему родному синтаксису. То есть точно также, как их прописываем в отельном файле стилей. В самом файле css тег style прописывать не нужно.

Плюс в том, что можно сразу в этом же файле задать стили. Но, существенный и минус - задаваемые свойства будут присвоены только конкретному элементу. Таким образом, все преимущества удалённого подключения свойств утрачиваются.

Данный способ подключения css не очень удобен. Так как, он используется в основном для асинхронной загрузки стилей.

3. Встроенные таблицы стилей

Существует более простой способ вставки CSS. Если Вы задумали создать отдельный файл CSS, а использовать нужно только пару свойств, то подойдёт этот вариант.

При этом способе таблица стилей встраивается в заголовок html-страницы. Для этого в HTML существуют теги <style></style>, с параметром type, который указывает, что подключается именно таблица стилей CSS

Пример кода:

<html>
  <head>
  <title>Подключение таблиц CSS к HTML</title>

    <style type="text/css">
      h1{
      color:red
      }
      </style>

  </head>
  <body>>
   <h1>Заголовок будет красного цвета</h1>
    <h1>Заголовок будет красного цвета</h1>
    <h1>Заголовок будет красного цвета</h1>
 < /body>
</html>

Из примера видно, что стили заданы перед закрывающим тегом head внутри открывающего и закрывающего тегов style. Тег style можно прописывать и в body, но если Вы хотите, чтобы Ваш код выглядел структурировано, то лучше писать стили в одном месте.

Недостаток встроенной таблицы стилей тоже очевиден - такие записи надо будет делать для каждой страницы отдельно.

Мы рассмотрели способы подключение стилей CSS. Следующий урок будет посвящён синтаксису и принципу работы CSS

Читайте также:

Создано: 03.05.2020.| Обновлено: 15.12.2022.