ada/SecondBrain

Files

T

Dmitry 7a4f2ced46 vault backup: 2026-05-30 19:03:22

2026-05-30 19:03:22 +03:00

3.5 KiB

Raw Blame History

status: seed type: concept tags: [css, web-development, selectors, box-model] created: 2026-05-30 updated: 2026-05-30 title: CSS: Основы, селекторы и блочная модель source: ["11-css-основы_селекторы.pdf", "12-css-базовые_свойства.pdf", "12-css-блочная_модель.pdf", "12-css-фон.pdf"]

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

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

Подключение 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)

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

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

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

box-sizing

content-box (по умолчанию): width задает только ширину контента.
border-box: width включает в себя 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;.
transition: 0.3s; (плавные переходы).