Программирование

Термины CSS для изменений страницы

Поиск терминов для заголовков, кнопок, отступов, состояний при наведении, адаптивности и других правок страницы.

63 результатов

Структура страницы

Заголовок

Header

Значение

Верхняя область страницы, обычно содержащая название сайта, навигацию, элементы управления темой, элементы управления языком и кнопку меню.

Что меняется

Изменение отступов, высоты, границы или положения заголовка изменяет высоту и ощущение "закрепленности" верхней области.

Важно

Более высокий заголовок может уменьшить видимую область содержимого, особенно на мобильных устройствах.

CSS

headerpaddingheightpositionborder-bottom

Пример запроса

Сделайте заголовок мобильной версии меньше, сохранив при этом высоту заголовка.

Структура страницы

Подвал.

Footer

Значение

Нижняя часть страницы, часто используемая для ссылок, юридического текста, контактной информации или небольшой навигации.

Что меняется

Изменения отступов и границ в подвале влияют на количество свободного пространства и расстояние от содержимого выше.

CSS

footerpaddingborder-topmargin-top

Пример запроса

Добавьте больше отступов сверху у футера, чтобы он не казался прикрепленным к контенту.

Структура страницы

Раздел.

Section

Значение

Большая область содержимого, которая группирует связанное содержимое, такое как заголовок, список инструментов, справочные карточки или блок статьи.

Что меняется

Отступы раздела изменяют вертикальный ритм страницы. Изменение фона создает ощущение раздельности раздела.

CSS

sectionpadding-blockborder-topbackground

Пример запроса

Уменьшить вертикальный отступ раздела "Инструменты" на мобильных устройствах.

Структура страницы

Контейнер

Container

Значение

Внутренний компонент, который предотвращает чрезмерное расширение содержимого страницы на больших экранах.

Что меняется

Увеличение максимальной ширины делает контент шире. Увеличение бокового отступа удерживает контент от краев экрана.

CSS

max-widthmargin-inlinepadding-inline

Пример запроса

Сделайте основной контейнер немного уже на рабочем столе.

Структура страницы

Карта

Card

Значение

Оформленный блок, представляющий один повторяющийся элемент, такой как инструмент, запись справочника или результат.

Что меняется

Отступы, граница, радиус и тень карты определяют, насколько плотным или заметным кажется каждый элемент.

CSS

borderborder-radiuspaddingbackgroundbox-shadow

Пример запроса

Сделайте карточки справки более компактными, уменьшив отступы.

Структура страницы

Панель

Panel

Значение

Оформленная рабочая область, обычно содержащая элементы управления, поля ввода, настройки или вывод.

Что меняется

Изменения в расположении и интервалах элементов панели влияют на удобство повторного использования инструментов.

CSS

borderbackgroundpaddingdisplay

Пример запроса

Выровняйте элементы управления в одну строку на настольных компьютерах и расположите их вертикально на мобильных устройствах.

Структура страницы

Боковая панель

Sidebar

Значение

Вертикальная область слева или справа от страницы, часто используемая для навигации или фильтров.

Что меняется

Ширина боковой панели и правила адаптивности определяют, будет ли она видна, скрыта или перемещена под основным контентом.

CSS

asidewidthpositiongrid-template-columns

Пример запроса

Переместите боковую панель фильтров ниже содержимого на мобильных устройствах.

Структура страницы

Герой

Hero

Значение

Первый крупный раздел страницы, который представляет собой основную цель или действие.

Что меняется

Отступы, размер заголовка и компоновка элемента "герой" влияют на первое впечатление и на то, сколько контента помещается в первом видимой области.

CSS

paddingbackgroundmin-heightgrid

Пример запроса

Уменьшить размер заголовка на мобильных устройствах, чтобы кнопки действий оставались видимыми.

Отступы и размер

Отступы

Padding

Значение

Пространство внутри элемента, между границей и содержимым.

Что меняется

Увеличение верхнего отступа добавляет больше пространства над контентом внутри элемента.

Важно

Больше "подкладки" обычно увеличивает видимый размер элемента.

CSS

paddingpadding-toppadding-rightpadding-bottompadding-left

Пример запроса

Слегка увеличьте верхний отступ заголовка.

Отступы и размер

Margin

Значение

Пространство вне элемента, между ним и соседними элементами.

Что меняется

Увеличение нижнего отступа отодвигает следующий элемент дальше вниз.

CSS

marginmargin-topmargin-rightmargin-bottommargin-left

Пример запроса

Добавьте больше отступов между секцией "Hero" и списком инструментов.

Отступы и размер

Промежуток

Gap

Значение

Пробел между элементами внутри макета flex или grid.

Что меняется

Увеличение промежутка между элементами разделяет их, не добавляя лишнего пространства вокруг всей группы.

CSS

gaprow-gapcolumn-gap

Пример запроса

Уменьшить расстояние между кнопкой темы, кнопкой языка и кнопкой меню.

Отступы и размер

Ширина

Width

Значение

Горизонтальный размер элемента.

Что меняется

Фиксированная ширина обеспечивает стабильность элемента. max-width позволяет ему уменьшаться на небольших экранах.

CSS

widthmin-widthmax-width

Пример запроса

Сделайте ширину панели меню равной длине самого длинного элемента.

Отступы и размер

Высота

Height

Значение

Вертикальный размер элемента.

Что меняется

Фиксированная высота может стабилизировать заголовок. Максимальная высота с возможностью переполнения может предотвратить чрезмерное увеличение размера выпадающих списков.

CSS

heightmin-heightmax-height

Пример запроса

Сохраняйте стабильную высоту заголовка, уменьшая размер заголовка.

Отступы и размер

Max width

Значение

Максимальная ширина, которую элемент может достигать.

Что меняется

Уменьшение максимальной ширины делает строки текста короче и панели уже на больших экранах.

CSS

max-widthwidth

Пример запроса

Установите максимальную ширину для выпадающего списка, чтобы он не занимал слишком много места на странице.

Отступы и размер

Сверху / Справа / Снизу / Слева

Top / Right / Bottom / Left

Значение

Смещения положения, используемые с расположенными элементами.

Что меняется

right: 0 - выравнивает плавающее окно по правому краю родительского элемента.

CSS

toprightbottomleftinset

Пример запроса

Выровняйте открывающуюся панель меню по правой стороне элементов управления заголовка.

Текст

Размер шрифта.

Font size

Значение

Размер текста.

Что меняется

Уменьшение размера шрифта помогает длинным меткам помещаться в ограниченном пространстве, например, в заголовках мобильных устройств.

CSS

font-sizetext-smtext-lg

Пример запроса

Сделайте название сайта в мобильной версии меньше, но сохраните его на одной строке.

Текст

Толщина шрифта.

Font weight

Значение

Насколько толстым или жирным выглядит текст.

Что меняется

Увеличение толщины шрифта делает метки более заметными, не изменяя их размер.

CSS

font-weightfont-boldfont-semibold

Пример запроса

Сделайте метки категорий немного более жирными.

Текст

Межстрочное расстояние

Line height

Значение

Вертикальное пространство, которое занимает каждая строка текста.

Что меняется

Увеличение межстрочного интервала облегчает чтение абзацев. Уменьшение его делает метки компактного UI более сжатыми.

CSS

line-heightleading

Пример запроса

Увеличьте межстрочный интервал в описании главного блока.

Текст

Межстрочный интервал

Letter spacing

Значение

Пробел между отдельными буквами.

Что меняется

Небольшое промежуточное пространство может помочь сделать верхние регистры более четкими. Слишком большое промежуточное пространство может сделать текст на корейском языке неудобным.

CSS

letter-spacingtracking

Пример запроса

Удалить отрицательное межстрочное расстояние от компактных кнопок.

Текст

Выравнивание текста

Text align

Значение

Горизонтальное выравнивание текста внутри его контейнера.

Что меняется

Текст меню, выровненный по правому краю, может создать ощущение, что плавающее меню прикреплено к правому краю.

CSS

text-align

Пример запроса

Выровняйте текст элемента меню по правому краю внутри панели меню.

Текст

Оборачивание / Без оборачивания

