Шпаргалки CSS

CSS спецсимволы
CSS курсор
Цвета HTML
Горячие клавиши
HTML все теги
CSS псевдоэлементы
микроразметка microformats.org (микроформат)
микроразметка schema.org (микродата)

Текст

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 …;
none — отменяет маркер
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 Правило, записывается как селектор, внутрь которого помещаются селекторы последовательно определяющие состояние элемента в определённый момент

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

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%); Ретро

Flexbox

.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-контейнера

Рекомендую: Готовые HTML шаблоны на русском

Запись опубликована в рубрике Новости. Добавьте в закладки постоянную ссылку.
А так же:

1 комментарий на «Шпаргалки CSS»

  1. DARKINWORCER говорит:

    сколько полезностей для начинающих!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *