Задает выравнивание между линиями внутри гибкого контейнера, если элементы не используют все доступное пространство
align-items
Задает выравнивание для элементов внутри гибкого контейнера
align-self
Задает выравнивание для выбранных элементов внутри гибкого контейнера
all
Сбрасывает все свойства (за исключением Unicode-двунаправленного письма и направления)
animation
Сокращенное свойство для всех свойств анимации
animation-delay
Указывает задержку начала анимации
animation-direction
Указывает, следует ли воспроизвести анимацию вперед, назад или в альтернативных циклах
animation-duration
Указывает, как долго должна проходить анимация для завершения одного цикла
animation-fill-mode
Задает стиль элемента, если анимация не воспроизводится (до начала, после завершения или и то, и другое)
animation-iteration-count
Указывает, сколько раз должна воспроизводиться анимация
animation-name
Задает имя для анимации @keyframes
animation-play-state
Указывает, запущена ли анимация или приостановлена
animation-timing-function
Задает кривую скорости анимации
B
backface-visibility
Определяет, должна ли быть видна задняя грань элемента при обращении к пользователю
background
Сокращенное свойство для задания всех свойств фона в одном объявлении
background-attachment
Определяет, прокручивается ли фоновое изображение с остальной частью страницы, или зафиксировано
background-blend-mode
Задает режим наложения для каждого слоя фона (цвет/изображение)
background-clip
Определяет, насколько фон (цвет или изображение) должен расширяться в элементе
background-color
Задает цвет фона элемента
background-image
Задание одного или нескольких фоновых изображений для элемента
background-origin
Задает исходную позицию фонового изображения
background-position
Определяет положение фонового изображения
background-repeat
Устанавливает, если/как фоновое изображение будет повторяться
background-size
Определяет размер фоновых изображений
border
Сокращенное свойство для ширины границы, стиля границы и цвета границы
border-bottom
Сокращенное свойство для задания всех свойств нижней границы в одном объявлении
border-bottom-color
Задает цвет нижней границы
border-bottom-left-radius
Определяет радиус границы нижнего левого угла
border-bottom-right-radius
Определяет радиус границы нижнего правого угла
border-bottom-style
Задает стиль нижней границы
border-bottom-width
Задает ширину нижней границы
border-collapse
Устанавливает, должны ли границы таблицы сворачиваться в одну границу или быть разделены
border-color
Задает цвет четырех границ
border-image
Сокращенное свойство для установки всех свойств Border-Image-*
border-image-outset
Определяет величину, на которую область изображения границы выходит за границы рамки
border-image-repeat
Указывает, должно ли изображение границы повторяться, округляться или растягиваться
border-image-slice
Определяет способ среза изображения границы
border-image-source
Указывает путь к изображению, которое будет использоваться в качестве границы
border-image-width
Задает ширину изображения границы
border-left
Сокращенное свойство для задания всех свойств левой границы в одном объявлении
border-left-color
Задает цвет левой границы
border-left-style
Задает стиль левой границы
border-left-width
Задает ширину левой границы
border-radius
Сокращенное свойство для установки всех четырех границ-*-свойства RADIUS
border-right
Сокращенное свойство для задания всех свойств правой границы в одном объявлении
border-right-color
Задает цвет правой границы
border-right-style
Задает стиль правой границы
border-right-width
Задает ширину правой границы
border-spacing
Устанавливает расстояние между границами соседних ячеек
border-style
Задает стиль четырех границ
border-top
Сокращенное свойство для задания всех свойств верхнего края в одном объявлении
border-top-color
Задает цвет верхней границы
border-top-left-radius
Определяет радиус границы верхнего левого угла
border-top-right-radius
Определяет радиус границы верхнего правого угла
border-top-style
Задает стиль верхней границы
border-top-width
Задает ширину верхней границы
border-width
Задает ширину четырех границ
bottom
Устанавливает положение элементов в нижней части родительского элемента
box-decoration-break
Задает поведение фона и границы элемента при разрыве страницы или, для линейных элементов, при разрыве строки.
box-shadow
Прикрепление одной или нескольких теней к элементу
box-sizing
Определяет, как вычисляется ширина и высота элемента: должны ли они включать отступы и границы, или нет
break-after
Задает поведение разрыва страницы, столбца или региона после созданного поля
break-before
Задает поведение разрыва страницы, столбца или региона перед созданным полем
break-inside
Определяет поведение разрыва страницы, столбца или региона в созданном поле
C
caption-side
Задает размещение заголовка таблицы
caret-color
Определяет цвет курсора (стрелка) в входах, текстового ввода или любого элемента, редактируемого
@charset
Задает кодировку символов, используемую в таблице стилей
clear
Указывает, на каких сторонах элемента плавающие элементы не могут плавать
clip
Зажимы абсолютно позиционированного элемента
color
Задает цвет текста
column-count
Указывает количество столбцов, элемент должен быть разделен на
column-fill
Указывает, как заполнять столбцы, сбалансированные или нет
column-gap
Указывает зазор между столбцами
column-rule
Сокращенное свойство для установки всех свойств столбца-Rule-*
column-rule-color
Задает цвет правила между столбцами
column-rule-style
Задает стиль правила между столбцами
column-rule-width
Задает ширину правила между столбцами
column-span
Указывает, сколько столбцов элемент должен охватывать поперек
column-width
Задает ширину столбца
columns
Сокращенное свойство для задания ширины столбца и счетчика столбцов
content
Используется с: before и: After псевдо-элементы, чтобы вставить сгенерированное содержимое
counter-increment
Увеличивает или уменьшает значение одного или нескольких счетчиков CSS
counter-reset
Создает или сбрасывает один или несколько счетчиков CSS
cursor
Указывает курсор мыши, отображаемый при наведении на элемент
D
direction
Задает направление текста/направление письма
display
Указывает, как должен отображаться определенный элемент HTML
E
empty-cells
Указывает, отображать ли границы и фон на пустых ячейках таблицы
F
filter
Определяет эффекты (например, размытие или сдвиг цвета) на элементе перед отображением элемента
flex
Сокращенное свойство для Flex-расти, Flex-сжатия и Flex-основы свойства
flex-basis
Задает начальную длину гибкого элемента
flex-direction
Указывает направление гибких элементов
flex-flow
Сокращенное свойство для свойств Flex-Direction и Flex-Wrap
flex-grow
Указывает, сколько будет расти номенклатура относительно остальных
flex-shrink
Указывает, как элемент будет сжиматься относительно остальных
flex-wrap
Указывает, следует ли обернуть гибкие элементы
float
Указывает, должно ли поле плавать
font
Задает все свойства шрифта в одном объявлении
@font-face
Правило, позволяющее веб-сайтам загружать и использовать шрифты, не являющиеся «web-safe» шрифтами
font-family
Задает семейство шрифтов для текста
font-feature-settings
Позволяет контролировать расширенные типографские функции шрифтов OpenType
@font-feature-values
Позволяет авторам использовать общее имя в шрифт-вариант-альтернативный для функции, активированной по-разному в OpenType
font-kerning
Управляет использованием информации о кернинге (как буквы расположены в пространстве)
font-language-override
Управляет использованием глифов, специфичных для языка, в шрифте
font-size
Задает размер шрифта текста
font-size-adjust
Сохраняет читаемость текста, когда происходит откат шрифта
font-stretch
Выбор нормальной, сжатой или расширенной грани из семейства шрифтов
font-style
Задает стиль шрифта для текста
font-synthesis
Элементы управления, отсутствующие шрифты (полужирный или курсив) могут быть синтезированы обозревателем
font-variant
Указывает, должен ли текст отображаться в шрифте с малыми прописными буквами
font-variant-alternates
Управляет использованием альтернативных глифов, связанных с альтернативными именами, определенными в @font-функция-значения
font-variant-caps
Управление использованием альтернативных глифов для заглавных букв
font-variant-east-asian
Управляет использованием альтернативных глифов для восточно-азиатских скриптов (например, японского и китайского)
font-variant-ligatures
Определяет, какие лигатуры и контекстные формы используются в текстовом содержимом элементов, к которым он относится
font-variant-numeric
Управляет использованием альтернативных глифов для чисел, дробей и порядковых маркеров
font-variant-position
Управляет использованием альтернативных глифов меньшего размера, которые расположены в виде наложения или подстрочных символов относительно базовой линии шрифта
font-weight
Определяет вес шрифта
G
grid
Сокращенное свойство
grid-area
Либо задает имя элемента сетки, либо это свойство является сокращенным свойством для свойств сетка- начало строки, Сетка-столбец-начало, Сетка-конец строкии Сетка-конец столбца
grid-auto-columns
Задает размер столбца по умолчанию
grid-auto-flow
Указывает, как автоматически размещаемые элементы вставляются в сетку
grid-auto-rows
Задает размер строки по умолчанию
grid-column
Сокращенное свойство для свойств Сетка-столбец-начало и Сетка-конец столбца
grid-column-end
Указывает, где закончить элемент сетки
grid-column-gap
Определяет размер зазора между столбцами
grid-column-start
Указывает, где начать элемент сетки
grid-gap
Сокращенное свойство для свойств Сетка-строка-зазор и Сетка-столбец-зазор
grid-row
Сокращенное свойство для свойств Сетка-строка-начало и Сетка-конец строки
grid-row-end
Указывает, где закончить элемент сетки
grid-row-gap
Определяет размер зазора между строками
grid-row-start
Указывает, где начать элемент сетки
grid-template
Сокращенное свойство для свойств Сетка-шаблон-строки, сетка -шаблон-столбцы и области сетки
grid-template-areas
Указывает, как отображать столбцы и строки с использованием именованных элементов сетки
grid-template-columns
Определяет размер столбцов и количество столбцов в макете сетки
grid-template-rows
Определяет размер строк в макете сетки
H
hanging-punctuation
Указывает, может ли знак пунктуации размещаться вне поля строки
height
Задает высоту элемента
hyphens
Задание разбиения слов для улучшения макета абзацев
I
image-rendering
Дает подсказку браузеру о том, какие аспекты изображения наиболее важны для сохранения при масштабировании изображения
@import
Позволяет импортировать таблицу стилей в другую таблицу стилей
isolation
Определяет, должен ли элемент создавать новое содержимое стека
J
justify-content
Задает выравнивание между элементами внутри гибкого контейнера, если элементы не используют все доступное пространство
K
@keyframes
Указывает код анимации
L
left
Задает левое положение позиционного элемента
letter-spacing
Увеличивает или уменьшает расстояние между символами в тексте
line-break
Указывает, как/если разбить линии
line-height
Установка высоты линии
list-style
Задает все свойства для списка в одном объявлении
list-style-image
Задает изображение в качестве маркера элемента списка
list-style-position
Определяет положение маркеров элементов списка (маркеров)
list-style-type
Указывает тип маркера элемента списка
M
margin
Устанавливает все свойства полей в одном объявлении
margin-bottom
Устанавливает нижнее поле элемента
margin-left
Задает левое поле элемента
margin-right
Задает правое поле элемента
margin-top
Задание верхнего поля элемента
max-height
Задает максимальную высоту элемента
max-width
Задает максимальную ширину элемента
@media
Устанавливает правила стиля для различных типов носителей/устройств/размеров
min-height
Задает минимальную высоту элемента
min-width
Задает минимальную ширину элемента
O
object-fit
Указывает, как содержимое заменяемого элемента должно быть установлено в поле, установленное его используемой высотой и шириной
object-position
Задает выравнивание заменяемого элемента внутри его поля
opacity
Задает уровень непрозрачности для элемента
order
Задает порядок гибкого элемента по отношению к остальным
orphans
Задает минимальное число строк, которые должны быть оставлены в нижней части страницы при возникновении разрыва страницы внутри элемента
outline
Задает все свойства структуры в одном объявлении
outline-color
Задает цвет контура
outline-offset
Смещение контура и его выводит за пределы края границы
outline-style
Задает стиль контура
outline-width
Задает ширину контура
overflow
Указывает, что происходит, если содержимое переполнено полем элемента
overflow-wrap
Указывает, может ли обозреватель разрывать строки в словах, чтобы предотвратить переполнение (если строка слишком длинная, чтобы вместить ее содержащее поле)
overflow-x
Указывает, следует ли обрезать левый/правый край содержимого, если оно переполнено областью содержимого элемента
overflow-y
Указывает, следует ли обрезать верхний/нижний край содержимого, если оно переполнено областью содержимого элемента
P
padding
Задает все свойства заполнения в одном объявлении
padding-bottom
Устанавливает нижнее заполнение элемента
padding-left
Задает левое заполнение элемента
padding-right
Задает правое заполнение элемента
padding-top
Задает верхнее заполнение элемента
page-break-after
Задает поведение разбиения страницы после элемента
page-break-before
Задает поведение разбиения страницы перед элементом
page-break-inside
Задает поведение разбиения страниц внутри элемента
perspective
Придает элементу с трехмерной позицией некоторую перспективу
perspective-origin
Определяет, в какой позиции пользователь смотрит на 3D-позиционный элемент
pointer-events
Определяет, реагирует ли элемент на события указателя
position
Указывает тип метода позиционирования, используемого для элемента (статический, относительный, абсолютный или фиксированный)
Q
quotes
Задает тип кавычек для внедренных предложений
R
resize
Определяет, является ли (и как) элемент изменяемым по размерам пользователем
right
Задает правильное положение позиционного элемента
T
tab-size
Задает ширину символа табуляции
table-layout
Определяет алгоритм, используемый для компоновки ячеек таблицы, строк и столбцов
text-align
Задает выравнивание текста по горизонтали
text-align-last
Описывает, как последняя строка блока или строки перед принудительным разрывом строки выравнивается при выравнивании текста «justify»
text-combine-upright
Задает комбинацию нескольких символов в пространстве одного символа
text-decoration
Указывает украшение, добавляемое в текст
text-decoration-color
Определяет цвет текста-украшение
text-decoration-line
Указывает тип линии в тексте-украшение
text-decoration-style
Задает стиль линии в оформлении текста
text-indent
Задает отступ первой строки в текстовом блоке
text-justify
Задает метод выравнивания, используемый при выравнивании текста «justify»
text-orientation
Определяет ориентацию текста в строке
text-overflow
Указывает, что должно происходить при переполнении содержащегося в тексте элемента
text-shadow
Добавление тени к тексту
text-transform
Управляет капитализацией текста
text-underline-position
Определяет положение подчеркивания, которое задается с помощью свойства Text-декорирование
top
Определяет верхнюю позицию позиционного элемента
transform
Применяет 2D или 3D преобразование к элементу
transform-origin
Позволяет изменить положение на преобразованных элементах
transform-style
Определяет способ визуализации вложенных элементов в трехмерном пространстве
transition
Сокращенное свойство для задания четырех свойств перехода
transition-delay
Указывает, когда начнется эффект перехода
transition-duration
Указывает, сколько секунд или миллисекунд требуется для выполнения эффекта перехода
transition-property
Задает имя свойства CSS, для которого используется эффект перехода
transition-timing-function
Определяет кривую скорости эффекта перехода
U
unicode-bidi
Используется вместе со свойством direction для установки или возврата текста, который должен быть переопределен для поддержки нескольких языков в одном документе
user-select
Указывает, можно ли выбрать текст элемента
V
vertical-align
Задание вертикального выравнивания элемента
visibility
Указывает, является ли элемент видимым
W
white-space
Указывает, как обрабатываются пробелы внутри элемента
widows
Задает минимальное число строк, которые должны быть оставлены в верхней части страницы при возникновении разрыва страницы внутри элемента
width
Задает ширину элемента
word-break
Указывает, как слова должны прерываться при достижении конца строки
word-spacing
Увеличивает или уменьшает расстояние между словами в тексте
word-wrap
Позволяет длинные, неразрывные слова, которые будут сломаны и обернуть к следующей строке
writing-mode
Z
z-index
Задает порядок стека позиционного элемента
❮ Главная
Дальше ❯
Популярное CSS
css текст блоки css css картинки как сделать css цвета css шрифты css css стили елементы css фон css кнопки css таблица css размер css ссылки css изображение css выравнивание css внешние отступы css внутренние отступы css списки css css ширина css при наведении css формы
Copyright 2018-2020 HTML5CSS. ru
Правила и Условия Политика конфиденциальности
О нас
Контакты
Справочник CSS | PuzzleWeb.ru
Данный справочник предоставляет подробное описание всех CSS свойств с максимально упрощенными примерами, для более легкого понимания работы свойства.
Свойства CSS по группам:
flexbox
Анимация
Внешний и внутренний отступы
Позиционирование
Размер
Рамка и контур
Списки
Таблицы
Текст
Тени и прозрачность
Трансформация
Фон
Шрифт
Другое
flexbox
Свойство
Описание
CSS
align-content
Задаёт вертикальное выравнивание flex-элементов для flex-контейнеров с многострочным содержимым.
3
align-items
Вертикальное выравнивание flex-элементов внутри flex-контейнера.
3
align-self
Вертикальное выравнивание flex-элемента.
3
flex
Определяет ширину, сжатие и растяжение для flex-элемента.
3
flex-basis
Указывает ширину для flex-элемента.
3
flex-direction
Направление расположения flex-элементов.
3
flex-flow
Направление расположения и возможность переноса для flex-элементов.
3
flex-grow
Определяет коэффициент растяжения flex-элемента.
3
flex-shrink
Определяет коэффициент сжатия flex-элемента.
3
flex-wrap
Определяет возможность переноса flex-элементов.
3
justify-content
Горизонтальное выравнивание flex-элементов.
3
order
Определяет порядок вывода flex-элементов.
3
Анимация
Свойство
Описание
CSS
@keyframes
Позволяет создавать анимацию.
3
animation
Позволяет установить несколько или все значения свойств animation в одном объявлении.
3
animation-delay
Определяет, когда запустится анимация.
3
animation-direction
Указывает будет ли анимация проигрываться в реверсе на альтернативных циклах.
3
animation-duration
Определяет сколько понадобится времени, чтобы закончить 1 цикл анимации.
3
animation-fill-mode
Задаёт стиль для элемента, когда анимация не проигрывается (до её запуска, во время остановки или после её окончания).
По умолчанию CSS анимация не влияет на элемент до тех пор, пока анимация не запуститься, во время паузы и после её завершения. Это и позволяет переопределить свойство animation-fill-mode.
3
animation-iteration-count
Определяет сколько раз анимация должна будет проигрываться.
3
animation-name
Определяет имя для @keyframes.
3
animation-play-state
Указывает будет анимация проигрываться или будет в режиме паузы.
3
animation-timing-function
Определяет кривую скорости для анимации.
3
backface-visibility
Определяет, должна ли быть видна задняя сторона элемента или нет.
3
Внешний и внутренний отступы
Свойство
Описание
CSS
margin
Задает внешние отступы для элемента.
1
margin-bottom
Задает нижний внешний отступ для элемента.
1
margin-left
Задает левый внешний отступ для элемента.
1
margin-right
Задает правый внешний отступ для элемента.
1
margin-top
Задает верхний внешний отступ для элемента.
1
padding
Устанавливает внутренние отступы в элементе.
1
padding-bottom
Задает нижний отступ(внутреннее поле) для элемента.
1
padding-left
Задает левый отступ(внутреннее поле) для элемента.
1
padding-right
Задает правый отступ(внутреннее поле) для элемента.
1
padding-top
Задает верхний отступ(внутреннее поле) для элемента.
1
Позиционирование
Свойство
Описание
CSS
bottom
Указывает направление смещения позиционированного элемента от нижнего края.
2
clear
Указывает с какой стороны элемента не допускаются плавающие элементы.
1
clip
Определяет видимую часть абсолютно позиционированных элементов.
2
display
Указывает, как будет отображаться элемент в браузере.
1
float
Определяет будет ли элемент плавающим.
1
left
Указывает направление смещения позиционированного элемента от левого края.
2
position
Определяет метод позиционирования элементов.
2
right
Указывает направление смещения позиционированного элемента от правого края.
2
top
Указывает направление смещения позиционированного элемента от верхнего края.
2
visibility
Определяет, является ли элемент видимым.
2
z-index
Указывает порядок расположения элементов по оси Z.
2
Размер
Свойство
Описание
CSS
height
Устанавливает фиксированную высоту.
1
max-height
Указывает максимальную фиксированную высоту.
2
max-width
Указывает максимальную фиксированную ширину.
2
min-height
Указывает минимальную фиксированную высоту.
2
min-width
Указывает минимальную фиксированную ширину.
2
overflow
Определяет, что предпринять, если содержимое элемента превосходит размер области элемента.
2
overflow-x
Указывает, обрезать или нет левый/правый край содержимого — если оно переполняет доступную область элемента для его содержания.
3
overflow-y
Указывает, обрезать или нет верхний/нижний край содержимого — если оно переполняет доступную область элемента для его содержания.
3
resize
Указывает, может ли размер элемента изменяться пользователем.
3
width
Устанавливает фиксированную ширину.
1
Рамка и контур
Свойство
Описание
CSS
border
Позволяет использовать основные свойства границ в одном объявлении.
1
border-bottom
Позволяет использовать значения основных свойств для нижней границы рамки в одном объявлении.
1
border-bottom-color
Задает цвет для нижней границы рамки.
1
border-bottom-left-radius
Позволяет сделать округлую границу нижнего левого угла.
3
border-bottom-right-radius
Позволяет сделать округлую границу нижнего правого угла.
3
border-bottom-style
Определяет стиль для нижней границы рамки.
1
border-bottom-width
Определяет ширину для нижней границы рамки.
1
border-color
Задает цвет для границ рамки элемента.
1
border-image
Позволяет использовать изображение в качестве рамки.
3
border-left
Позволяет использовать значения основных свойств для левой границы рамки в одном объявлении.
1
border-left-color
Задает цвет для левой границы рамки.
1
border-left-style
Определяет стиль для левой границы рамки.
1
border-left-width
Определяет ширину для левой границы рамки.
1
border-radius
Позволяет изменить форму углов.
3
border-right
Меняет внешний вид правой границы рамки.
1
border-right-color
Задает цвет для правой границы рамки.
1
border-right-style
Определяет стиль для правой границы рамки.
1
border-right-width
Задает ширину для правой границы рамки.
1
border-style
Задает стиль для границ рамки элемента.
1
border-top
Меняет внешний вид верхней границы рамки.
1
border-top-color
Задает цвет для верхней границы рамки.
1
border-top-left-radius
Позволяет сделать округлую границу верхнего левого угла.
3
border-top-right-radius
Позволяет сделать округлую границу верхнего правого угла.
3
border-top-style
Определяет стиль для верхней границы рамки.
1
border-top-width
Определяет ширину для верхней границы рамки.
1
border-width
Задает ширину для границ рамки элемента.
1
outline
Создает внешнюю границу вокруг элемента.
2
outline-color
Определяет цвет внешней границы.
2
outline-offset
Сдвигает внешнюю границу на заданное расстояние от края элемента.
3
outline-style
Указывает стиль для внешней границы.
2
outline-width
Указывает ширину для внешней границы.
2
Списки
Свойство
Описание
CSS
list-style
Управляет маркером в списках.
1
list-style-image
Заменяет маркеры списков на изображения.
1
list-style-position
Определяет расположение маркера относительно пункта списка.
1
list-style-type
Указывает вид маркера в списке.
1
Таблицы
Свойство
Описание
CSS
border-collapse
Определяет будут ли границы рамки объединены в одну.
2
border-spacing
Определяет расстояние между границами смежных ячеек и общей рамкой таблицы.
2
caption-side
Указывает расположение заголовка таблицы.
2
empty-cells
Регулирует видимость пустых ячеек в таблице.
2
table-layout
Задает алгоритм использования макета таблицы.
2
Текст
Свойство
Описание
CSS
color
Изменяет цвет текста.
1
direction
Определяет направление написания текста.
2
letter-spacing
Контролирует расстояние между символами в тексте.
1
line-height
Определяет межстрочный интервал(интерлиньяж).
1
quotes
Определяет тип кавычек для встроенных цитат.
2
text-align
Указывает способ выравнивания содержимого по горизонтали.
1
text-decoration
Добавляет некоторые элементы декорирования к тексту.
1
text-indent
Определяет отступ первой строки в тексте элемента.
1
text-overflow
Указывает, что должно произойти, когда текст переполняет содержащий элемент.
3
text-transform
Контролирует использование строчных и прописных букв в тексте.
1
vertical-align
Определяет вертикальное выравнивание в элементе.
1
white-space
Определяет способ обработки пробелов внутри элемента.
1
word-break
Определяет правила переноса для не-CJK сценариев.
3
word-spacing
Определяет ширину пробелов между словами.
1
word-wrap
Позволяет прерывать длинные слова для переноса на другую строку.
3
Тени и прозрачность
Свойство
Описание
CSS
box-shadow
Добавляет эффект отбрасывания тени к элементу.
3
opacity
Устанавливает уровень прозрачности элемента.
3
text-shadow
Создает тень для текста.
3
Трансформация
Свойство
Описание
CSS
perspective
Определяет, на сколько пикселей удален 3D элемент от точки обзора.
3
perspective-origin
Определяет, где располагается 3D элемент на осях x и y.
3
transform
Применяет 2D или 3D преобразование к элементу.
3
transform-origin
Позволяет изменить позицию преобразованных элементов.
3
transform-style
Определяет, как вложенные элементы будут отображаться в трехмерном пространстве.
3
transition
Управляет эффектом трансформации.
3
transition-delay
Указывает, когда должен начаться эффект трансформации.
3
transition-duration
Указывает продолжительность трансформации.
3
transition-property
Указывает название CSS свойства, для которого будет применен эффект трансформации.
3
transition-timing-function
Задает кривую скорости для эффекта трансформации.
3
Фон
Свойство
Описание
CSS
background
Устанавливает несколько или все значения свойств фона в одном объявлении.
1
background-attachment
Указывает будет ли фоновое изображение фиксированным.
1
background-clip
Определяет область в элементе, для которой задается фон.
3
background-color
Устанавливает цвет фона для элемента.
1
background-image
Устанавливает фоновое изображение в элементе.
1
background-origin
Указывает область позиционирования для фонового изображения.
3
background-position
Устанавливает начальное место для фонового изображения.
1
background-repeat
Задает, как фоновое изображение будет повторяться на экране.
1
background-size
Указывает размер для фонового изображения.
3
Шрифт
Свойство
Описание
CSS
font
Изменяет стандартный вид текста.
1
@font-face
Позволяет использование любого шрифта на странице.
3
font-family
Указывает шрифт или семейство шрифтов для текста.
1
font-size
Указывает размер для шрифта.
1
font-size-adjust
Контролирует размер неосновных шрифтов.
3
font-stretch
Регулирует ширину текста.
3
font-style
Позволяет изменять стиль текста.
1
font-variant
Конвертирует строчные буквы в прописные уменьшенного размера.
1
font-weight
Задает ширину символов текста.
1
Другое
Свойство
Описание
CSS
box-sizing
Позволяет заставить определенные элементы заполнять область определенным способом.
3
column-count
Разделяет элемент на колонки.
3
column-gap
Задает расстояние между колонками элемента.
3
column-rule
Свойство column-rule позволяет указать значения свойств column-rule-* (ширину, стиль и цвет) в одном объявлении.
3
column-rule-color
Определяет цвет границы между колонками.
3
column-rule-style
Определяет стиль границы между колонками.
3
column-rule-width
Указывает ширину границы между колонками.
3
columns
Позволяет использовать значения свойств column-width и column-count в одном объявлении.
3
column-span
Указывает элементу количество колонок для обхвата.
3
column-width
Определяет ширину колонок.
3
content
Определяет содержимое для псевдо-элементов ::before и ::after.
2
counter-increment
Увеличивает значение счетчика.
2
counter-reset
Устанавливает начальное значение счетчика.
2
cursor
Изменяет вид курсора мыши.
2
page-break-after
Определяет наличие или отсутствие разрыва страницы после заданного элемента.
2
page-break-before
Определяет наличие или отсутствие разрыва страницы перед заданным элементом.
2
page-break-inside
Определяет наличие или отсутствие разрыва страницы внутри элемента.
2
Теги W3.CSS (этикетки и знаки)
❮ Назад
Следующая ❯
Метки:
Сделанный
Новый!
Подробнее позже!
Метки как знаки:
Фалкон-Ридж-Паркуэй
ОСТАНАВЛИВАТЬСЯ! ОСТОРОЖНО!
Классы тегов W3.
CSS
W3.CSS предоставляет один класс для тегов, этикеток и знаков:
Класс
Определяет
тег w3
Прямоугольная черная бирка/бирка
Бирки, этикетки и знаки
В мире W3.CSS нет реальной разницы между тегом, меткой или знаком.
Прямоугольные теги
Класс w3-tag создает прямоугольный тег (метку или знак).
Цвет по умолчанию черный:
Статус: Готово
Пример
Статус: Готово
Попробуйте сами »
Цветные метки
Используйте цвет 9 w3- класс для изменения цвета тега:
Новинка!
Еще позже!
Пример
Новинка!
Подробнее позже!
Попробуйте сами »
Размеры тегов
По умолчанию тег наследует размер своего контейнера.
Размер w3- Классы
(w3-крошечный, w3-маленький, w3-большой, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-большой)
можно использовать для изменения размера тега:
6
6
6
66
66
66
66
66
Вы можете добавить дополнительный отступ к большим тегам:
Пример
66 66
Попробуйте сами »
Буквенные теги
A
U
г
U
С
T
Пример
A U G U S T
Попробуйте сами »
С
А
л
Е
Пример
S A L E
Попробуйте сами »
Знаки
Знаки — это не что иное, как большие теги.
Лондонский зоопарк
Пример
Лондонский зоопарк
Попробуйте сами »
Дорожные знаки
Falcon Ridge Parkway
Пример
Сокол
Ridge Parkway
Попробуйте сами »
Большие знаки
W3- Размер Классы могут быть использованы для отображения больших знаков:
в случае аварийных : БЕГИТЕ К черту!
Пример
В СЛУЧАЕ
ЧРЕЗВЫЧАЙНАЯ СИТУАЦИЯ:
БЕГИТЕ КАК ПРЯМО!
Попробуйте сами »
49,99
Пример
49,99
3 900 »
Закругленные знаки
Классы w3-round- size можно использовать для добавления закругленных углов к знаку:
НЕ ДЫШАТЬ
ПОД ВОДОЙ
Пример
НЕ
ДЫШАТЬ
ПОД ВОДОЙ
Попробуйте сами »
Вращение тегов для поворота знака CSS
9000 :
ОСТАНАВЛИВАТЬСЯ
Пример
STOP
Попробуйте сами »
Примечание: transform:rotate() не работает в IE 9и ранее.
Вращающиеся метки
Класс w3-spin можно использовать для вращения знака на 360 градусов:
ОСТАНАВЛИВАТЬСЯ
Пример
STOP
Попробуйте сами »
❮ Предыдущая
Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTML Учебное пособие по CSS Учебное пособие по JavaScript Учебное пособие Учебное пособие по SQL Учебное пособие по Python Учебник по W3.CSS Учебник по Bootstrap Учебник по PHP Учебник по Java Учебник по C++ Учебник по jQuery
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
Copyright 1999-2023 Refsnes Data. Все права защищены. W3Schools использует W3.CSS.
Как использовать пользовательский HTML и CSS
В некоторых из наших шаблонов есть возможности персонализировать содержимое, добавляя код HTML и CSS. Будь то настройка стиля ваших карточек или добавление мультимедиа во всплывающие окна, вот список полезных тегов HTML и свойств CSS, которые помогут вам.
В этой статье
Полезные теги HTML
Полезные свойства CSS
Полезные теги HTML
Теги
HTML часто используются для обтекания текста, чтобы придать ему особый стиль или изменить его семантическое значение. Например, при правильном использовании теги заголовков могут улучшить доступность, поскольку такие технологии, как программы чтения с экрана, используют их для определения наиболее важных фрагментов текста.
Существуют также теги HTML для добавления определенных элементов, таких как гиперссылки и изображения.
Элементы текста
Тег HTML
Что это
Как использовать
Заголовки — от самого важного до наименее важного
Обтекание текста заголовка. Например.
Заголовок 1
или
Неупорядоченные/маркированные
и упорядоченные/нумерованные списки
Обтекание элементов списка. Например.
<ул>
Элемент 1
Элемент 2
Элементы списка внутри
или
См. выше
Оформление текста
Тег HTML
Что это
Как использовать
или
Оба выделены жирным шрифтом, но также выделяют текст как «важный»
Обтекание необходимого текста. Может использоваться внутри других тегов HTML. Например.
Это важный абзац.
или
В обоих случаях текст выделяется курсивом, но также выделяет текст как «выделенный»
Обтекание необходимого текста. Может использоваться внутри других тегов HTML. Например.
Это выделенный абзац.
Другие элементы HTML
Тег HTML
Что это
Как использовать
Одиночный разрыв строки
Сам по себе, не требует закрывающего тега
<час>
Горизонтальная линия
Сам по себе, не требует закрывающего тега
<а>
Гиперссылка
Оберните текст, который должен быть связан, указав URL-адрес с атрибутом href . Например.
Определяет секцию или отдел. Может использоваться для переноса других элементов HTML для добавления идентификаторов, классов или встроенных стилей
.
Оберните другое содержимое и добавьте классы или стили. Например.
<дел>
Заголовок 1
Абзац здесь
<диапазон>
Встроенный контейнер, который можно использовать для оформления определенного фрагмента текста.
Дополнительную информацию см. в нашем справочном документе
Обтекание текста и добавление стилей. Например.
отрицательные значения для этих стран.
Изображение
Включите атрибут src с URL-адресом изображения и укажите высоту и/или ширину. Не имеет закрывающего тега. Например.
<видео>
Видео
Оберните тег с URL-адресом видео и укажите высоту и/или ширину. Не имеет закрывающего тега. Например.
<видео>
Полезные свойства CSS
CSS — это язык, используемый для описания того, как должны отображаться элементы HTML, от макета до стиля, который меняет цвет, размер и многое другое. Эти свойства можно добавить к определенным элементам с помощью встроенных тегов стиля или путем таргетинга на HTML-элементы, классы и идентификаторы в автономном элементе стиля .
Например, если мы хотим покрасить один заголовок в красный цвет, мы можем использовать встроенный тег стиля:
Заголовок 1
Если мы хотим окрасить заголовок 1 в зеленый цвет, а абзацы в синий, мы можем использовать элемент стиля:
Заголовок 1
Это абзац
Это другой абзац
<стиль>
ч2 {
цвет: зеленый;
}
п {
цвет синий;
}
Свойства CSS, которые вы можете использовать, и то, что они делают, зависит от типа элемента HTML.
Свойство CSS
Что он делает
Как использовать
цвет
Для текстовых элементов изменяет цвет текста
Используйте либо именованные цвета, либо форматы HEX, RGB/RGBA или HSL/HSLA
размер шрифта
Изменяет размер шрифта
Определено в px , % , em или rem Узнайте больше о rems здесь
стиль шрифта
Изменяет стиль шрифта
Чаще всего обычный или курсив
высота строки
Изменяет высоту строки
Определено в px , % , em или rem Узнайте больше о rems здесь
выравнивание по тексту
Изменяет выравнивание текста
Чаще всего слева , справа или по центру
цвет фона
Изменяет цвет фона элемента
Используйте либо именованные цвета, либо форматы HEX, RGB/RGBA или HSL/HSLA
ru
CSS
CSS 
Например.
Может использоваться внутри других тегов HTML. Например.
Например.
Не имеет закрывающего тега. Например.