Перейти к основному содержимому

CSS

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВНЕ ДЛЯ НОВИЧКОВВ РАЗРАБОТКЕ

Разработчику Аналитику Тестировщику
Архитектору Инженеру

Общее о стилях​

Что такое CSS?​

★ CSS (Cascading Style Sheets) – язык стилей, который определяет внешний вид HTML-документа, отвечающий за цвета, шрифты, расположение элементов, визуальные эффекты на веб-странице.

Какие возможности предоставляет CSS?

  • задавать внешний вид элементов: цвета, шрифты, размеры, формы, тени, прозрачность;
  • превращает «голый» текст в графически оформленный документ;
  • управляет тем, где и как элементы будут отображаться относительно друг друга;
  • поддерживает гибкие и адаптивные макеты, которые меняются под разные устройства и ориентации экрана;
  • возможность создавать плавные переходы между состояниями элементов;
  • добавлять движения, трансформации, эффекты при взаимодействии пользователя;
  • реакции на действия пользователя (наведение, клик, фокус) и изменение внешнего вида в ответ;
  • управление начертанием текста: размер, межстрочный интервал, гарнитура, вес, стиль;
  • возможность рисовать фигуры, градиенты, тени, рамки, маски и другие визуальные элементы без изображений;
  • скрывать элементы или убирать их из потока документа, не удаляя из разметки.

При работе с CSS можно встретить и LESS – препроцессор CSS, который расширяет возможности CSS, добавляя переменные, вложенные правила, функции и миксины, что упрощает написание и поддержку стилей. LESS-код компилируется в обычный CSS перед использованием в браузере.

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

Макет — это структурная организация визуальных компонентов на веб-странице. Он определяет, где располагаются заголовки, меню, основной контент, боковые панели, футеры и другие блоки. Современные макеты строятся с учётом адаптивности: они автоматически подстраиваются под размер экрана устройства (мобильный, планшет, десктоп). Макет реализуется с помощью комбинации HTML-разметки и CSS-правил, таких как Grid, Flexbox, медиа-запросы и логические свойства.

Цвет, размер, форма, тень, прозрачность​

