rcl-radio.ru

Блочная модель (box model) — это фундамент того, как браузер рисует почти любой HTML‑элемент. По сути, это набор правил, по которым вычисляются итоговые габариты элемента и то, сколько места он реально занимает на странице. Если не понимать, как работает box model, можно легко столкнуться с «поехавшей» вёрсткой: блоки вылезают за границы, отступы оказываются не такими, как ты […]

Наследование — это когда дочерний элемент автоматически берёт стиль у родителя, если сам не задаёт своё значение. Не все свойства так умеют: одни передаются, другие — строго «только для себя». Какие свойства наследуются (и что это значит на практике) К наследуемым относятся в основном свойства, которые про «как выглядит текст» и «в каком направлении идёт […]

В CSS есть чёткие правила, по которым браузер решает, какое правило применить. Это и есть каскад плюс специфичность. Что такое каскад Каскад — это просто «порядок сверху вниз». Если у двух правил одинаковая сила (одинаковая специфичность), победит то, которое написано ниже в коде. Пример: css p { color: blue; } p { color: red; } […]

Селектор — это просто правило: «возьми вот эти элементы и примени к ним такие стили». Браузер читает селектор, ищет в HTML подходящие элементы и красит/ставит отступы/меняет размеры. Разберём три самых частых случая. Селектор по тегу: ко всем элементам этого типа Пишешь имя тега — и правило срабатывает для всех таких элементов на странице. css p { color: […]

Есть три способа «подружить» CSS с HTML. Разберём каждый на коротком примере и сразу скажем, где он уместен. 1. Inline‑стили: прямо в теге Пишешь стили прямо в HTML‑элементе через атрибут style. html <h1 style=»color: #2b5e8b; font-family: Arial, sans-serif;»>Заголовок</h1> <p style=»line-height: 1.6; color: #333;»>Текст.</p> <button style=»background-color: #4facf9; color: white; border: none; padding: 10px 20px; border-radius: 6px;»>Кнопка</button> […]

HTML — это список того, что есть на странице: заголовок, абзац, кнопка. CSS — это инструкции, как всё это показать: какого цвета, какого размера, где стоит. Представь, что HTML — это манекен, а CSS — одежда. Манекен один и тот же, но в футболке он выглядит как повседневный вариант, а в костюме — как деловой. […]

Если текст не помещается в высоту кнопки, то решение зависит от желаемого поведения вашего интерфейса. Рассмотрим возможные варианты действий: Возможные решения: 1 Увеличить высоту кнопки Самый простой вариант — увеличить вертикальное пространство, чтобы вместился весь текст. button { height: 50px; /* Устанавливаем желаемую высоту */ line-height: 50px; /* Центрирование текста по высоте */ } 2 […]