Wrap / No wrap

Значение

Можно ли переносить длинный текст на следующую строку или он должен оставаться на одной строке.

Что меняется

Без переноса (no-wrap) заголовок остается стабильным, в то время как перенос может отображать больше текста, но обычно увеличивает высоту.

CSS

white-spaceword-breakoverflow-wrap

Пример запроса

Оставляйте заголовок мобильной версии на одной строке и обрезайте переполнение.

Текст

Обрезка / Многоточие

Truncate / Ellipsis

Значение

Способ обрезки текста, выходящего за пределы одной строки, и отображения точек.

Что меняется

Обрезка предотвращает нарушение макета, когда метки длиннее, чем ожидалось.

CSS

overflowtext-overflowwhite-space

Пример запроса

Обрезайте заголовок сайта на очень маленьких экранах.

Цвет и фон

Цвет

Color

Значение

Цвет текста или значков.

Что меняется

Изменение цвета влияет на читаемость и визуальный приоритет.

CSS

color

Пример запроса

Сделайте текст выбранного языка видимым в темном режиме.

Цвет и фон

Фон

Background

Значение

Цвет или изображение, расположенное за содержимым элемента.

Что меняется

Изменения фона могут разделять панели, выделять активные состояния или улучшать контраст.

CSS

backgroundbackground-color

Пример запроса

Используйте более темный фон для выбранного элемента языка в темном режиме.

Цвет и фон

Прозрачность

Opacity

Значение

Насколько прозрачным является элемент.

Что меняется

Уменьшение прозрачности делает элементы менее заметными, но это может снизить читаемость.

CSS

opacityrgbacolor-mix

Пример запроса

Сделайте неактивные элементы управления менее яркими, но не делайте текст нечитаемым.

Цвет и фон

Градиент

Gradient

Значение

Плавный переход между двумя или более цветами.

Что меняется

Небольшие градиенты могут добавить глубину, но сильные градиенты могут сделать инструменты менее практичными.

CSS

linear-gradientradial-gradientbackground-image

Пример запроса

Сделайте фоновый рисунок заголовка ненавязчивым и избегайте сильных градиентов.

Цвет и фон

Цвет акцента

Accent color

Значение

Повторяющийся цвет выделения, используемый для меток, активных состояний или важных действий.

Что меняется

Изменение цвета акцента изменяет визуальную идентичность и акценты страницы.

CSS

colorbackgroundborder-coloraccent-color

Пример запроса

Используйте один и тот же зеленый акцент для меток категорий и активных элементов.

Цвет и фон

Контраст

Contrast

Значение

Разница между цветами переднего плана и фона.

Что меняется

Более высокий контраст улучшает читаемость, особенно в темном режиме и на мобильных устройствах.

CSS

colorbackground-color

Пример запроса

Увеличьте контраст элементов выпадающего списка в темном режиме.

Граница и форма

Граница

Border

Значение

Линия вокруг элемента.

Что меняется

Ширина и цвет границы определяют, насколько сильно рамка или кнопка отделена от фона.

CSS

borderborder-colorborder-widthborder-style

Пример запроса

Сделайте границу панели меню немного темнее в темном режиме.

Граница и форма

Радиус границы

Border radius

Значение

Насколько закруглены углы прямоугольника или кнопки.

Что меняется

Небольшой радиус кажется практичным и компактным. Большой радиус кажется более мягким и игривым.

CSS

border-radius

Пример запроса

Оставляйте радиус границы карточек равным 8 пикселям.

Граница и форма

Тень границы

Box shadow

Значение

Тень вокруг элемента, которая создает ощущение, что он находится выше страницы.

Что меняется

Более темные тени делают плавающие меню или модальные окна более сложными. Слишком много теней может казаться тяжелым.

CSS

box-shadow

Пример запроса

Добавить тонкую тень к плавающей панели меню.

Граница и форма

Контур.

Outline

Значение

Линия, отображаемая вокруг элемента, часто когда он находится в фокусе с помощью навигации с клавиатуры.

Что меняется

Четкий контур помогает пользователям клавиатуры знать, какой элемент управления активен.

