CSS Cascading Style Sheets

Структура css селектор { свойство1: значение1; свойство2: значение2; }

Блочная модель

width ширина элемента Значения: абсолютные единицы проценты auto inherit

height высота элемента Значения: абсолютные единицы проценты auto inherit

min-height минимальная высота max-height максимальная высота min-width минимальная ширина max-width максимальная ширина Значения: абсолютные единицы проценты auto inherit

padding внутренний отступ Значения: абсолютные единицы проценты inherit

padding внутренний отступ Вариации: padding-top отступ сверху padding-right отступ справа padding-bottom отступ снизу padding-left отступ слева

padding внутренний отступ Формат записи: padding: 5px; - все стороны padding: 10px 5px; - сверху/снизу, по бокам padding: 4px 10px 15px; сверху, по бокам, снизу padding: 5px 10px 8px 12px; сверху, справа, снизу, слева

margin внешний отступ Значения: абсолютные единицы проценты inherit auto

margin внешний отступ Вариации: margin-top отступ сверху margin-right отступ справа margin-bottom отступ снизу margin-left отступ слева

margin внешний отступ Формат записи: margin: 5px; - все стороны margin: 10px 5px; - сверху/снизу, по бокам margin: 4px 10px 15px; сверху, по бокам, снизу margin: 5px 10px 8px 12px; сверху, справа, снизу, слева

border границы вокруг элемента Формат записи: border: border-width border-style border-color;

border-width толщина границ элемента Значения: абсолютные единицы проценты thin (2px) medium (4px) thick (6px) inherit

border-width толщина границ элемента Формат записи: border-width: 5px; - все стороны border-width: 10px 5px; - сверху/снизу, по бокам border-width: 4px 10px 15px; сверху, по бокам, снизу border-width: 5px 10px 8px 12px; сверху, справа, снизу, слева

border-style стиль границ элемента Значения: none hidden dotted dashed solid double

border-style стиль границ элемента

Формат записи: border-style: solid; - все стороны border-style: solid none; сверху/снизу, по бокам border-style: solid none dotted; сверху, по бокам, снизу border-style: solid none none dotted; сверху, справа, снизу, слева

border-color цвет границ элемента Значения: цвет transparent inherit

border-color цвет границ элемента Формат записи: border-color: #000; - все стороны border-color: #000 red; сверху/снизу, по бокам border-color: #fff #000 #00f; сверху, по бокам, снизу border-color: #fff #0f0 #00f #f00; сверху, справа, снизу, слева

border границы вокруг элемента Формат записи: border: border-width border-style border-color; border: 2px solid #ff0203;

border границы вокруг элемента Формат записи: border: border-width border-style border-color; border-top: 2px solid #ff0203; border-top-width: 2px; border-top-style: solid; border-top-color: #ff0203;

border-collapse склеивание границ

Значения: collapse склеиваение соседних границ separate разделение соседних границ

border-spacing расстояние между границами Формат записи: border-spacing: 3px; со всех сторон border-spacing: 3px 5px; сверху/снизу, слева/справа

border-radius радиус скругления Формат записи: border-radius: 3px; со всех сторон border-radius: 3px 5px; верхний левый/нижний правый, верхний правый/нижний левый border-radius: 3px 5px 1px; - верхний левый, верхний правый/нижний левый, нижний правый border-radius: 3px 2px 4px 1px; - верхний левый, верхний правый, нижний правый, нижний левый

border-radius радиус скругления

overflow отображение контента, не умещающегося в блок

Значения: visible отображается весь контент hidden контент не отображается scroll добавляется скролл auto добавляется скролл при необходимости inherit

overflow отображение контента, не умещающегося в блок Дополнительные свойства: overflow-x отображение по горизонтали overflow-y отображение по вертикали

background фон элемента Формат записи: background: background-attachment background- color background-image background-position background-repeat; CSS3: background: background1, background2, … ;

background-attachment прокрутка фона Значения: fixed scroll inherit

background-color цвет фона Значения: цвет transparent inherit

background-image фоновое изображение Значения: url('picture.gif') none inherit

background-position положение фона Формат записи: background-position: отступ_по_горизонтали отступ_по_вертикали;

background-position положение фона Значения: абсолютные значения проценты left / center / right top / center / bottom inherit

background-repeat повторение фона Значения: no-repeat не повторять фон repeat повторять repeat-x повторять по горизонтали repeat-y повторять по вертикали inherit

background-repeat повторение фона

position позиционирование Значения: absolute абсолютное relative относительное fixed фиксированное static стандартное inherit

position позиционирование Дополнительные свойства: position: absolute; /* или relative */ top: 10px; left: 30px; bottom: 5px; right: 10px;

z-index расположение по Z-оси Формат записи: z-index: число;

float обтекание элемента

Значения: left right none inherit

clear запрет обтекания элемента

Значения: left right both none inherit

display отображение элемента Значения: block inline inline-block none list-item

visibility видимость элемента Значения: visible hidden collapse inherit