| Значение | Описание |
|---|---|
| text-align: center; | Выравнивание текста по центру; |
| text-align: left; | Выравнивание текста по левому краю; |
| text-align:right; | Выравнивание текста по правому краю; |
| text-decoration: none; | Текст без подчёркивания; |
| text-decoration: underline; | Подчёркнутый текст; |
| text-decoration: overline; | Черта над текстом; |
| text-decoration: line-through; | Зачёркнутый текст; |
| text-decoration: blink; | Мигающий текст; |
| text-transform: uppercase; | Делает все буквы заглавными; |
| text-transform: capitalize; | Делает все первые буквы заглавными; |
| text-indent: 30px; | Красная строка; |
| word-spacing: 30px; | Задаёт расстояние между словами; |
| letter-spacing:2px; | Задаёт расстояние между буквами; |
| line-height: 10px; | Задаёт фиксированную высоту строки; |
| direction: rtl; | Задаёт направление; текста справа налево. |
| color: #00ff00; | Цвет текста; |
| text-schadow: | Тень текста; |
| Значение | Описание |
|---|---|
| font-style: italic; | Шрифт курсив; |
| font-weight: bold; | Жирный шрифт; |
| font-weight: lighter; | Тонкий шрифт; |
| font-size: 16px; | Размер шрифта; |
| font-family: Georgia | Название шрифта; |
| font-variant: small-caps; | Делает все буквы прописными; |
| font:italic bold 16px Georgia; | Сокращение записи для свойства font |
| Значение | Описание |
|---|---|
| margin-top: 20px; | Внешний отступ сверху; |
| margin-right: 20px; | Внешний отступ справа; |
| margin-bottom: 20px; | Внешний отступ снизу; |
| margin-left: 20px; | Внешний отступ слева; |
| margin: 20px 20px 20px 20px; | Сокращённая запись для внешних отступов, первая цифра отступ сверху, и далее по часовой стрелке; |
| padding-top: 10px; | Внутренний отступ сверху; |
| padding-right:10px; | Внутренний отступ справа; |
| padding-bottom: 10px; | Внутренний отступ снизу; |
| padding-left: 10px; | Внутренний отступ слева; |
| padding: 10px 10px 10px 10px; | Сокращение записи для свойства padding, расположение аналогично margin |
| Значение | Описание |
|---|---|
| background-color: #00ff00; | Цвет фона элемента; |
| background-position: center; | Размещает фоновое изображение по центру; |
| background-position: 100px 150px; | Размещает фоновое изображение, первая цифра — отступ сверху (top), вторая — отступ слева left; |
| background-repeat:repeat; | Изображение повторяется пока не займёт всё пространство блока; |
| background-repeat: no-repeat | Изображение не повторяется; |
| background-repeat:repeat-y | Изображение повторяется по вертикали; |
| background-repeat:repeat-x; | Изображение повторяется по горизонтали; |
| background-attachment: fixed; | Изображение фиксируется и остаётся на месте при прокрутке страницы; |
| background-image:url(images/im.png) | Вставляет изображение в элемент; |
| background: #00ff00 url(images/im.png) no-repeat fixed center; | Сокращение записи для background; |
| background-size: | Масштабирует фоновое изображение; |
| Значение | Описание |
|---|---|
| width: 100px; | Ширина элемента; |
| min-width: 100px; | Минимальная ширина элемента; |
| max-width: 100px; | Максимальная ширина элемента; |
| height: 100px; | Высота элемента; |
| min-height: 100px; | Минимальная высота элемента; |
| max-height: 100px; | Максимальная высота элемента; |
| Значение | Описание |
|---|---|
| border: 3px; | Рамка элемента; |
| border-color:#ff0000; | Цвет рамки; |
| border-style: solid; | Стиль рамки; |
| border: 5px solid #ff0000; | Сокращение записи для рамки; |
| outline: 5px solid #00FF00; | Задаёт рамку за внешней границей элемента; |
| border-radius: #00FF00 25px; | Создаёт рамку с закруглёнными углами вокруг элемента; |
| Значение | Описание |
|---|---|
| list-style-type: | Определяет вид маркера в списке |
| none | без маркера |
| circle | круг |
| disc | заполненный круг |
| square | квадрат |
| upper-alpha | A B C D … |
| upper-roman | I II III IV V … |
| lower-alpha | a b c d … |
| decimal-leading-zero | 01 02 03 04 … |
| list-style-image: url(images/im.png) | Устанавливает маркер-изображение |
| list-style-position: inside; | Размещает маркер-изображение внутри блока списка |
| list-style: square inside url(images/im.png); | Сокращение записи для list-style, square указывается на случай недоступности картинки |
| Значение | Описание |
|---|---|
| position: absolute; | Размещает элемент относительно границ экрана монитора. Применяется со свойствами: top:, left:, right:, bottom:, в которых указываются координаты позиционирования |
| position: relative; | Применяется к элементу, относительно которого позиционируется другой элемент; |
| position: fixed; | Фиксирует элемент в указанной части экрана. Элемент не реагирует на прокрутку |
| x-index: ; | Накладывает элементы друг на друга по оси х; |
| y-index: ; | Накладывает элементы друг на друга по оси у; |
| z-index: ; | Накладывает элементы друг на друга по оси z; |
| float: right; | Задаёт обтекание слева; |
| float: left; | Задаёт обтекание справа; |
| clear: both; | Запрещает обтекание; |
| clip: rect(10px,50px); | Обрезает изображение квадратом; |
| Значение | Описание |
|---|---|
| visibility: hidden; | Делает элемент невидимым, но сохраняет занимаемое им место; |
| display: none; | Временно удаляет элемент со страницы, и другие элементы могут занять его место; |
| display: block; | Делает элемент блочным; |
| display: inline; | Делает элемент встроенным; |
| display: inline-block; | Делает элемент встроенным, но с ддоступными свойствами блочного; |
| overflow: auto; | При необходимости добавляет полосу прокрутки в блок с контентом; |
| opacity: 0; | Делает элемент полностью прозрачным. Прозрачность уменьшается до значения 1; |
| Значение | Описание |
|---|---|
| transform | поворачивает, сдвигает, наклоняет и масштабирует элемент. |
| transform: scale(); | Масштабирует элемент по горизонтали и вертикали. Число в скобках больше единицы увеличивает; элемент, а меньше единицы — уменьшает |
| transform: scaleX(); | Масштабирует элемент по горизонтали; |
| transform: scaleY(); | Ьасштабирует элемент по вертикали |
| transform: skewX(); | Наклоняет элемент на заданный угол в скобках по вертикали влево, отрицательное значение — вправо |
| transform: skewY(); | Наклоняет элемент на заданный угол по горизонтали; |
| transform: translateX(); | Сдвигает элемент по горизонтали |
| transform: translateY(); | Сдвигает элемент по вертикали |
| transform: rotate(); | Поворот элемента вокруг центра на заданный угол |
| transform: rotateY(360deg); | Поворот элемента вокруг вертикальной оси. Применяется в 3D |
| transform: rotateX(360deg); | Поворот элемента вокруг горизонтальной оси. Применяется в 3D |
| transform: matrix() | Создаёт эффект отражения элемента |
| transform-style: preserve-3d | Создаёт 3D эффект |
| transform-origin: x y z; | Задаёт координаты точки относительно центра, вокруг которой будет вращаться элемент |
| transition-property: | Определяет свойство, которое будет анимироваться |
| transition-duration: | Продолжительность эффекта перехода |
| transition-timing-function: | Скорость эффекта перехода |
| transition-delay: | Задержка начала анимации |
| transition: left 3s ease; | Сокращение записи для transition |
| animation | Pадаёт параметры действия для анимации — длительность анимации, повторение, направление, тип движения, шаги. Работает со свойством @keyframes |
| animation-name | Имя анимации |
| animation-duration | Длительность анимации |
| animation-timing-function | Определяет вид анимации |
| animation-iteration-count | Задаёт число повторений анимации |
| Animation-direction | Задаёт направление движения |
| animation-delay | Задаёт задержку анимации перед началом воспроизведения |
| animation: nev 5s infinite alternate; | Сокращение записи для animation |
| @keyframes | Правило, записывается как селектор, внутрь которого помещаются селекторы последовательно определяющие состояние элемента в определённый момент |
| Значение | Описание |
|---|---|
| content: | Выводит на страницу элементы, которых нет в html коде. Применяется с псевдоклассами ::after и ::before |
| content:"" | В кавычки можно добавить текст и он будет выведен на страницу |
| content:attr(); | В скобки обычно добавляется спецсимвол html, изображение которого и выводится в начале или в конце элемента |
| content: url(images/1.png); | Выводит картинку в начале или в конце элемента. Обычно маркер списка. |
| Значение | Описание |
|---|---|
| columns: | Разделяет поле страницы на колонки |
| column-count: 3; | Количество колонок |
| column-width: 200px; | Ширина колонок |
| column-gap: 1-px; | Ширина пробела между колонками |
| column-span: all; | Указывает количество колонок, которые пересечёт элемент. Применяется обычно для заголовка. |
| column-rule-style: solid; | Создаёт вертикальную разделительную линию между колонками. |
| column-rule-width: 2px; | Ширина разделительной линии |
| column-rule-color: #999; | Цвет разделительной линии |
| column-rule: 2px solid #999; | Краткая запись разделительной линии |
| Значение | Описание |
|---|---|
| @media all{Таблица стилей} | Селекторы и свойства css заносятся в фигурные скобки и применяется ко всем типам носителей |
| @media screen and (){} | Экран монитора. В круглых скобках указываются дополнительные требования, например размер экрана |
| @media tv and (){} | Телевизор |
| @media print and (){} | Принтеры |
| @media handheld and (){} | Смартфоны |
| @media screen, handheld and (){} | Монитор и смартфон |
| @media screen and (max-width: 600px){} | Для моноторов с разрешением менее 600px |
| Значение | Описание |
|---|---|
| @charset «кодировка»; | Устанавливает кодировку для css файла |
| @import «имя файла» [типы носителей]; | Импортирует содержимое CSS-файла в текущую стилевую таблицу |
| Значение | Описание |
|---|---|
| filter: blur(3px); | Размытие |
| filter: brightness(70%); | Яркость |
| filter: contrast(50%); | Контрастность |
| filter: drop-shadow(2px 3px 5px blue); | Добавляет тень ко всем элементам |
| filter: grayscale(50%); | Обесцвечивание |
| filter: hue-rotate(70deg); | Изменяет цвета в зависимости от заданного угла в цветовом круге |
| filter: invert(100%); | Негатив изображения |
| filter: opacity(30%); | Прозрачность |
| filter: saturate(300%); | Насыщенность цвета. Меньше 100% — уменьшает насыщенность, больше 100% — увеличивает |
| filter: sepia(120%); | Ретро |
| Значение | Описание |
|---|---|
| .flex-container{} | Преобразует любой элемент во флекс-контейнер, а все дочерние элементы во флекс-элементы. Обязательное свойство display: flex; |
| justify-content: flex-start; | Дочерние элементы позиционируются от начала контейнера |
| justify-content: flex-end; | Дочерние элементы позиционируются от конца контейнера (справа) |
| justify-content: center; | Дочерние элементы позиционируются по центру контейнера |
| justify-content: space-between; | Элементы выравниваются по главной оси. Первый элемент располагается в начале контейнера, последний в конце, а все остальные равномерно располагаются на свободном пространстве между ними |
| justify-content: space-around; | Свободное пространство делится поровну между элементами, добавляя им отступы |
| justify-content: inherit; | Наследует родительское свойство |
| align-items: stretch; | Флекс элементы занимают всё пространство по высоте. |
| align-items: flex-start; | Все дочерние элементы выравниваются по левому краю и верхней границе flex-бокса |
| align-items: flex-end; | Элементы выравниваются по нижнему краю, относительно нижней границы flex-бокса |
| align-items: center; | Выравнивание по центру |
| align-items: baseline; | Выравнивание по базовой линии |
| align-items: inherit; | Наследует значение родителя |
| flex-direction: row; | Направление главной оси слева направо |
| flex-direction: row-reverse; | Направление главной оси справа налево |
| flex-direction: column; | Направление главной оси сверху вниз |
| flex-direction: column-reverse; | Направление снизу вверх |
| flex-wrap: nowrap; | Flex-элементы не переносятся и располагаются в одну строку слева направо |
| flex-wrap: wrap; | Элементы переносятся и располагаются в несколько рядов слева на право |
| flex-wrap: wrap-reverse; | Элементы переносятся и располагаются в обратном порядке. Перенос осуществляется снизу вверх |
| align-content: stretch; | Строки равномерно растягиваются, заполняя всё доступное пространство |
| align-content: flex-start; | Строки выравниваются по левому краю,относительно верхней границы |
| align-content: flex-end; | Строки выравниваются по левому краю, относительно нижней границы |
| align-content: center; | Выравнивание по центру |
| align-content: space-between; | Строки выравниваются по высоте, свободное пространство распределяется между ними |
| align-content: inherit; | Наследует значение родителя |
| order: -1 или 1; | Ставит любой flex-элемент в начало строки или в конец строки |
| flex-basis: 200px; | Ширина элемента задаётся во всех доступных в веб размерах |
| flex-basis: auto; | Элемент получает базовую ширину, соответствующую ширине контента |
| flex-grow: 1.0 ….; | Устанавливает коэффициент увеличения элемента |
| flex-shrink: 1.0 …; | Устанавливает коэффициент уменьшения элемента |
| align-self: auto; | Выравнивание отдельного элемента. По умолчанию задаётся выравнивание родителя |
| align-self: flex-start; | Отдельный элемент выравнивается по левому краю, относительно верхней границы |
| align-self: flex-end; | Выравнивается по левому краю, относительно нижней границы |
| align-self: center; | Выравнивается по центру |
| align-self: baseline; | Выравнивается по базовой линии слева |
| align-self: stretch; | Элемент растягивается на всю высоту flex-контейнера |
Справочники, инструменты, документация