Справочник CSS | PuzzleWeb.ru

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

Свойство Описание 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
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
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

puzzleweb.ru

CSS Справочник свойств

align-content Задает выравнивание между линиями внутри гибкого контейнера, если элементы не используют все доступное пространство
align-items Задает выравнивание для элементов внутри гибкого контейнера
align-self Задает выравнивание для выбранных элементов внутри гибкого контейнера
all Сбрасывает все свойства (кроме unicode-bidi и direction)
animation Сокращенное свойство для всех свойств animation-*
animation-delay Задает задержку запуска анимации
animation-direction Указывает, должна ли анимация воспроизводиться вперед, назад или в других циклах
animation-duration Определяет, сколько времени анимация должна занять для завершения одного цикла
animation-fill-mode Задает стиль элемента, если анимация не воспроизводится (до он начнется, после его окончания, или как)
animation-iteration-count Указывает, сколько раз анимация должна воспроизводиться
animation-name Задает имя анимации @keyframes
animation-play-state Указывает, запущена или приостановлена анимация
animation-timing-function Задает кривую скорости анимации
backface-visibility Определяет, должна ли задняя грань элемента быть видимой при обращении к пользователю
background Сокращенное свойство для всех свойств background-*
background-attachment Задает, будет ли фоновое изображение прокручиваться вместе с остальной частью страницы или будет фиксироваться
background-blend-mode Задает режим наложения каждого фонового слоя (цвет/изображение)
background-clip Определяет, как далеко фон (цвет или картинка) должна распространяться в элемент
background-color Задает цвет фона элемента
background-image Задает одно или несколько фоновых изображений для элемента
background-origin Указывает исходное положение фонового изображения
background-position Определяет положение фонового изображения
background-repeat Устанавливается, если/как, фоновое изображение будет повторяться
background-size Определяет размер фоновых изображений
border Сокращенное свойство для свойств border-width, border-style и border-color
border-bottom Сокращенное свойство для свойств border-bottom-width, border-bottom-style и border-bottom-color
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-*
border-left-color Задает цвет левой границы
border-left-style Задает стиль левой границы
border-left-width Задает ширину левой границы
border-radius Сокращенное свойство для всех свойств border-*-radius
border-right Сокращенное свойство для всех свойств border-right-*
border-right-color Задает цвет правой границы
border-right-style Задает стиль правой границы
border-right-width Задает ширину правой границы
border-spacing Задает расстояние между границами соседних ячеек
border-style Задает стиль четырех границ
border-top Сокращенное свойство для свойств border-top-width, border-top-style and border-top-color
border-top-color Задает цвет верхней границы
border-top-left-radius Определяет радиус границы верхнего левого угла
border-top-right-radius Определяет радиус границы верхнего правого угла
border-top-style Задает стиль верхней границы
border-top-width Устанавливает ширину верхней границы
border-width Задает ширину четырех границ
bottom Задает положение элементов в нижней части родительского элемента
box-decoration-break Задает поведение фон и границы к элементу page-break, или для элеметов in-line, в line-break.
box-shadow Присоединяет одну или несколько теней к элементу
box-sizing Определяет, как вычисляются ширина и высота элемента: они включают в себя отступы и границы, или нет
break-after Задает поведение разрыва страницы, столбца или области после созданного бокса
break-before Указывает поведение разрыва страницы, столбца или области перед созданным бокса
break-inside Указывает поведение разрыва страницы, столбца или области внутри созданного бокса
caption-side Задает размещение заголовка таблицы
caret-color Задает цвет курсора (символ) во входных данных, текстовых областях или редактируемом элементе
@charset Указывает кодировку символов, используемую в таблице стилей
clear Определяет, на каких сторонах элемента плавающие элементы не могут плавать
clip Клипы абсолютно расположенный элемент
color Задает цвет текста
column-count Указывает количество столбцов, на которые должен быть разделен элемент
column-fill Указывает, как заполнять столбцы, сбалансированные или нет
column-gap Определяет зазор между столбцами
column-rule Сокращенное свойство для всех свойств column-rule-*
column-rule-color Задает цвет правила между столбцами
column-rule-style Задает стиль правила между столбцами
column-rule-width Задает ширину правила между столбцами
column-span Указывает, сколько столбцов должен занимать элемент
column-width Задает ширину столбца
columns Сокращенное свойство для свойств column-width и column-count
content Используется с псевдо-элементами: before и: after для вставки генерированного содержимого
counter-increment Увеличивает или уменьшает значение одного или нескольких счетчиков CSS
counter-reset Создает или сбрасывает один или несколько счетчиков CSS
cursor Указывает курсор мыши будет отображаться при наведении на элемент
direction Задает направление текста направление/записи
display Указывает, как должен отображаться определенный элемент HTML
empty-cells Указывает, следует ли отображать границы и фон пустых ячеек в таблице
filter Определяет эффекты (например, размытие или смещение цвета) для элемента перед его отображением
flex Сокращенное свойство для свойств flex-grow, flex-shrink, и flex-basis
flex-basis Задает начальную длину гибкого элемента
flex-direction Указывает направление гибких элементов
flex-flow Сокращенное свойство для свойств flex-direction и flex-wrap
flex-grow Указывает, насколько элемент будет расти относительно остальных
flex-shrink Указывает, как элемент будет сжиматься относительно остальных
flex-wrap Указывает, следует ли оборачивать гибкие элементы
float Указывает, должен ли бокс быть плавающим
font Сокращенное свойство для свойств font-style, font-variant, font-weight, font-size/line-height, и font-family
@font-face Правило, которое позволяет веб-сайтам загружать и использовать шрифты, отличные от шрифтов «web-safe»
font-family Задает шрифт для текста
font-feature-settings Позволяет управлять расширенными типографскими возможностями шрифтов OpenType
@font-feature-values Позволяет авторам использовать общее имя в font-variant-alternate для функции, активированной по-разному в OpenType
font-kerning Управляет использованием информации Кернинга (как расставляются буквы)
font-language-override Контролирует использование языковых символов в шрифте
font-size Задает размер шрифта текста
font-size-adjust Сохраняет читаемость текста при резервном копировании шрифта
font-stretch Выбор нормальной, сжатой или развернутой грани из семейства шрифтов
font-style Задает стиль шрифта для текста
font-synthesis Элементы управления, отсутствующие шрифты (полужирный или курсив) могут быть синтезированы браузером
font-variant Указывает, должен ли текст отображаться шрифтом с маленькими прописными буквами
font-variant-alternates Управляет использованием альтернативных глифов, связанных с альтернативными именами, определенными в @font-feature-values
font-variant-caps Управляет использованием альтернативных символов для заглавных букв
font-variant-east-asian Управляет использованием альтернативных глифов для восточноазиатских скриптов (e.g японский и китайский языки)
font-variant-ligatures Управляет тем, какие лигатуры и контекстные формы используются в текстовом содержимом элементов, к которым они применяются
font-variant-numeric Управляет использованием альтернативных глифов для чисел, дробей и порядковых маркеров
font-variant-position Управляет использованием альтернативных глифов меньшего размера, расположенных в виде верхнего или нижнего индекса относительно базовой линии шрифта
font-weight Задает вес шрифта
grid Сокращенное свойство для свойств grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, и grid-auto-flow
grid-area Либо задает имя элемента сетки, и это свойство является свойством, характеристикой свойств grid-row-start, grid-column-start, grid-row-end, и grid-column-end
grid-auto-columns Задает индекс размера столбца
grid-auto-flow Указывает, как автоматически размещаемые элементы вставляются в сетку
grid-auto-rows Задает индекс размера строки
grid-column Сокращенное свойство для свойств grid-column-start и grid-column-end
grid-column-end Указывает, где заканчивается элемент сетки
grid-column-gap Определяет размер зазора между столбцами
grid-column-start Указывает, с чего начать элемент сетки
grid-gap Сокращенное свойство для свойств grid-row-gap и grid-column-gap
grid-row Сокращенное свойство для свойств grid-row-start и grid-row-end
grid-row-end Указывает, где заканчивается элемент сетки
grid-row-gap Определяет размер зазора между строками
grid-row-start Указывает, с чего начать элемент сетки
grid-template Сокращенное свойство для свойств grid-template-rows, grid-template-columns и grid-areas properties
grid-template-areas Указывает, как отображать столбцы и строки, используя именованные элементы сетки
grid-template-columns Задает размер столбцов и количество столбцов в макете сетки
grid-template-rows Задает размер строк в макете сетки
hanging-punctuation Указывает, может ли знак пунктуации располагаться за пределами строки
height Задает высоту элемента
hyphens Задает способ разделения слов для улучшения расположения абзацев
image-rendering Подсказывает браузеру, какие аспекты изображения наиболее важны для сохранения при масштабировании
@import Позволяет импортировать таблицу стилей в другую таблицу стилей
isolation Определяет, должен ли элемент создавать новое содержимое стека
justify-content Задает выравнивание между элементами внутри гибкого контейнера, если не использовать все доступное пространство
left Определяет левое положение расположенного элемента
letter-spacing Увеличивает или уменьшает расстояние между символами в тексте
line-break Определяет как/если ломать линии
line-height Устанавливает высоту линии
list-style Задает все свойства списка в одном объявлении
list-style-image Задает изображение в качестве маркера элемента списка
list-style-position Указывает положение маркеров элементов списка (жирные точки)
list-style-type Указывает тип маркера элемента списка
margin Устанавливает все свойства полей в одном объявлении
margin-bottom Устанавливает нижнее поле элемента
margin-left Задает левое поле элемента
margin-right Задает правое поле элемента
margin-top Задает верхнее поле элемента
max-height Задает максимальную высоту элемента
max-width Задает максимальную ширину элемента
@media Устанавливает правила стиля для различных типов/устройств/размеров носителей
min-height Задает минимальную высоту элемента
min-width Задает минимальную ширину элемента
mix-blend-mode Указывает, как содержимое элемента должно сочетаться с его прямым родительским фоном
object-fit Определяет как содержание замененного элемента должно быть приспособлено к боксу установленной своими используемыми высотой и шириной
object-position Задает выравнивание заменяемого элемента внутри его бокса
opacity Задает уровень непрозрачности для элемента
order Устанавливает порядок гибкого элемента относительно остальных
orphans Задает минимальное количество строк, которое должно оставаться в нижней части страницы при разрыве страницы внутри элемента
outline Сокращенное свойство для свойств outline-width, outline-style, и outline-color
outline-color Задает цвет контура
outline-offset Смещает контур и рисует его за границей
outline-style Задает стиль контура
outline-width Задает ширину контура
overflow
Указывает, что происходит, если содержимое переполняет бокс элемента
overflow-wrap Указывает, может ли браузер прерывать строки в словах, чтобы предотвратить переполнение (если строка слишком длинная, чтобы соответствовать содержащему ее блоку)
overflow-x Указывает, следует ли обрезать левый/правый края содержимого, если оно переполняет область содержимого элемента
overflow-y Указывает, следует ли обрезать верхний/нижний края содержимого, если оно переполняет область содержимого элемента
padding Сокращенное свойство для свойств padding-*
padding-bottom Устанавливает нижней отступ элемента
padding-left Задает отступ слева для элемента
padding-right Задает правый отступ элемента
padding-top Задает отступ сверху элемента
page-break-after Задает поведение разрыва страницы после элемента
page-break-before Задает поведение разрыва страницы перед элементом
page-break-inside Задает поведение разрыва страницы внутри элемента
perspective Дает 3D-позиционированному элементу некоторую перспективу
perspective-origin Определяет, в какой позиции пользователь смотрит на 3D-позиционированный элемент
pointer-events Определяет, реагирует ли элемент на события указателя
position Указывает тип метода позиционирования, используемого для элемента (статический, относительный, абсолютный или фиксированный)
quotes Задает тип кавычек для внедренных предложений
resize Определяет, если (и как) элемент изменяется пользователем
right Определяет правое положение расположенного элемента
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-decoration
top Определяет верхнее положение расположенного элемента
transform Применяется 2D-или 3D-преобразования к элементу
transform-origin Позволяет изменять положение преобразованных элементов
transform-style Задает способ отображения вложенных элементов в 3D-пространстве
transition Сокращенное свойство для всех свойств transition-*
transition-delay Указывает, когда начнется эффект перехода
transition-duration Указывает, сколько секунд или миллисекунд требуется для завершения эффекта перехода
transition-property Задает имя свойства CSS эффект перехода для
transition-timing-function Определяет кривую скорости эффекта перехода
unicode-bidi Используется вместе с свойством direction для установки или возврата переопределения текста для поддержки нескольких языков в одном документе
user-select Указывает, можно ли выбрать текст элемента
vertical-align Задает вертикальное выравнивание элемента
visibility Указывает, является ли элемент видимым
white-space Задает способ обработки пробелов внутри элемента
widows Задает минимальное количество строк, которое должно оставаться в верхней части страницы при разрыве страницы внутри элемента
width Задает ширину элемента
word-break Указывает, как слова должны ломаться при достижении конца строки
word-spacing Увеличивает или уменьшает расстояние между словами в тексте
word-wrap Позволяет длинные, нерушимые слова, которые будут разбиты и перенесены на следующую строку
writing-mode Указывает, должны ли строки текста уложены горизонтально или вертикально
z-index Задает порядок расположения элементов в стеке

