( CSS )

Текст

Атрибут	Описание
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.webp);	Вставляет изображение в элемент;
background: #00ff00 url(images/im.webp) 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 …; none — отменяет маркер.
list-style-image: url(images/im.webp);	Устанавливает маркер-изображение;
list-style-position: inside;	Размещает маркер-изображение внутри блока списка;
list-style: square inside url(images/im.webp);	Сокращение записи для 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	Правило, записывается как селектор, внутрь которого помещаются селекторы последовательно определяющие состояние элемента в определённый момент

Добавление элементов без html

Атрибут	Описание
content:	Выводит на страницу элементы, которых нет в html коде. Применяется с псевдоклассами ::after и ::before
content:" "	В кавычки можно добавить текст и он будет выведен на страницу
content:attr( );	В скобки обычно добавляется спецсимвол html, изображение которого и выводится в начале или в конце элемента
content: url(images/1.webp);	Выводит картинку в начале или в конце элемента. Обычно маркер списка.