CSS

outlineoutline-offset:focus-visible

Пример запроса

Обеспечьте видимую обводку фокуса на кнопках-иконках.

Граница и форма

Разделитель

Divider

Значение

Линия, используемая для разделения разделов или групп.

Что меняется

Разделитель может сделать границы категорий более четкими, не добавляя при этом много визуального веса.

CSS

border-topborder-bottomhr

Пример запроса

Добавьте тонкие разделители между категориями меню.

Макет и позиция

Отображение

Display

Значение

Базовый режим компоновки элемента.

Что меняется

display: none - скрывает элемент. flex и grid - располагают дочерние элементы.

CSS

displaydisplay: nonedisplay: flexdisplay: grid

Пример запроса

Скрывайте навигацию по рабочему столу на мобильных устройствах.

Макет и позиция

Flex.

Flex

Значение

Метод компоновки для организации элементов в строку или столбец.

Что меняется

flex-direction: column - располагает элементы вертикально. flex-wrap - позволяет элементам переходить на следующую строку.

CSS

display: flexflex-directionflex-wrapgap

Пример запроса

Размещайте элементы управления заголовка в строке flex.

Макет и позиция

Сетка

Grid

Значение

Метод компоновки для организации содержимого в строки и столбцы.

Что меняется

Изменение количества столбцов сетки определяет, сколько карточек отображается в строке.

CSS

display: gridgrid-template-columnsgrid-columngap

Пример запроса

Отображать четыре карточки инструментов в строке на широких настольных экранах.

Макет и позиция

Выровнять элементы

Align items

Значение

Как элементы располагаются по поперечной оси внутри flex или grid.

Что меняется

align-items: center - вертикально центрирует элементы управления в строке заголовка.

CSS

align-itemsplace-items

Пример запроса

Вертикальное выравнивание заголовка и кнопок.

Макет и позиция

Обоснуйте контент

Justify content

Значение

Как элементы распределяются по главной оси внутри flex или grid.

Что меняется

justify-content: space-between - отодвигает группы на противоположные стороны.

CSS

justify-contentjustify-itemsmargin-left: auto

Пример запроса

Оставляйте заголовок слева и элементы управления справа.

Макет и позиция

Положение

Position

Значение

Отношение элемента к странице или другому элементу.

Что меняется

position: absolute - позволяет выпадающему меню отображаться без сдвига макета страницы.

CSS

positionrelativeabsolutefixedsticky

Пример запроса

Сделайте панель меню абсолютной, чтобы она не сдвигала страницу вниз.

Макет и позиция

Z-индекс

Z-index

Значение

Порядок наложения позиционированных элементов.

Что меняется

Более высокий z-индекс может поместить выпадающие списки над содержимым страницы.

Важно

z-index работает предсказуемо только тогда, когда учитываются контексты позиционирования и наложения.

CSS

z-indexposition

Пример запроса

Переместите раскрывающийся список языка выше панели меню.

Макет и позиция

Переполнение.

Overflow

Значение

Что происходит, когда содержимое больше, чем его контейнер.

Что меняется

overflow-y: auto - позволяет длинному меню прокручиваться вместо того, чтобы выходить за пределы экрана.

CSS

overflowoverflow-xoverflow-ymax-height

Пример запроса

Сделайте длинные выпадающие меню прокручиваемыми внутри элемента с максимальной высотой.

Адаптивность

Точка останова

Breakpoint

Значение

Ширина экрана, при которой изменяется макет.

Что меняется

Изменение точки останова определяет, будет ли планшет вести себя больше как мобильное устройство или как настольный компьютер.

CSS

@mediasmmdlgxl

Пример запроса

Рассматривайте планшеты как настольные компьютеры для верхней навигации.

Адаптивность

Мобильные устройства

Mobile

Значение

Стили, предназначенные для небольших экранов телефонов.

Что меняется

Мобильные стили часто уменьшают размер шрифта, объединяют столбцы и обеспечивают удобство управления с помощью сенсорного экрана.

CSS

@mediamax-widthsm

Пример запроса

На мобильных устройствах, располагайте карточки в один столбец.

Адаптивность

