Подключение стилей CSS к HTML документу. Как подключить CSS файл

Рейтинг: 3 из 5, голосов 130

17 октября 2019 г.

Каскадные таблицы стилей CSS (Cascading Style Sheets) нужны для оформления страниц вашего сайта в соответствии с разработанным стилем, дизайном.

Таблицы стилей CSS являются неотъемлемой частью страниц современного сайта. Рассмотрим как подключить CSS к HTML странице сайта.

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

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

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

Чтобы подключить CSS файл, в head области страницы используйте следующую конструкцию:

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

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

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

Добавление CSS с помощью тега style

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

В любом месте областей <head> и <body> HTML документа используйте тег <style>, внутри которого поместите необходимые CSS правила.

<style type="text/css">
  /* CSS код */
</style>

CSS стили для конкретного тега атрибутом style

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

<p style="CSS_код">текст</p>

Стили, заданные через атрибут style называют inline-стилями. Такие стили имеют приоритет перед стилями, заданными через внешний файл или с помощью тега <style>, но есть исключения.

Inline-стили также обычно используются, когда вы редактируете контент через программы - визуальные редакторы WYSIWYG.

Стили CSS через JavaScript

Практически на каждом современном сайте используются скрипты, написанные на языке JavaScript.

В JavaScript, при использовании библиотеки jQuery, есть много различных функций для управления стилями HTML элементов. Например, функция .css() - задает CSS стиль для элемента, .hide() - добавление элементу CSS свойства display: none; (скрытие элемента) и др.

При использовании этих функций CSS свойства добавляются в style атрибут тега.

Пример подключения CSS к HTML странице описанными выше способами

Ниже приведен код простой HTML страницы с подключением CSS стилей различными способами.

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

<!DOCTYPE html>
<html>
  <head>
    <title>Подключение стилей CSS к странице HTML разными способами</title>
    <!-- Подключение файла стилей CSS. В этом файле прописаны общие стили страницы -->
    <!-- (параметры шрифта, общих блоков, элементов верстки и т.п.) -->
    <!-- Такой подход позволяет легко вносить изменения в дизайн сайта, так как -->
    <!-- при изменении свойства элемента в файле, изменится его стиль сразу на всех страницах сайта -->
   <link href="https://example.com/css/style.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <p>Таблица моделей некоторых смартфонов Samsung.</p>

    <!-- Добавление стилей CSS через тег style. Таблицы с классом model_table будут иметь уникальный стиль -->
    <!-- и будут использоваться только на текущей странице. В этом случае оправдано использование тега style -->
    <style type="text/css">
      .model_table {
        margin: 10px;      
        width: 100%;
      }
      .model_table tr:nth-child(even) {
        background-color: #efefef;
      }
      .model_table tr:hover {
        background-color: #cfcfcf;
      }
    </style>

    <!-- Стили через JavaScript. Скрипт используется, так как для назначения стиля таблице -->
    <!-- мы должны отследить действие пользователя (нажатие кнопки). -->
    <!-- Клик по кнопке вызовет скрипт, который установит таблице свойство display: none; -->
    <button id="model_table_hide_btn">Скрыть модели февраля</button>

    <table id="model_table_winter" class="model_table">
      <tr>
        <th colspan="2">Модели февраля</th>
      </tr>
      <tr>
        <td>Samsung Galaxy A10</td>
        <td>2019, февраль</td>
      </tr>
      <tr>
        <td>Samsung Galaxy A30</td>
        <td>2019, февраль</td>
      </tr>
      <tr>
        <td>Samsung Galaxy A50</td>
        <td>2019, февраль</td>
      </tr>
    </table>
    <table class="model_table"> 
      <tr>
        <th colspan="2">Модели марта</th>
      </tr>
      <tr>
        <td>Samsung Galaxy A20</td>
        <td>2019, март</td>
      </tr>
      <tr>
        <td>Samsung Galaxy A40</td>
        <td>2019, март</td>
      </tr>
    </table>

    <!-- Inline стили. Так как мы хотим изменить стиль для конкретного элемента контента страницы, -->
    <!-- добавляем стили через style атрибут тега -->
    <p style="text-align: right; font-size: 12px;">*В таблице указаны предварительные данные.</p>

    <!-- Скрипт клика по кнопке скрытия таблицы -->
    <script type="text/javascript">
      document.getElementById('model_table_hide_btn').addEventListener("click", function () {
        document.getElementById('model_table_winter').style.display = 'none';
      });
    </script>
  </body>
</html>

Результат приведенного выше кода:

Таблица моделей некоторых смартфонов Samsung.

Модели февраля
Samsung Galaxy A10	2019, февраль
Samsung Galaxy A30	2019, февраль
Samsung Galaxy A50	2019, февраль

Модели марта
Samsung Galaxy A20	2019, март
Samsung Galaxy A40	2019, март

*В таблице указаны предварительные данные.

by Lebedev