schoolsw3.com

Бравый справочник css-свойств для новичка / Habr

Как новички изучают css-свойства? Они читают про все свойства, которые только есть, что-то запоминают, в основном только width, height и background, а потом постоянно рыщут по своим конспектам и гуглу, пытаются вспомнить какое свойство за что отвечает, как оно пишется и какие у него есть значения.

И тут мне пришла в голову идея. А что если сделать такую штуку, которая наглядно показывает как пишутся и работают все css-свойства? Причем, все это на одной странице.

Таким образом, за два вечера создался вот такой css-помощник: lesson-web.ru/modules/css_helper


В левой части мы видим результат работы css-свойств, а справа, собственно, список css-свойств, которые мы можем увидеть в действии.

В окне результата у нас есть один, как будто бы, div с классом .box. Если установить свойство float, то в окне появится три одинаковых блока.

Также можно задать текстовое содержимое этого блока. Есть пять вариантов:


В блоке с css-свойствами мы можем:
  • активировать или деактивировать свойство, кликнув по checkbox;
  • задать значение свойства;
  • понять свойство на простом русском языке
  • если на сайте есть описание по данному свойству, то можно перейти по ссылке и более подробно изучить его.


Значение можно задать тремя способами:
  1. Просто ввести значение в input
  2. Если это цвет, то указать его на палитре
  3. Если у свойства если стандартный набор значений, то можно выбрать его из списка