Настольный компьютер

Desktop

Значение

Стили, предназначенные для более широких экранов ноутбуков или настольных компьютеров.

Что меняется

Элементы настольного интерфейса могут использовать больше столбцов, горизонтальную навигацию и более широкие контейнеры контента.

CSS

@mediamin-widthlgxl

Пример запроса

На настольном компьютере, сохраняйте панель навигации по категориям видимой в заголовке.

Адаптивность

Видовое окно

Viewport

Значение

Видимая область экрана браузера или устройства.

Что меняется

Единицы измерения видового окна делают размеры относительными к видимой области экрана.

CSS

vwvh100vw100vh

Пример запроса

Ограничьте ширину меню до размера области просмотра, чтобы оно не переполняло экран на телефонах.

Адаптивность

Responsive

Значение

Дизайн, который адаптируется к разным размерам экрана.

Что меняется

Адаптивные правила могут сделать один и тот же компонент горизонтальным на рабочем столе и вертикальным на мобильном устройстве.

CSS

@mediaclampmin()max()

Пример запроса

Сделайте элементы управления адаптивными, не меняя их порядок.

Состояния взаимодействия

Наведение курсора.

Hover

Значение

Состояние, когда указатель мыши находится над элементом.

Что меняется

Стили при наведении курсора могут изменять фон, цвет текста, границу или тень, чтобы показать, что элемент является интерактивным.

Важно

Сенсорные устройства не имеют надежной функции наведения курсора, поэтому важные действия также должны выполняться с помощью щелчка или касания.

CSS

:hoverbackgroundcolortransition

Пример запроса

Добавить изменение цвета фона при наведении курсора на элементы меню.

Состояния взаимодействия

Активный

Active

Значение

Кратковременное состояние, когда кнопка или ссылка находится в нажатом состоянии.

Что меняется

Активные стили могут сделать кнопки более тактильными благодаря небольшому изменению цвета или положения.

CSS

:activetransformbackground

Пример запроса

Добавить небольшой эффект нажатия к кнопкам панели инструментов.

Состояния взаимодействия

Фокус.

Focus

Значение

Состояние, когда ввод, кнопка или ссылка в данный момент выбраны для использования клавиатуры или ввода текста.

Что меняется

Элементы управления с фокусом делают навигацию с помощью клавиатуры видимой и доступной.

CSS

:focus:focus-visibleoutline

Пример запроса

Сделайте обводку поля поиска, находящегося в фокусе, соответствующей акцентному цвету.

Состояния взаимодействия

Отключено

Disabled

Значение

Состояние, в котором элемент управления виден, но недоступен для использования.

Что меняется

Отключенные стили часто уменьшают контраст и отключают взаимодействие с указателем.

CSS

:disabledopacitycursorpointer-events

Пример запроса

Сделайте неактивные кнопки визуально неактивными, но при этом читаемыми.

Состояния взаимодействия

Выбрано.

Selected

Значение

Состояние выбранного элемента в списке, группе вкладок или меню.

Что меняется

Выбранные стили обычно требуют более яркого фона или цвета текста, чем обычные элементы.

CSS

aria-currentdata-statebackgroundcolor

Пример запроса

Сделайте выбранный элемент управления визуально отличным от остальных.

Состояния взаимодействия

Открыто / Закрыто

Open / Closed

Значение

Видимо ли в данный момент выпадающее меню, главное меню или панель аккордеона.

Что меняется

Состояния открытия и закрытия должны иметь четкие индикаторы, такие как значки плюс/минус или вращение стрелки.

CSS

aria-expandeddisplayheightvisibility

Пример запроса

По умолчанию скрывайте все категории меню.

UI-компоненты

Кнопка

Button

Значение

Элемент управления, который выполняет действие при нажатии или касании.

Что меняется

Отступы, граница, цвет и состояния кнопки определяют, насколько легко и важно она воспринимается.

CSS

buttonpaddingborderbackgroundcursor

Пример запроса

Сделайте основную кнопку действия более заметной, чем второстепенную кнопку.

UI-компоненты

Кнопка-иконка.

Icon button

Значение

