ada/SecondBrain

Files

T

ada a473fd83c3 Обновить 90 Library/Programming/Web/Основы, селекторы и блочная модель.md

2026-06-03 15:12:46 +00:00

3.5 KiB

Raw Blame History

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

status

type

tags

created

updated

source

aliases

seed

concept

css

web-development

selectors

box-model

2026-05-30

2026-05-31

11-css-основы_селекторы.pdf

12-css-базовые_свойства.pdf

12-css-блочная_модель.pdf

12-css-фон.pdf

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

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; (плавные переходы).