CSS: что такое и как подключить

CSS (Cascading Style Sheets) — язык описания внешнего вида HTML-документа: цвета, шрифты, размеры, отступы, раскладка.

Зачем нужно

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

Где используется

  • Оформление любой веб-страницы
  • Адаптивный дизайн через media queries
  • Печатные стили через @media print
  • Темизация через Custom Properties

Основной контент

Три способа подключения CSS

<!-- 1. Внешний файл (рекомендуется) -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>

<!-- 2. Тег <style> внутри HTML -->
<head>
  <style>
    body { margin: 0; }
    .title { color: #333; }
  </style>
</head>

<!-- 3. Атрибут style (инлайн-стили) -->
<p style="color: red; font-size: 18px;">Текст</p>

Внешний файл — лучшая практика

<!-- Базовое подключение -->
<link rel="stylesheet" href="css/main.css">

<!-- С media-query -->
<link rel="stylesheet" href="css/print.css" media="print">

<!-- Preload для критического CSS -->
<link rel="preload" href="css/critical.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'">

@import внутри CSS

/* Импорт другого CSS-файла */
@import url('reset.css');
@import url('variables.css');
@import url('components.css');

/* С условием */
@import url('mobile.css') (max-width: 767px);

@import блокирует загрузку и замедляет рендер; предпочтительнее несколько <link> тегов.

Структура CSS-правила

/* Правило = селектор + блок объявлений */
selector {
  property: value;
  another-property: value;
}

/* Примеры */
h1 {
  font-size: 2rem;
  color: #111;
  margin-bottom: 16px;
}

.button,
.link {
  cursor: pointer;
}

Каскад и порядок применения

/* Приоритет (от низшего к высшему):
   1. Browser defaults (user agent stylesheet)
   2. Внешние стили (<link>)
   3. <style> в <head>
   4. Инлайн style=""
   5. !important (нарушает нормальный каскад)
*/

p { color: gray; }        /* применяется */
p { color: black; }       /* перекрывает */
p { color: red !important; } /* побеждает всё */

Частые ошибки

  • @import в начале файла — @import должен быть первым в файле, иначе игнорируется
  • Инлайн-стили трудно переопределить — нужен !important или сброс; лучше не использовать инлайн-стили для компонентной логики
  • Несколько <link> с конфликтующими стилями — последний подключённый файл выигрывает (при равной специфичности)
  • Забыт <meta charset> и кодировка — кириллица в CSS-комментариях может ломаться без правильной кодировки файла (UTF-8)

Связанные темы

Ресурсы