Собственно, вот такая приятная мелочь получилась) Если у вас есть какие-то идеи как можно улучшить этот помощник, то с радостью почитаю их в комментариях!

habr.com

СSS Учебник



CSS — язык, описывает стиль документа HTML.

CSS описывает то, как элементы HTML должны быть отображены.

Этот учебник научит Вас от начального до продвинутого.

Примеры в каждой главе

Учебник CSS содержит сотни примеров в CSS.

С помощью редактора онлайн, Вы можете редактировать CSS и при нажатии на кнопку «Посмотреть» увидеть результат.

Пример CSS

body{
   background-color: lightblue;
}

h2{
   color: white;
   text-align: center;
}

p{
   font-family: verdana;
   font-size: 20px;
}

Редактор кода »

Нажмите на кнопку «Редактор кода», чтобы увидеть, как это работает.

Начать изучение CSS бесплатно, сейчас!


Примеры CSS

Посмотреть еще 300 примеров! С помощью онлайн редактора, вы можете редактировать CSS, при нажатии на кнопку «Посмотреть» Вы увидете результат.

Перейти к примерам CSS!


Бесплатные шаблоны CSS

Мы создали несколько отзывчивые W3.CSS шаблоны для вас, чтобы использовать их в интернете.

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

Бесплатные шаблоны CSS!



