CSS для новичков: важные свойства и как применять их в Bricks Builder
Понимание базовых CSS-свойств — ключ к созданию аккуратных и адаптивных макетов. Особенно если используется Bricks Builder, где большинство стилей задается через визуальный интерфейс, но базовые принципы CSS остаются неизменными.
Таблица CSS-свойств с переводом
Ниже — список наиболее часто используемых CSS-свойств с переводом и кратким пояснением:
Английский термин | Русский перевод | Описание |
|---|---|---|
width | ширина | Ширина элемента. |
height | высота | Высота элемента. |
margin | отступ (внешний) | Внешний отступ вокруг элемента. |
padding | внутренний отступ | Отступ внутри элемента между содержимым и границей. |
border | граница | Обрамление элемента. |
gap | промежуток | Расстояние между элементами в flex или grid. |
display | отображение | Тип поведения элемента — блок, строчный и т.п. |
flex | флекс | Гибкая модель размещения дочерних элементов. |
grid | сетка | Сеточная модель размещения контента. |
position | позиция | Способ позиционирования — static, relative, absolute и т.д. |
top / right / bottom / left | верх / право / низ / лево | Отступы от краев контейнера при позиционировании. |
color | цвет | Цвет текста. |
background-color | цвет фона | Фоновый цвет элемента. |
font-size | размер шрифта | Размер текста. |
font-family | семейство шрифта | Тип шрифта, используемый для текста. |
text-align | выравнивание текста | Выравнивание — влево, вправо, по центру. |
line-height | высота строки | Вертикальное расстояние между строками текста. |
overflow / overflow-x / overflow-y | переполнение | Управление контентом, выходящим за границы. |
z-index | индекс слоя | Определяет порядок наложения элементов. |
opacity | непрозрачность | Прозрачность элемента от 0 до 1. |
visibility | видимость | Скрытие или отображение элемента. |
transition | переход | Плавное изменение стилей. |
transform | преобразование | Сдвиги, вращения, масштабирование и др. |
box-shadow | тень блока | Тень вокруг блока. |
text-shadow | тень текста | Тень у текста. |
border-radius | радиус границы | Закругление углов. |
float | обтекание | Обтекание другими элементами. |
clear | очистка | Отмена обтекания. |
list-style | стиль списка | Маркеры и нумерация списков. |
cursor | указатель | Вид курсора при наведении. |
animation | анимация | Изменение стилей с течением времени. |
keyframes | ключевые кадры | Этапы анимации. |
Как применять эти свойства в Bricks Builder
Bricks Builder с версии 1.5 предлагает четыре ключевых элемента для верстки:
- Section — основной контейнер для логических разделов страницы.
- Container — центрированный блок шириной 1100px, обычно используется для контента.
- Block — гибкий контейнер со 100%-ной шириной, часто используется внутри контейнеров или флексов.
- Div — обычный div без преднастроек, подходит для точной настройки.
Пример структуры макета в Bricks:
<Section> <Container> <Block> <Div>Контент</Div> </Block> </Container> </Section> В панели настроек любого элемента можно задать:
- Размер:
width,height - Отступы:
margin,padding - Цвета и фон:
color,background-color - Тени и границы:
box-shadow,border,border-radius - Анимации:
transition,transform,animation
📌 Заключение
Даже если стили задаются через визуальный интерфейс, знание CSS-свойств повышает точность и гибкость настройки дизайна. Этот список — полезная база для освоения Bricks Builder и других редакторов на WordPress.