Auto | arch-x1: 2026-06-05 13:24:09

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

@@ -1,5 +1,5 @@
 ---
-status: seed
+status: processing
 type: concept
 tags:
   - css
@@ -7,7 +7,7 @@ tags:
   - selectors
   - box-model
 created: 2026-05-30
-updated: 2026-05-31
+updated: 2026-06-05
 source:
   - "[[12-css-базовые_свойства.pdf]]"
   - "[[12-css-блочная_модель.pdf]]"
@@ -46,6 +46,23 @@ aliases:
 3. Классы, атрибуты, псевдоклассы (0, 0, 1, 0)
 4. Теги и псевдоэлементы (0, 0, 0, 1)
 
+Пример:
+
+```css
+body .content { color: red; }
+div p { color: blue; }
+```
+
+`body .content` сильнее, потому что содержит класс `.content`. Класс весит больше, чем селектор элемента.
+
+Короткое правило:
+
+- `#id` сильнее `.class`;
+- `.class` сильнее `div`;
+- если специфичность одинаковая, побеждает правило, которое написано ниже.
+
+Наследование — это когда дочерний элемент получает значение свойства от родителя, например `font-family` или `color`. Не все свойства наследуются: `margin`, `padding`, `border`, `width` обычно не наследуются.
+
 ---
 
 # Блочная модель (Box Model)
@@ -61,6 +78,17 @@ aliases:
 - `content-box` (по умолчанию): `width` задает только ширину контента.
 - `border-box`: `width` включает в себя `padding` и `border`.
 
+Если задано:
+
+```css
+width: 100px;
+padding: 10px;
+border: 5px solid;
+box-sizing: border-box;
+```
+
+Реальная ширина блока останется `100px`: внутрь этой ширины войдут контент, `padding` и `border`.
+
 # Свойство display
 - `block`: Занимает всю ширину, начинается с новой строки.
 - `inline`: Ширина по контенту, не позволяет задавать `width/height`.
@@ -88,4 +116,22 @@ aliases:
 - `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`.