Упражнения и викторина CSS

Вы можете проверить свои навыки CSS в SchoolsW3!

Начать CSS упражнения!

Начать CSS викторину!


Справочник CSS

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


CSS Экзамен — получить диплом!

SchoolsW3 Сертификат

SchoolsW3 онлайн сертификат

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

Уже выдано более 10 000 сертификатов!

Получите Ваш Сертификат »

HTML Сертификат документы на ваши знания HTML.

CSS Сертификат документы на ваши знания новейших CSS.

JavaScript Сертификат документы на ваши знания JavaScript и HTML DOM.

jQuery Сертификат документы на ваши знания jQuery.

PHP Сертификат документы на ваши знания PHP и SQL (MySQL).

XML Сертификат документы на ваши знания XML, XML DOM и XSLT.

Bootstrap Сертификат документы на ваши знания Bootstrap фреймворк.


schoolsw3.com

Как пользоваться справочником | htmlbook.ru

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

Браузеры

Хотя большинство свойств CSS описаны достаточно давно, разработчики не всегда включали их поддержку в браузер или делали это не в полном объеме. По этой причине часто возникала ситуация, когда стандарты нельзя было применять только потому, что они не работали. К счастью, эта ситуация исправляется и современные браузеры поддерживают спецификацию CSS 2.1 практически в полном объеме, хотя еще и не до конца. Тем не менее, при создании универсальных веб-страниц, которые корректно отображаются в разных браузерах, необходимо знать, какие свойства будут работать и где, а какие нет. Для этого в таблице приведены популярные браузеры — Internet Explorer, Chrome, Opera, Safari и Firefox, а также используются следующие обозначения:

 — свойство полностью поддерживается браузером со всеми допустимыми значениями;

 — свойство браузером не воспринимается и игнорируется;

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

