Справочник 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