Шпаргалки CSS

html
спецсимволы
псевдоэлементы
микроразметка 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;      — цвет текста;

Шрифт

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      — поворачивает, сдвигает, наклоняет и масштабирует элемент.

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

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

  1. DARKINWORCER говорит:

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

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

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