Значение по умолчанию

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

Наследование

Наследование — это перенос правил форматирования для элементов, находящихся внутри других. Например, если для тега <p> задан красный цвет текста, а для курсива <i>, который находится внутри абзаца, нет, то в этом случае вложенный элемент наследует свойства своего родителя и курсивный текст также будет красным.

Наследование полезно для задания свойств, применяемых к элементу по умолчанию. Так, достаточно задать параметры форматирования тега <table> и к ячейкам таблицы <td> они будут применены автоматически. Точно так же можно определить свойства тега <body>, который порождает стиль всех остальных элементов веб-страницы.

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

Применение

Свойства CSS можно применять далеко не ко всем элементам веб-страницы, а только к тем, с которыми они «дружат». Большинство свойств работают со всеми элементами, а некоторые только с блочными или позиционированными. Например, для изображений совершенно бессмысленно устанавливать свойства, которые манипулируют с текстом. Так что в каждом случае следует решать самостоятельно, когда применять свойство, а когда нет.

Ссылка на спецификацию

Для объективности информации приводится ссылка на спецификацию CSS 2.1 или CSS 3 по указанному свойству. Саму спецификацию можно почитать по адресу http://www.w3.org/TR/CSS21/

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

Версии CSS

Указано, в каких версиях CSS поддерживается стилевое свойство, а в каких нет. Используются следующие обозначения:

— свойство описано в указанной версии CSS.

— свойство в эту версию спецификации CSS не включено.

Синтаксис

При описании синтаксиса применяются следующие обозначения:

  • вертикальная черта между значениями (например, fixed | scroll) указывает на логическое исключающее ИЛИ, это означает, что надо выбрать только одно значение из предложенных;
  • двойная вертикальная черта (border-style || color) обозначает объединяющее ИЛИ (ИЛИ/И), каждое значение может использоваться самостоятельно или совместно с другими через пробел;
  • квадратные скобки ([left | center | right]) помечают группу, из которой, как правило, выбирается одно значение, причем оно не является обязательным к использованию;
  • два числа в фигурных скобках ({a,b}) говорят, что предшествующее им значение следует повторять не менее a, но не более b раз.

Примеры

Все примеры проверены на соответствие спецификации HTML с помощью валидатора по адресу http://validator.w3.org, а также на соответствие спецификации CSS 2.1 и CSS 3 с помощью валидатора (http://jigsaw.w3.org/css-validator). Возле каждого примера располагается таблица, где цветом выделяется, валиден пример или нет. Также приводятся некоторые популярные браузеры, в которых выполнялся пример и указано, работает в них пример или нет. Работоспособность обозначается той же цветовой схемой, что и для таблицы с браузерами.

Объектная модель

Для динамического изменения свойств элемента через JavaScript, необходимо знать, как к нему обращаться. Зная имя объекта и желаемое свойство, можно указать его новое значение без перезагрузки веб-страницы. Так, для сокрытия и отображения элемента применяется visibility, а объектная модель для управления его значением — document.getElementById(«elementID»).style.visibility. Указывая вместо elementID свой идентификатор элемента, заданный параметром id, получаем механизм для динамического скрывания некоторого содержимого.

htmlbook.ru

Современный учебник CSS: ваш онлайн-самоучитель

Учимся создавать веб-страницы, отвечающие современным требованиям.

 
Современный учебник CSS — это онлайн-книга, призванная ознакомить веб-разработчиков с современными способами создания сайтов, в том числе и адаптивных. В ней рассматриваются новейшие методы применения CSS и HTML. Материал рассчитан на тех, кто уже знаком с HTML хотя бы на начальном уровне.

