ada/SecondBrain

Fork 0

Files

T

Dmitry a1fe7024ac vault backup: 2026-06-08 08:44:11

2026-06-08 23:25:01 +03:00

5.5 KiB

Raw Blame History

status, type, tags, created, updated, source, aliases

status

type

Подключение CSS

Внешняя таблица: <link rel="stylesheet" href="style.css">.
Внутренние стили: Тег <style> в <head>.
Встроенные (inline) стили: Атрибут style у тега.

Селекторы

Универсальный: * — все элементы.
По тегу: h1, p.
По классу: .className.
По ID: #idName.
Потомки: div p (все p внутри div).
Дочерние: div > p (только прямые наследники).
Соседние: h1 + p (первый p после h1).
По атрибуту: a[href^="https://"].

Псевдоклассы и псевдоэлементы

:hover, :focus, :active.
:nth-child(odd/even/n).
::before, ::after (используются с content).

Каскадность и Специфичность

Если правила конфликтуют, побеждает то, у которого выше специфичность:

Inline стили (1, 0, 0, 0)
ID (0, 1, 0, 0)
Классы, атрибуты, псевдоклассы (0, 0, 1, 0)
Теги и псевдоэлементы (0, 0, 0, 1) !

body .content { color: red; }
div p { color: blue; }

body .content сильнее, потому что содержит класс .content. Класс весит больше, чем селектор элемента.

Короткое правило:

#id сильнее .class;
.class сильнее div;
если специфичность одинаковая, побеждает правило, которое написано ниже.

Наследование — это когда дочерний элемент получает значение свойства от родителя, например font-family или color. Не все свойства наследуются: margin, padding, border, width обычно не наследуются.

Блочная модель (Box Model)

Каждый элемент в CSS — это прямоугольный блок.

Content: Содержимое (текст, изображение).
Padding: Внутренние поля (между контентом и рамкой).
Border: Рамка.
Margin: Внешние отступы (между рамкой и соседями).

Box-sizing

content-box (по умолчанию): width задает только ширину контента.
border-box: width включает в себя padding и border.

Если задано:

width: 100px;
padding: 10px;
border: 5px solid;
box-sizing: border-box;

Реальная ширина блока останется 100px: внутрь этой ширины войдут контент, padding и border.

Свойство display

block: Занимает всю ширину, начинается с новой строки.
inline: Ширина по контенту, не позволяет задавать width/height.
inline-block: Строчный элемент, но с возможностью задавать размеры и отступы.
none: Убирает элемент из документа.

Базовые свойства оформления

Текст и шрифты

font-family, font-size, font-weight.
text-align, text-transform (uppercase, capitalize).
text-decoration (underline, none).
line-height, letter-spacing.

Фон (Background)

background-color.
background-image: url(...).
background-size: cover / contain.
background-repeat: no-repeat.
background-position: center.

Границы и тени

border: 1px solid black;.
border-radius: 5px; (скругление углов).
box-shadow: x y blur spread color;.
text-shadow: x y blur color; — тень текста.
transition: 0.3s; (плавные переходы).

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

CSS выбирает элементы селекторами и применяет к ним свойства. Если несколько правил спорят за одно свойство, решают каскад, специфичность и порядок.

Частые селекторы:

* — все элементы;
p — все <p>;
.card — элементы с классом card;
#main — элемент с id main;
article p — все p внутри article;
article > p — только прямые дочерние p;
h2 + p — первый соседний p сразу после h2;
input[required] — поля с атрибутом required.

Для текста часто нужны: font-family, font-size, font-weight, font-style, text-align, text-decoration, line-height, letter-spacing, text-shadow.

5.5 KiB Raw Blame History Unescape Escape

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