Шпаргалки 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 не будет опубликован. Обязательные поля помечены *