Немного о таблицах стилей

Веб-страница создается и структурируется с помощью стандартного языка разметки — HTML. Раньше, в середине 90-х годов, этот язык использовался и для стилевого оформления документа, но сейчас всё, что касается дизайна страниц, решается с помощью каскадных таблиц стилей (Cascading Style Sheets — англ.). У CSS есть множество достоинств и возможностей, о которых вы узнаете по ходу чтения книги.

Главными плюсами CSS являются компактность и удобство. Во-первых, отказываясь от создания дизайна прямо в HTML-документе, вы делаете веб-страницу более аккуратной и чистой — нет длинного кода и неразберихи, страница грузится быстрее, а поисковому роботу становится легче сканировать содержимое. Все стили загружаются из внешнего файла, где хранятся исключительно правила CSS для оформления страницы. Во-вторых, появляется отличная возможность мгновенно править что-либо в оформлении всего сайта. Достаточно подкорректировать файл CSS и изменения станут видны на всех страницах, к которым подключен этот файл.

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

Для кого эта книга

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

Желаем вам успехов в обучении!

 

СОДЕРЖАНИЕ

Часть I. Азы CSS

  1. Подготовка почвы: поговорим об HTML
  2. Синтаксис CSS. Подключение внешних таблиц. Создаем первый стиль
  3. Изучение селекторов:
    1. Селекторы CSS. Теги, классы, ID, группы
    2. Селекторы потомков. Псевдоклассы и псевдоэлементы CSS
    3. Дочерние селекторы CSS. Дополнительные псевдоклассы
    4. Соседние и родственные селекторы
    5. Селекторы атрибутов
    6. Урок: тренируемся применять селекторы
  4. Наследование в CSS: что это и как работает
  5. Каскадность CSS. Приоритеты стилей

Часть II. Использование CSS

  1. Работа с текстом:
    1. Подключение шрифтов CSS. Работа с веб-шрифтами. Google Fonts
    2. Установка цвета для текста в CSS. Способы представления цветов
    3. Размер шрифта в CSS. Единицы измерения px, %, em
    4. Жирный шрифт и курсив CSS
    5. Прописные и строчные буквы в CSS: свойство text-transform
    6. Подчеркивание, зачеркивание текста в CSS: свойство text-decoration
    7. Тень для текста: свойство CSS text-shadow
    8. Межсимвольный, межстрочный интервал CSS. Расстояние между словами
    9. Выравнивание текста в CSS: свойство text-align
    10. CSS для списков: свойство list-style и его производные
  2. Работа с блоками:
    1. Вступление. Блоки
    2. Поля и отступы CSS: отличия свойств margin и padding
    3. Блочные и строчные элементы
    4. Свойство border: границы для блоков
    5. Border-radius: закругленные углы в CSS
    6. Box-shadow: тень для элемента
    7. Width и height: определяем размеры элемента
    8. Box-sizing: управляем вычислением ширины и высоты
    9. Overflow: управление переполненными элементами
    10. Max-width, max-height, min-width, min-height: максимальные и минимальные размеры элемента
    11. Поток документа. Свойства float и clear
    12. Практика: делаем адаптивную посадочную страницу
  3. Работа с графикой:
    1. CSS для тега img
    2. Background-image: установка фонового изображения
    3. Относительный и абсолютный путь к файлу
    4. Background-repeat: повторение фоновой картинки
    5. Background-position: позиционирование фона
    6. Background-attachment: фиксация фона
    7. Свойства CSS3 background-origin и background-clip
    8. Background-size: масштабирование фонового рисунка
    9. Свойство background: все настройки фона в одном месте
    10. Несколько фоновых рисунков для одного элемента
    11. Linear-gradient(): линейный градиент в фоне
    12. Repeating-linear-gradient(): градиент с повторением
    13. Radial-gradient(): радиальный градиент
    14. Repeating-radial-gradient(): повторяющийся радиальный градиент
    15. Практика: создаем фотогалерею на CSS
    16. Практика: работаем с фоновыми рисунками
  4. Ссылки и навигация:
    1. Состояния ссылок в CSS. Псевдоклассы
    2. Варианты стилизации ссылок в CSS
    3. Навигационные панели с помощью CSS
    4. Стили для особых ссылок
    5. CSS-спрайты
  5. Трансформирование и анимация:
    1. Свойство transform: трансформация элементов
      1. Функция rotate()
      2. Функция scale()
      3. Функция skew()
      4. Функция translate()
      5. Несколько значений свойства transform
      6. 3D-трансформации в CSS
    2. CSS3 transition: плавные переходы
      1. Свойство transition-property
      2. Свойство transition-duration
      3. Свойство transition-timing-function
      4. Свойство transition-delay
      5. Сокращенная запись transition
    3. CSS3-анимация
      1. Правило @keyframes
      2. Запуск анимации: аnimation-name и animation-duration
      3. Свойства animation-timing-function и animation-delay
      4. Свойство animation-iteration-count
      5. Свойство animation-direction
      6. Свойство animation-fill-mode
      7. Свойство animation-play-state
      8. Сокращенная запись animation
    4. Практика: создание CSS-анимации
  6. Таблицы и формы:
    1. Стилизация таблиц с помощью CSS
    2. CSS-стили для форм

