Каскадные таблицы стилей (CSS)
CSS — это язык описания внешнего вида документа, написанного с использованием языка разметки.
Selectors: 1. Element (h1). 2. Class (.container). 3. ID (#header). 4. Attribute ([type='text']). The Box Model: Content, Padding, Border, Margin. Layout Techniques: Block/Inline, Positioning, Flexbox, Grid. Performance: Minification, Tree shaking, Atomic CSS.
graph LR
Center["Каскадные таблицы стилей (CSS)"]:::main
classDef main fill:#7c3aed,stroke:#8b5cf6,stroke-width:2px,color:white,font-weight:bold,rx:5,ry:5;
classDef pre fill:#0f172a,stroke:#3b82f6,color:#94a3b8,rx:5,ry:5;
classDef child fill:#0f172a,stroke:#10b981,color:#94a3b8,rx:5,ry:5;
classDef related fill:#0f172a,stroke:#8b5cf6,stroke-dasharray: 5 5,color:#94a3b8,rx:5,ry:5;
linkStyle default stroke:#4b5563,stroke-width:2px;
🧒 Простыми словами
Представь, что сайт — это раскраска. HTML — это контуры рисунка, а CSS — это набор фломастеров и карандашей, которыми ты выбираешь, какой цвет будет у каждой детали. Ты говоришь: 'все кружочки будут красными, а все квадраты — синими'.
🤓 Expert Deep Dive
Для опытных разработчиков CSS — это инструмент управления графическим процессором (GPU) через свойство will-change и 3D-трансформации. Современные спецификации CSS Houdini открывают доступ к внутренним механизмам рендеринга браузера через JS-API. Важно также понимать разницу между логическими свойствами (padding-inline) и классическими (padding-left), что критично для сайтов с поддержкой написания справа налево (RTL).