Пыльца сосны Россия
Инструкция
Все нюансы сборки, переработки, заготовки и применения.
-- Купить пыльцу высшего качества --

Шпаргалки 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.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-контейнера
Запись опубликована в рубрике Новости. Добавьте в закладки постоянную ссылку.
А так же:

5 комментариев на «Шпаргалки CSS, все свойства»

  1. Владислав говорит:

    Спасибо большое автору. Очень полезная информация. Благодарим за уделенное время данному материалу!

  2. Патрик говорит:

    Спасибо большое, сохранил, в pdf, потом ещё в закладки и теперь учу 🙂

  3. stariс говорит:

    Спасибо Таня. Это не антиспамбот, это червь, собственной персоной. Скажите пожалуйста, когда вы его заметили? Восстановлю копию из бекапа до того числа. Это, кстати, ещё одно достоинство хостинга. Даже если сайт взломают, в любой момент можно восстановить его из бекапа. Копии делаются почти каждый день. Выбираешь нужную дату и восстанавливаешь. Всё что было после этой даты стирается вместе со всеми троянами и прочей нечистью.

  4. Татьяна говорит:

    Спасибо за ценные советы. Я все ще раз продумаю, взвешу и возьму к сведению.

    отвечаю тут- так как по адресу https://starper55plys.ru/html/direktoria-sayta/ включился антиспамбот т коммент никак не отправляется.

    …… вот такое пишет
    Скопируйте в поле и нажмите кнопку Татьянаzvit328@gmail.com19700Отправить комментарий

  5. DARKINWORCER говорит:

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

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

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