Часть III. Разметка CSS

  1. Ширина веб-страницы
  2. Блочная верстка
  3. Создание разметки: основные правила
  4. Разметка с помощью float
    1. Проблемы float и их решения
  5. Верстка адаптивных веб-страниц
    1. Медиа-запросы CSS
    2. Гибкие сетки в CSS
    3. Адаптивные изображения и видео
  6. Знакомство с Flexbox
    1. CSS-свойства для flex-контейнера
    2. CSS-свойства для flex-элементов
  7. Позиционирование CSS. Свойство position
    1. Свойства top, left, bottom, right
    2. Z-index: наслаивание элементов
    3. Скрытие элементов средствами CSS
  8. Кратко о CSS Grid Layout
    1. CSS-свойства для grid-контейнера
    2. CSS-свойства для grid-элементов

Заключение. Рекомендации по CSS

idg.net.ua

Подборка материалов по HTML и CSS

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

 

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

Представляя собой исчерпывающий гайд по современным веб-стандартам. Эта книга будет полезна веб-разработчику любого уровня.

 

 

Поистине, незаменимое издание, которое должно быть настольной книгой всех современных веб-дизайнеров.

Одновременно с появлением стандарта CSS3 особенно остро встали проблемы кроссбраузерности и адаптивности сайтов. Богатая примерами и практическими советами, данная книга позволит веб-дизайнеру выйти на совершенно новый уровень разработки веб-сайтов, которые одинаково быстро работают в разных браузерах и выглядят привлекательно как с ПК, так и с мобильных устройств.

 

 

Веб-стандарты HTML5 и CSS3 постепенно вытесняют устаревающие технологии. Например, технологию Flash, до недавних пор весьма распространенный способ оживить веб-страницу и добавить ей интерактивности. Эта книга рассказывает о принципах работы с векторной графикой, аудио и видео без использования Flash. Также читателю будет наглядно продемонстрировано, как хранение данных на стороне клиента в автономном режиме кэширования может кардинально улучшить скорость загрузки веб-страниц и как в этом помогают простые решения, доступные в CSS3.

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

 

Одно из новейших изданий (книга опубликована 12 января 2017 года), освещающее все основные аспекты, необходимые для овладения инновационными технологиями веб-разработки.

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

 

Курс посвящен основным элементам страницы сайта: навигационным панелям, слайдерам, попап-уведомлениям и пр., и их эффективному использованию.

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

Подборка видеоуроков по jQuery — js-библиотеке, фокусирующейся на взаимодействии JavaScript с HTML5. Благодаря возможности jQuery получать доступ к любому элементу DOM, его содержимому и атрибутам, стало возможным программировать сложные манипуляции элементами и контентом веб-страницы. В данной серии уроков подробно рассматриваются такие примеры, как адаптивное меню, вкладки, всплывающие подсказки и др.

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

Краткий видеокурс по основам компонентов технологии HTML5. Введение, работа с DOM, псевдоклассы и использование импортов.

Объемный курс видеолекций по Bootstrap — простому и легко настраиваемому HTML, CSS и JS фреймворку, предназначенному для удобной веб-разработки.

10 вещей в HTML, о которых вы вряд ли знали

Почему CSS Grid лучше, чем фреймворк Bootstrap?

proglib.io