KnowledgeDocs

CSS (Cascading Style Sheets) — это язык описания стилей, используемый для оформления веб-страниц. Знание базовых концепций CSS, таких как селекторы, специфичность и переменные, является основой для создания эффективных и управляемых стилей.

Selectors (Селекторы)

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

Основные типы селекторов

- **Селекторы по тегу**: Применяют стиль ко всем элементам указанного типа. ```css h1 { color: blue; } ``` - **Селекторы по классу**: Применяют стиль к элементам с указанным классом. ```css .highlight { background-color: yellow; } ``` - **Селекторы по идентификатору**: Применяют стиль к элементу с указанным ID (уникален на странице). ```css #main { font-size: 16px; } ``` - **Комбинаторы**: Определяют отношения между элементами (например, дочерние элементы, соседи). ```css ul > li { list-style: none; } ```

Советы по использованию селекторов

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

Specificity (Специфичность)

Специфичность определяет, какие CSS-правила будут применяться, если к элементу подходят несколько селекторов.

Как рассчитывается специфичность?

- **Селекторы тега**: 1 балл. - **Селекторы класса/атрибутов/псевдоклассов**: 10 баллов. - **Селекторы по ID**: 100 баллов. - **Inline-стили**: 1000 баллов.

Пример специфичности

```html

Пример текста

``` ```css /* Специфичность: 1 */ div { color: black; }

/* Специфичность: 10 */ .content { color: green; }

/* Специфичность: 100 */ #main { color: blue; }

text

В этом случае текст будет синего цвета, так как селектор `#main` имеет наибольшую специфичность.

<h3 id="советы-по-управлению-специфичностью">Советы по управлению специфичностью</h3>
- Избегайте использования слишком специфичных селекторов.
- Используйте каскадность и наследование для упрощения стилей.
- Применяйте переменные и миксины для управления сложными стилями.

<h2 id="variables-переменные">Variables (Переменные)</h2>

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

<h3 id="объявление-и-использование-переменных">Объявление и использование переменных</h3>
- **Объявление**: Переменные определяются с использованием префикса `--`.
- **Использование**: Для доступа к переменным используется функция `var()`.

```css
:root {
  --main-color: #3498db;
  --padding: 16px;
}

.button {
  background-color: var(--main-color);
  padding: var(--padding);
}

Преимущества переменных

- **Упрощение изменений**: Обновите значение переменной, чтобы изменить стили во всех местах, где она используется. - **Гибкость**: Использование в комбинации с медиа-запросами и темами.

Пример с темами

```css :root { --bg-color: white; --text-color: black; }

[data-theme="dark"] { --bg-color: black; --text-color: white; }

body { background-color: var(--bg-color); color: var(--text-color); }