| 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-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 | Задает порядок расположения элементов в стеке |
Справочник свойств CSS | PROG-TIME
По началу мне, возможно как и вам, было тяжело найти полную информацию по CSS. Все справочники были не полными или с устаревшими свойствами. Я решил вам помочь, и собрал для вас полный справочник CSS. Справочник CSS включает в себя все актуальные, на данный, свойства. Рекомендую вам скачать данный материал и распечатать, что бы он бы всегда у вас под рукой, как это сделал я.
Всем привет. Я сделал справочник CSS. В него входят все свойства и их значения. Вы можете его распечатать, что бы он всегда был у вас под рукой. Так же я добавил документ со всей информацией в конце этого поста.
Cправочник CSS.
Flexbox
| Свойство | Описание | CSS |
|---|---|---|
| align-content | Задаёт вертикальное выравнивание flex-элементов для flex-контейнеров с многострочным содержимым. | 3 |
| align-items | Вертикальное выравнивание flex-элементов внутри flex-контейнера. | 3 |
| align-self | Вертикальное выравнивание flex-элемента. | 3 |
| flex | Определяет ширину, сжатие и растяжение для flex-элемента. | 3 |
| flex-basis | Указывает ширину для flex-элемента. | 3 |
| flex-direction | Направление расположения flex-элементов. | 3 |
| flex-flow | Направление расположения и возможность переноса для flex-элементов. | 3 |
| flex-grow | Определяет коэффициент растяжения flex-элемента. | 3 |
| flex-shrink | Определяет коэффициент сжатия flex-элемента. | 3 |
| flex-wrap | Определяет возможность переноса flex-элементов. | 3 |
| justify-content | Горизонтальное выравнивание flex-элементов. | 3 |
Как пользоваться справочником | 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, получаем механизм для динамического скрывания некоторого содержимого.
Бравый справочник css-свойств для новичка / Habr
Как новички изучают css-свойства? Они читают про все свойства, которые только есть, что-то запоминают, в основном только width, height и background, а потом постоянно рыщут по своим конспектам и гуглу, пытаются вспомнить какое свойство за что отвечает, как оно пишется и какие у него есть значения.И тут мне пришла в голову идея. А что если сделать такую штуку, которая наглядно показывает как пишутся и работают все css-свойства? Причем, все это на одной странице.
Таким образом, за два вечера создался вот такой css-помощник: lesson-web.ru/modules/css_helper
В левой части мы видим результат работы css-свойств, а справа, собственно, список css-свойств, которые мы можем увидеть в действии.
В окне результата у нас есть один, как будто бы, div с классом .box. Если установить свойство float, то в окне появится три одинаковых блока.
Также можно задать текстовое содержимое этого блока. Есть пять вариантов:
В блоке с css-свойствами мы можем:
- активировать или деактивировать свойство, кликнув по checkbox;
- задать значение свойства;
- понять свойство на простом русском языке
- если на сайте есть описание по данному свойству, то можно перейти по ссылке и более подробно изучить его.
Значение можно задать тремя способами:
- Просто ввести значение в input
- Если это цвет, то указать его на палитре
- Если у свойства если стандартный набор значений, то можно выбрать его из списка
Собственно, вот такая приятная мелочь получилась) Если у вас есть какие-то идеи как можно улучшить этот помощник, то с радостью почитаю их в комментариях!