Кнопка, представленная в основном иконкой, а не текстом.

Что меняется

Стабильная ширина и высота предотвращают смещение кнопок-иконок при изменении состояний.

CSS

buttonwidthheightaria-labeldisplay: grid

Пример запроса

Оставляйте кнопку меню квадратной и выровненной с кнопкой языка.

UI-компоненты

Выпадающий список

Dropdown

Значение

Плавающее меню, которое появляется после нажатия кнопки или элемента управления выбора.

Что меняется

Положение, ширина, максимальная высота и z-индекс выпадающего списка контролируют его размещение и наложение.

CSS

positiontoprightz-indexbox-shadow

Пример запроса

Когда открывается выпадающее меню выбора языка, закройте главное меню сайта.

UI-компоненты

Аккордеон

Accordion

Значение

Раздел, который можно открыть или закрыть, чтобы показать или скрыть его содержимое.

Что меняется

Аккордеоны делают длинные меню короче, скрывая категории до тех пор, пока они не понадобятся.

CSS

aria-expandedheightdisplayoverflow

Пример запроса

Добавьте поведение открытия и закрытия для каждой категории меню.

UI-компоненты

Вкладки

Tabs

Значение

Элемент управления для переключения между связанными представлениями, не покидая страницу.

Что меняется

Стиль выбранной вкладки должен четко показывать, какой вид активен.

CSS

role=tablistdisplayborderbackground

Пример запроса

Сделайте фон активной вкладки темнее, чем у неактивных вкладок.

UI-компоненты

Модальное окно

Modal

Значение

Панель с фокусом, которая появляется над страницей.

Что меняется

Ширина, фон и z-индекс модального окна определяют, насколько сильно оно перекрывает основную страницу.

CSS

dialogposition: fixedinsetz-indexbackdrop

Пример запроса

Центрируйте модальное окно и сделайте его уже, чем область просмотра.

UI-компоненты

Подсказка

Tooltip

Значение

Небольшая подсказка, отображаемая рядом с элементом управления, часто при наведении или фокусировке.

Что меняется

Подсказки помогают объяснить работу кнопок, отображающих только значок, без добавления постоянного текста.

CSS

positiontitlearia-describedbyz-index

Пример запроса

Добавить всплывающую подсказку, которая описывает кнопку меню с иконкой.

UI-компоненты

Ввод

Input

Значение

Поле, в котором пользователь вводит текст или значения.

Что меняется

Цвет фона, рамка, подсказка и стиль фокусировки для поля ввода влияют на удобство и ясность.

CSS

inputborderpaddingplaceholder:focus

Пример запроса

Сделайте поле поиска полноразмерным и более удобным для нажатия на мобильных устройствах.

UI-компоненты

Значок / Чип

Badge / Chip

Значение

Небольшая круглая метка или элемент управления фильтром.

Что меняется

Размер чипа, радиус и активный цвет влияют на то, насколько удобно использовать фильтры.

CSS

border-radiuspaddingbackgroundfont-size

Пример запроса

Сделайте активные элементы управления визуально более заметными.

Термины CSS для изменений страницы

Заголовок

Значение

Что меняется

Важно

CSS

Пример запроса

Подвал.

Значение

Что меняется

CSS

Пример запроса

Раздел.

Значение

Что меняется

CSS

Пример запроса

Контейнер

Значение

Что меняется

CSS

Пример запроса

Карта

Значение

Что меняется

CSS

Пример запроса

Панель

Значение

Что меняется

CSS

Пример запроса

Навигация

Значение

Что меняется

CSS

Пример запроса

Меню

Значение

Что меняется

Важно

CSS

Пример запроса

Боковая панель

Значение

Что меняется

CSS

Пример запроса

Герой

Значение

Что меняется

CSS

Пример запроса

Отступы

Значение

Что меняется

Важно

CSS

Пример запроса

Margin

Значение

Что меняется

CSS

Пример запроса

Промежуток

Значение

Что меняется

CSS

Пример запроса

Ширина

Значение

Что меняется

CSS

Пример запроса

Высота

Значение

Что меняется

CSS

Пример запроса

Max width