Каскадные таблицы стилей

CSS

Cascading Style Sheets

каскадные таблицы стилей

язык, предназначенный для описания внешнего вида веб-страниц

Принцип работы CSS

CSS-файл содержит набор правил, которые описывают, как определенные элементы HTML должны отображаться в браузере 


p {
  color: blue;
  font-size: 16px;
}

История развития CSS

CSS1 (1996)

Первая спецификация CSS, включавшая базовые стили


h1 {
  color: blue;
  font-size: 24px;
}
базовая стилизация текста, цвета, отступов, шрифтов

История развития CSS

CSS2 (1998)

Добавлены относительные единицы, медиа-типы, z-index, стили для таблиц 


@media screen and (max-width: 600px) {
  body {
    background-color: lightgray;
  }
}
запросы, позиционирование ( absolute , relative , fixed ), псевдоэлементы ( ::before , ::after )

История развития CSS

CSS2.1 (2004)

Уточнён стандарт, исправлены ошибки CSS2. Поддержка min-width и max-width 

div {
  max-width: 400px;
  min-width: 200px;
}
улучшенная совместимость браузеров

История развития CSS

CSS3 (2011)

Разделён на модули: селекторы, анимации, градиенты, flexbox, grid 


div {
  border-radius: 10px;
  box-shadow: 5px 5px 10px gray;
  transition: all 0.3s ease-in-out;
}
  • Тени (box-shadow, text-shadow)
  • Градиенты (linear-gradient)
  • Анимации (@keyframes, animation)
  • Гибкие макеты (flexbox, grid)

История развития CSS

CSS4 (развивающийся стандарт)

CSS4 как отдельная спецификация не существует, но есть улучшения 


:has(> img) {
  border: 2px solid red;
}
  • :has() – селектор родителя
  • :is() и :where() – упрощение селекторов
  • @layer – управление каскадом стилей
  • color-mix() – смешивание цветов

Способы подключения стилей

Внешний (External) CSS

Содержимое файла index.html

Стили находятся в отдельном файле с расширением .css, который подключается в <head> через тег <link> 


<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Внешний CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Заголовок</h1>
    <p>Текст абзаца</p>
</body>
</html>

Способы подключения стилей

Внешний (External) CSS

Содержание файла styles.css 


h1 {
    color: blue;
    font-size: 24px;
}

p {
    color: darkgray;
    font-size: 16px;
}

Способы подключения стилей

Внутренний (Embedded) CSS

Содержание файла styles.css 


<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Внутренний CSS</title>
    <style>
        h1 {
            color: red;
        }

        p {
            font-size: 18px;
            color: green;
        }
    </style>
</head>
<body>
    <h1>Пример заголовка</h1>
    <p>Пример текста</p>
</body>
</html>

Способы подключения стилей

Встроенный (Inline) CSS


<p style="color: blue; font-size: 20px;">Пример встроенного CSS</p>

Селекторы в CSS

Селектор

правило, определяющее, к каким элементам HTML будут применяться заданные стили

выбирает элементы по тегам, классам, идентификаторам, атрибутам, их положению в структуре документа или состоянию 

header {
    font-size: 18px;
}

#main-text {
    font-size: 22px;
}
  
.highlight {
    color: red;
}

Селекторы в CSS

Универсальный селектор ( * )

Применяет стили ко всем элементам на странице


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Селекторы в CSS

Селекторы тегов (элементов)

Применяются ко всем HTML-элементам определенного типа 


p {
    font-size: 18px;
    color: darkgray;
}
  
h1 {
    color: blue;
}

Селекторы в CSS

Селекторы классов ( . )

Выбирают все элементы с указанным классом

Содержимое HTML файла


<p class="highlight">Этот абзац будет выделен.</p>

Содержимое CSS файла


.highlight {
    background-color: yellow;
}

Селекторы в CSS

Селекторы идентификаторов ( # )

Применяются к единственному элементу с указанным id

Содержимое HTML файла


<p id="unique-text">Этот абзац имеет уникальный стиль.</p>

Содержимое CSS файла


#unique-text {
    color: red;
    font-weight: bold;
}

Селекторы в CSS

Групповой селектор ( A, B, C )

Позволяет одновременно применять стили к нескольким элементам 


h1, h2, p {
    color: blue;
}

