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

Опубликовано автором

Таблицы связанных стилей

Самый мощный и удобный способ определения стилей и правил для сайта. Стили хранятся в отдельном файле, который может быть использован для любых веб-страниц. Для подключения таблицы связанных стилей используется тег в заголовке страницы (пример 1.)
Путь к файлу со стилями может быть как относительным, так и абсолютным, как показано в данном примере.

Таблицы глобальных стилей

Стиль определяется в самом документе и обычно располагается в заголовке веб-страницы. По своей гибкости и возможностям этот способ использования стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа. Определение стиля задается тегом <style> (пример 2).

Внутренние стили

Внутренний стиль являются по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется атрибут style, а его значения указываются с помощью языка таблицы стилей (пример 3).

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Стили</title>
<!--Пример 1. Подключение таблицы связанных стилей-->
  <link rel="stylesheet" type="text/css" href="mysite.css">
  <link rel="stylesheet" type="text/css" href="http://www.mysite.ru/main.css">
<!--Пример 2. Использование таблицы глобальных стилей-->
  <style type="text/css">
    h1 {
      font-size: 120%; /* Размер шрифта */
      font-family: Verdana, Arial, Helvetica, sans-serif; /* Семейство шрифта */
      color: #336; /* Цвет текста */
    }
  </style>
</head>
 <body>
<!--Пример 3. Использование внутренних стилей-->
  <h1 style="font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #336">
    Hello, world!
  </h1>
</body>
</html>

Объединение файлов

Ускорить загрузку страницы можно объединив файлы стилей в один общий.

 

Самое простое, это перенести все необходимые стили с других файлов в один.

Или же можно через @import :

Во-первых, нам необходимо подключить таблицы связанных стилей (1-м способом) хотя бы один файл CSS к HTML.

Во-вторых, в уже подключенный файл вписываем следующий код:

@import url(«my-style.css»);

Данная строка подключает к нашему файлу дополнительный файл CSS.

И таких файлов можно подключить много 🙂

Просмотры: 104