Шпаргалки 
Текст
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; — цвет текста;
Шрифт
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;
Ширина и высота
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: 50px; — отступ сверху;
left: 50px; — отступ слева;
position: relative; — применяется к элементу, относительно которого позиционируется другой элемент;
overflow: auto; — при необходимости добавляет полосу прокрутки в блок с контентом;
visibility: hidden; — делает элемент невидимым, но сохраняет занимаемое им место;
display: none; — временно удаляет элемент со страницы, и другие элементы могут занять его место;
x-index: ; — накладывает элементы друг на друга по оси х;
y-index: ; — накладывает элементы друг на друга по оси у;
z-index: ; — накладывает элементы друг на друга по оси z;
float: right; — задаёт обтекание слева;
float: left; — задаёт обтекание справа;
clear: both; — запрещает обтекание;
clip: rect(10px,50px); — обрезает изображение квадратом;
transform — поворачивает, сдвигает, наклоняет и масштабирует элемент.
Информация взята с этого ресурса!
https://starper55plys.ru/bez-rubriki/shpargalki-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; — цвет текста;
Шрифт
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;
Ширина и высота
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: 50px; — отступ сверху;
left: 50px; — отступ слева;
position: relative; — применяется к элементу, относительно которого позиционируется другой элемент;
overflow: auto; — при необходимости добавляет полосу прокрутки в блок с контентом;
visibility: hidden; — делает элемент невидимым, но сохраняет занимаемое им место;
display: none; — временно удаляет элемент со страницы, и другие элементы могут занять его место;
x-index: ; — накладывает элементы друг на друга по оси х;
y-index: ; — накладывает элементы друг на друга по оси у;
z-index: ; — накладывает элементы друг на друга по оси z;
float: right; — задаёт обтекание слева;
float: left; — задаёт обтекание справа;
clear: both; — запрещает обтекание;
clip: rect(10px,50px); — обрезает изображение квадратом;
transform — поворачивает, сдвигает, наклоняет и масштабирует элемент.
Информация взята с этого ресурса!
https://starper55plys.ru/bez-rubriki/shpargalki-css/
0 
2 
1  |  |  |
Комментарии (11)
ответил Suka_Love
да и причем тут стиль и пых уроки
Вы правы! Но тема всё же стОящая - нужно будет создать отдельный раздел и переместить эту тему туда. Ну и дополнить собственными шпаргалками 
0 
ответил Suka_Love
Для таблицы сие использовал. Прописывая стили в голове страницы. Ибо align:center не работает в head / style...
0 ответил Suka_Love
В частности для таблицы использую margin:auto, в остальных вариантах: текст и прочее - align:center
0 
Для добавления комментариев необходимо авторизоваться
Шпаргалки 
Повелители стихий
Первая коллекционная карточная игра с уникальной...