Цвет — визуальное свойство, задающее оттенок текста, фона, границ или других частей элемента. В CSS цвет может указываться с помощью ключевых слов (например, red), шестнадцатеричных кодов (#ff0000), функций rgb(), hsl() и других форматов.

Размер — числовая характеристика, определяющая ширину, высоту или другие линейные параметры элемента. Размеры могут задаваться в пикселях (px), процентах (%), относительных единицах (em, rem), вьюпорт-единицах (vw, vh) и других метриках.

Форма — геометрический облик элемента, который может быть прямоугольным по умолчанию или изменённым с помощью свойств вроде border-radius, clip-path или mask.

Тень — визуальный эффект, имитирующий проекцию света и создающий ощущение глубины. Тени применяются к тексту (text-shadow) или блочным элементам (box-shadow).

Прозрачность — степень непрозрачности элемента или его частей, регулируемая через свойства opacity или альфа-канал в цветовых функциях (rgba, hsla). Прозрачность позволяет создавать полупрозрачные слои и наложения.

Отображение элементов относительно друг друга​

Положение и взаимное расположение элементов на странице определяется моделью компоновки (layout model) CSS. Основные подходы включают:

  • Потоковый документ — элементы размещаются последовательно сверху вниз, слева направо, в порядке следования в HTML.
  • Блочная модель — каждый элемент занимает прямоугольную область, состоящую из контента, внутренних отступов (padding), границ (border) и внешних отступов (margin).
  • Позиционирование — с помощью свойства position (static, relative, absolute, fixed, sticky) можно вывести элемент из обычного потока и разместить его в заданной точке.
  • Flexbox — одномерная модель компоновки для выравнивания и распределения пространства между элементами в строке или колонке.
  • Grid — двумерная система разметки, позволяющая точно управлять строками и столбцами сетки.

Эти механизмы дают контроль над тем, как элементы соседствуют, перекрываются или выстраиваются в макете.

Шрифты и текст​

Шрифт — графическое оформление текста, определяемое гарнитурой, начертанием, размером и другими параметрами. Шрифт влияет на читаемость и эстетику текстового контента. Это конкретный набор символов с единым дизайном. В CSS шрифт выбирается через свойство font-family.

Межстрочный интервал (line-height) — вертикальное расстояние между строками текста. Увеличение интервала улучшает читаемость, особенно в длинных абзацах.

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

Типографика — искусство и техника оформления текста для обеспечения чёткости, выразительности и удобства чтения. В веб-дизайне типографика включает выбор шрифтов, масштабирование размеров, выравнивание, контраст и ритм текста.

Размер шрифта — высота символов текста, задаваемая в единицах CSS (px, em, rem, % и др.). Влияет на восприятие и иерархию информации.

Гарнитура — семейство шрифтов с общим стилистическим решением (например, Arial, Times New Roman, Roboto). Может включать несколько вариантов: жирный, курсив, узкий и т.д.

Вес шрифта (font-weight) — толщина начертания символов. Обычные значения: normal (400), bold (700), а также числовые значения от 100 до 900.

Стиль шрифта (font-style) — форма начертания: normal, italic (курсив) или oblique (наклонный).

Фигуры, градиенты, тени, рамки, маски и другие визуальные элементы​

Фигуры — нестандартные формы элементов, создаваемые с помощью border-radius, clip-path или SVG-масок. Например, круг, ромб, многоугольник.

Градиенты — плавные переходы между двумя или более цветами. Поддерживаются линейные (linear-gradient), радиальные (radial-gradient) и конические (conic-gradient) градиенты. Используются как фон без подключения изображений.

Тени — эффекты, добавляющие глубину и объём. box-shadow применяется к блокам, text-shadow — к тексту. Можно задавать смещение, размытие, растяжение и цвет.

Рамки (border) — линии, окружающие элемент. Имеют толщину, стиль (сплошная, пунктирная, двойная и др.) и цвет. Рамки могут быть скруглены через border-radius.

Маски (mask) — инструмент для скрытия частей элемента по форме или изображению. Позволяет создавать сложные вырезы и прозрачные области.

Другие визуальные элементы включают:

  • Фоны (background) — сплошные цвета, изображения, градиенты;
  • Фильтры (filter) — эффекты вроде размытия, насыщенности, яркости;
  • Трансформации (transform) — поворот, масштабирование, сдвиг, наклон;
  • Анимации и переходы (transition, animation) — плавные изменения свойств во времени.

Как устроен CSS?​

К примеру, можно детально настроить оформление и сделать кнопку красивой, добавив цветов, теней и других особенностей:

image.png

CSS состоит из:

  • стилей – наборов свойств (например, color: red; )
  • селекторов – указателей, какие элементы стилизовать (h1, .class, #id);
  • правил – комбинаций селекторов и стилей.

CSS-правило состоит из двух частей: селектора и блока объявлений. Селектор указывает, к каким элементам применяется правило. Блок объявлений заключён в фигурные скобки и содержит одно или несколько объявлений. Каждое объявление состоит из свойства и его значения, разделённых двоеточием.

Пример:

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

Здесь h1 — селектор, color и font-size — свойства, navy и 24px — значения.

Представим, что HTML — это каркас дома, а CSS — всё то, что делает этот дом красивым, удобным и живым: краска, мебель, свет, оформление.

Давайте разберёмся, как с помощью CSS добраться до нужных частей этого дома, чтобы их изменить.

Когда вы пишете HTML, вы используете теги, например:

<h1>Заголовок</h1>
<p>Абзац текста</p>
<a href="#">Ссылка</a>

Каждый тег — это элемент: <h1>, <p>, <a> и т.д.

Тег — базовая единица разметки HTML, обозначающая определённый тип содержимого или структуру на странице.

Примеры: <p> для абзаца, <h1> для заголовка первого уровня, <div> для универсального контейнера.

Каждый тег становится HTML-элементом в DOM-дереве. Элемент может содержать текст, другие элементы или оставаться пустым, как <br>.

В CSS тег используется как селектор по типу, например p { color: black; }.

Таким образом, мы пишем:

имяHTMLэлемента {
	свойство: значение;
	свойство: значение
}

Элемент — это основной строительный блок страницы. В CSS вы можете выбирать элементы по их имени и задавать им стиль.

Пример:

p {
    color: blue;
}

— это значит: все абзацы (<p>) сделай синими.

Классы​

Иногда нужно стилизовать только некоторые элементы. Например, только особые ссылки должны быть красными.

Мы не хотим красить ВСЕ ссылки, только конкретную. Придётся точечно, в HTML-странице, пометить нужный элемент.

<элемент class="имя класса"></элемент>

Для этого в HTML есть атрибут class:

<a href="#" class="button">Нажми меня</a>
<a href="#">Обычная ссылка</a>

Теперь в CSS можно выбрать только те элементы, у которых есть класс button:

.button {
    background-color: red;
    padding: 10px;
    text-decoration: none;
}

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

Класс начинается с точки: .button.

Селекторы​

Что такое селектор?​

★ Стиль – конкретное свойство (например, font-size: 16px). CSS применяется к элементам HTML через селекторы.

Селекторы (англ. select – выбор), «выборщики», определяют к каким элементам DOM применять стили. Селектор — синтаксическая конструкция в CSS, которая указывает, к каким элементам применяется набор стилевых правил.

Селекторы могут быть простыми или составными:

  • по тегу — h2;
  • по классу — .highlight;
  • по идентификатору — #sidebar;
  • по атрибуту — [disabled] или [type="email"];
  • псевдоклассам — :hover, :focus, :nth-child(2n);
  • псевдоэлементам — ::before, ::first-line.

Селекторы задают контекст применения правил и позволяют адресовать элементы с высокой точностью.

Идентификатор — уникальное имя элемента, задаваемое в HTML через атрибут id. Каждый идентификатор должен встречаться на странице только один раз.

<элемент id="идентификатор"></элемент>

Пример: <div id="main-navigation">…</div>.

В CSS идентификатор выбирается с помощью символа решётки:

#идентификатор {
	свойство: значение
}

Пример: #main-navigation { background: white; }.

Идентификаторы применяются для точечной стилизации уникальных компонентов или для внутренних ссылок (<a href="#main-navigation">Перейти</a>).

Атрибут — дополнительная информация, присоединённая к HTML-тегу в виде пары «имя=значение».

Примеры: class="button", href="/home", src="image.jpg", id="search-box".

Атрибуты расширяют поведение и семантику элементов: они могут управлять внешним видом, взаимодействием, доступностью и техническими параметрами.

CSS поддерживает селекторы по атрибутам:

  • [target] — любой элемент с атрибутом target;
  • [type="submit"] — кнопки с type="submit";
  • [lang^="ru"] — элементы с языком, начинающимся на ru.

Комбинирование селекторов — способ создания более точных и контекстно-зависимых правил, где применяется одновременно несколько условий.

Основные типы комбинаций:

  • Последовательное указание — элемент должен соответствовать всем селекторам:
    div.button.active — <div class="button active">.

  • Дочерний селектор — div > p — применить стиль к <p>, если он непосредственный дочерний элемент <div>.

  • Потомок — nav a — применить стиль к любой ссылке внутри <nav>, на любом уровне вложенности.

  • Соседний (следующий) — h1 + p — применить стиль к первому <p>, идущему сразу после <h1>.

  • Общий сосед — h1 ~ p — применить стиль ко всем <p>, идущим после <h1> в одном родительском контейнере.

Комбинирование повышает точность адресации и позволяет избегать лишних классов.

Примеры:

  • по тегу – p {…};
  • по классу - .header {…};
  • по идентификатору - #main {…};
  • по атрибуту – [type= "text"] {…};
  • комбинированные –
    • div.button.active {…},
    • div > p (дочерний),
    • h1 + p (соседний).

То есть, исходные данные для селекторов – это:

  • теги (<p>, <div>, <h1>) – p { color: red; };
  • классы (атрибут class="button") - .button { … }’
  • идентификаторы (атрибут id="header") - #header { … };
  • атрибуты (значения атрибутов).

Соответственно, выбираются данные так - #id, .class, тег.

Пример: у нас есть HTML для стилизации:

<div class="box" id="main-box">Привет, мир!</div>

Подключаем CSS к этому элементу:

/* По тегу, напрямую */  
div { font-size: 16px; }  
/* По классу, через точку*/  
.box { background: yellow; }  

/* По ID, через # */  
#main-box { border: 1px solid black; }

Логика написания самого селектора и свойств такова:

  1. выбираем элемент (селектор);
  2. пишем свойства (параметры стиля).
  селектор {
    свойство: значение;
    свойство: значение;
}

Селектор по тегу​

Обращается к элементам по имени HTML-тега:

p { margin: 1em 0; }

Селектор по классу​

Выбирает все элементы с заданным значением атрибута class. Обозначается точкой:

.highlight { background: yellow; }

Селектор по идентификатору​

Выбирает единственный элемент с уникальным значением атрибута id. Обозначается решёткой:

#header { position: fixed; }

Универсальный селектор​

Обозначается звёздочкой * и выбирает все элементы на странице:

* { box-sizing: border-box; }

Селектор потомка​

Выбирает элементы, находящиеся внутри другого элемента на любом уровне вложенности:

nav a { text-decoration: none; }

Селектор по атрибуту​

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

input[type="email"] { border: 1px solid blue; }
[disabled] { opacity: 0.5; }

Комбинированные селекторы​

Позволяют точно адресовать элементы, комбинируя условия:

  • div.button.active — элемент <div> с классами button и active;
  • ul > li — прямые дочерние <li> внутри <ul>;
  • h1 + p — первый <p>, следующий сразу после <h1>;
  • h1 ~ p — все <p>, следующие за <h1> в одном родителе.

Перечисление селекторов​

Несколько селекторов можно объединить через запятую, чтобы применить одинаковые стили:

h1, h2, h3 { font-family: sans-serif; }
Освоение главы0%