Селекторы в CSS

Дочерний селектор ( A > B )

Выбирает только прямых потомков указанного элемента

Содержимое HTML файла


<div>
    <p>Этот абзац будет зеленым.</p>
    <span>
      <p>А этот — нет, так как он не прямой потомок `div`.</p>
    </span>
</div>

Содержимое CSS файла


div > p {
    color: green;
}

Селекторы в CSS

Соседние селекторы ( + и ~ )

A + B - выбирает только следующий сразу за A элемент B

A ~ B - выбирает все следующие элементы B после A

Содержимое HTML файла


<h1>Заголовок</h1>
<p>Этот параграф станет красным.</p>
<p>Этот — нет, так как не идет сразу после `h1`.</p>

Содержимое CSS файла


h1 + p {
    color: red;
}

h1 ~ p {
  color: blue;
}

Селекторы в CSS

Атрибутные селекторы

Выбирают элементы по их атрибутам

Содержимое HTML файла


<input type="text">
<input type="password">

Содержимое CSS файла


input[type="text"] {
  border: 2px solid blue;
}

Селекторы в CSS

Псевдоклассы

:hover , :nth-child , :focus

Позволяют изменять стили элементов в зависимости от их состояния

Содержимое HTML файла


<a href="#">Наведи на меня!</a>

Содержимое CSS файла


a:hover {
    color: red;
}

Селекторы в CSS

Псевдоэлементы

::before , ::after

Добавляют виртуальные элементы перед и после содержимого элемента

Содержимое HTML файла


<p>Важный текст</p>

Содержимое CSS файла


p::before {
    content: "⚡ ";
    color: orange;
}

Источники стилей

  • Стили браузера (User Agent Stylesheet) – встроенные стили браузера
  • Стили пользователя – если пользователь изменил настройки браузера
  • Внешние стили (.css файлы)
  • Встроенные стили (<style> в <head>)
  • Inline-стили (style="" в HTML)
Чем ближе стиль к элементу, тем выше его приоритет

Содержимое HTML файла


<p style="color: red;">Этот текст будет красным</p>

Содержимое CSS файла


p {
  color: blue;
}

Каскадность

стили применяются в определенном порядке, а при конфликте правил действует система приоритетов

Принципы каскадности:

  • Каскадность – механизм объединения стилей из разных источников.
  • Приоритетность (специфичность) – система, определяющая, какое правило будет применено

Приоритетность (специфичность)

Специфичность определяет, какой стиль применяется при конфликте CSS-правил

(A, B, C)

  • A – количество id селекторов ( #id )
  • B – количество классов ( .class ), атрибутов ( [attr] ), псевдоклассов ( :hover )
  • C – количество тегов ( div , p , h1 )

Приоритетность (специфичность)

Специфичность определяет, какой стиль применяется при конфликте CSS-правил

(A, B, C)

Подсчет специфичности

Метод Баллы
Теги ( div, p, h1 ) 1 балл
Классы (.class), атрибуты ([attr]), псевдоклассы (:hover) 10 баллов
Идентификаторы (#id) 100 баллов
Inline-стиль style="" 1000 баллов
!important максимальный приоритет

Алгоритм расчета специфичности

  1. Сравниваются значения слева направо (по A, затем B, затем C).
  2. Селектор с большим A выигрывает.
  3. Если A равны, сравнивается B.
  4. Если A и B равны, сравнивается C.
  5. При одинаковой специфичности побеждает стиль, объявленный последним в коде. 

div p { color: blue; }       /* (0,0,2) */
.big { color: green; }       /* (0,1,0) */
#title { color: red; }       /* (1,0,0) */
p.big { color: purple; }     /* (0,1,1) */
                        

                            <div> <p id="title" class="big"> Какого
                            цвета будет текст? </p> </div>
Селектор Расчет Специфичность
div p (0,0,1) + (0,0,1) = (0,0,2) (0,0,2)
.big (0,1,0) (0,1,0)
#title (1,0,0) (1,0,0)
p.big (0,0,1) + (0,1,0) = (0,1,1) (0,1,1) 

p { color: blue; }          /* (0,0,1) */
.big { color: green; }      /* (0,1,0) */
#title { color: red; }      /* (1,0,0) */
                        

<p id="title" class="big">Какого цвета будет этот текст?</p>