Содержание
Формирование таблицы стилей
/* Общий вид */ элемент { /* Свойства с единственным значением */ свойство: значение; /* Свойства с множеством значений */ свойстов2: значение1 значение2 ...; } /* Пример для body */ body { color: #111; /* Устанавливаем почти черный цвет для шрифта */ }
Свойства
Свойств в CSS очень много, тем более в CSS3, поэтому затронем только те, которые могут потребоваться в начале.
Чтобы не было недопониманий: очень хотелось бы сократить текст шпаргалки, поэтому определим понятия корневого свойства, префикса и постфикса для свойств. Префикс и постфикс имеют в себе знак-
Префикс
За корневое свойство для префикса берем width
, которое меняет ширину элемента. Выглядит оно так:
width
Префикс - то, что находится до корневого свойства (к примеру, max-
), значит полный вид свойства будет выглядеть так:
max-width
Постфикс
За корневое свойство для постфикса берем padding
. Изначально имеет вид:
padding
Постфикс - то, что находится после корневого свойства (к примеру, -left
), а значит имеет полный вид:
padding-left
Список некоторых свойств
width
иheight
- задают размеры элемента по ширине и высоте соответственно. Префиксы:min-
- как не трудно догадаться, минимальный размер элемента;max-
- максимальный размер элемента;
У любого видимого элемента HTML присутствуют:
Внешний отступ ------------------------------------------ | Внутренний отступ | | |------------------------------------| | | | Сам элемент | | <-- Рамка | |------------------------------------| | | | ------------------------------------------
Причем, эти отступы присутствуют со всех 4 сторон элемента: слева, сверху, справа, снизу.
margin
- внешний отступ от рамки элемента. Принимает от 1 до 4 значений размера. Постфиксы, принимают по 1 значению размера:-left
- отступ слева;-top
- отступ сверху;-right
- отступ справа;-bottom
- отступ снизу;
border
- задает размер, тип и цвет рамки вокруг элемента. Постфиксы такие же, как иmargin
, но принимают обязательно 3 значения:<размер> <тип_линии> <цвет_линии>
;padding
- внутренний отступ от рамки элемента. Принимает от 1 до 4 значений размера. Постфиксы такие же, как иmargin
.box-sizing
- свойство указывает, относительно чего задавать размер элемента. Свойство принимает значения:border-box
- размер задается относительно рамки;background
- задает цвет или изображение заднего фона элемента:-color
- цвет;-image
- изображение, имя файла указывается функциейurl(«img.png»)
. Если свойство задано, то становятся доступны постфиксы еще постфиксы (без-image
);-repeat
- указывает, как будет повторяться изображение:no-repeat
- не повторять изображение ни по каким осям;repeat-x
- повторяет изображение (если его размер меньше ширины родительского элемента) по горизонтали;repeat-y
- пщвторяет изображение (если его размер меньше высоты родительского элемента) по вертикали;
-position
- позиция изображения;-size
- размер изображения;
color
- цвет переднего плана (текста);font
- свойство для шрифтов:-family
- ;-size
- размер шрифта;-weight
- начертание шрифта;
display
- ;position
- ;overflow
- как отображать дочерние элементы, если они имеют размер больше родительского (если родительский элемент имеет фиксированную ширину и высоте):-x
- по X оси (ширине);-y
- по Y оси (высоте);
z-index
- «поднимает» элемент над всеми остальными. Большее значение - выше, меньшее - ниже.
Значения свойств
Размеры
Применяются на данный момент
px
- в пикселях;vw
иvh
- размер в процентах относительно размера окна браузера;%
- размер в процентах относительно родительского элемента или шрифта (в случае шрифтов очень схоже поведение сem
);em
- относительная единица, высчитывается относительно высоте текущего размера шрифта, где1em
- 100% от размера текущего шрифта;ex
- относительная единица, высчитывается относительно высоте символаx
текущего размера шрифта;ch
- относительная единица, высчитывается относительно высоте символа0
текущего размера шрифта;
rem
- .
Считаются устаревшими
Данные размеры счиатются устаревшими по той причине, что их размер фиксированно высчитывается относительно размеру пикселя и н
pt
- в типографских пунктах (4/3 px), считается устаревшим;pc
- в типографской пике (16 px), аналогично пунктам - устаревшее;cm
- в сантиметрах, устаревшее (38 px);mm
- в милиметрах, устаревшее;in
- в дюймах, устаревшее;
Цвета
По названию цвета
По hex-значению (16-ричное значение)
Цвет задается цифрой в шестнадцатиричном формате (hex)
#rgb, #rrggbb, #rrrgggbbb где r, g и b - число от 0 до 9, A, B, C, D, E, F; r - значение светлоты красного цвета, g - значение светлоты зеленого, b - значение светлоты синего.
Путем смешивания красного, зеленого и синего цветов, светлоты (яркости) каждого из них, можно получить и другие цвета.
RGB
Цвет задается в формате RGB (red - красный, green - зеленый, blue - синий), где эти цвета смешиваются и дают определенные оттенки. Значение каждого аргумента задается числом в диапазоне от 0 до 255.
color: rgb(0, 255, 128);
RGBA
Принцип примерно такой же, как и у RGB, только добавлен альфа-канал (прозрачность). Значение прозрачности в диапазоне от 0 до 1 (0 - полностью прозрачный, 1 - непрозрачный).
color: rgba(0, 0, 0, 0.25);
HSL
HSLA