Документация



Фон

background-color

Задает цвет фона для элемента. Цвет можно задать тремя способами:

  • Можно задать название цвета, например red – красный, green – зеленый, yellow – желтый, blue – синий, black – черный, white – белый, transparent – прозрачный. Пример стиля: background-color: cyan
  • С помощью RGB составляющих. RGB – комбинация трех цветов: красного, зеленого и синего. Количество того или иного цвета можно задавать числом от 0 до 255. Вместо десятичных цифр можно задавать проценты. Пример: background-color: RGB(10, 30, 210).
  • Задание RGB цвета с помощью шестнадцатитеричного кода. Это наиболее популярный способ задания цвета у вебмастеров и по своей сути является аналогом второго способа записи. Пример: background-color: #FF0000. В данном примере задается красный цвет фона элемента. FF 00 00 – это последовательная запись RGB значений цвета в шестнадцатеричной форме, в данном случае, 255 0 0. При шестнадцатеричном способе задания цвета элементов обязательно нужно использовать значок «решетка» (#) перед значением цвета.

background-image

Задает картинку в качестве фона к элементу. Можно использовать jpg, png и gif изображения. Пример: background-image: url(#FILE(C:\clipart\cool_wallpaper.jpg)).

background-repeat

Задает способ повторения фонового изображения, заданного с помощью свойства background-image. Возможные значения:

  • no-repeat – изображение не должно повторяться;
  • repeat – изображение будет повторяться по вертикали и по горизонтали;
  • repeat-x – изображение будет повторяться только по горизонтали;
  • repeat-y – изображение будет повторяться только по вертикали.

Пример: background-repeat: no-repeat.



Границы

border-color

Задает цвет границы элемента. Способы задания цвета такие же, как и для элемента background-color. Пример: border-color: #FF45C1.

border-style

Задает стиль рамки вокруг элемента. Возможные значения:

dotted dashed solid double groove ridge inset outset

border-width

Задает толщину рамки вокруг элемента. Значение толщины как правило задается в пикселях (px). Пример: border-width: 2px.

Существуют также дополнительные свойства, которые расширяют возможности по заданию границ элементов. Можно задавать стиль, цвет и толщину, например, только для левой границы, верхней, нижней или правой. Возможно задать стиль, цвет и толщину в одном свойстве. Примеры:

  • border: 1px solid black – задает однопиксельную черную рамку вокруг элемента;
  • border-bottom: 2px dashed red – задает пунктирную нижнюю границу красного цвета толщиной 2 пикселя;
  • border-right-color: green – устанавливает зеленый цвет для правой границы элемента;
  • border-left-style: solid – задает сплошную левую границу для элемента;
  • border-top-width: 1px – задает тощину в 1 пиксель для верней границы элемента.



Цвет

color

Задает цвет элемента. Способы задания цвета описаны выше для background-color. Пример: color: #2345F1.



Параметры текста

font-family

Задает имя шрифта, которое будет использовано для оформления текста элемента. Можно указать несколько шрифтов, разделенных запятой. Пример: font-family: Verdana, Tahoma, sans-serif.

В качестве имени шрифта можно использовать универсальные названия семейств шрифтов:

  • Serif – шрифты с засечками (антиквенные);
  • Sans-serif – рубленные шрифты (без засечек);
  • Cursive – курсивные шрифты;
  • Fantasy – декоративные шрифты;
  • Monospace – моноширинные шрифты.

font-size

Задает размер шрифта текста элемента. Размер шрифта задают в абсолютных величинах: пикселях (px); и в относительных: в пунктах (pt) или процентах (%). Пример: font-size: 10pt.

font-style

Задает стиль начертания шрифта элемента. Возможны три варианта значения стиля: normal – обычное начертание текста (используется по умолчанию), italic – курсивное начертание, oblique – наклонный шрифт. Пример: font-style: italic.

font-weigth

Задает насыщенность шрифта. Возможные значения: bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900. Пример: font-weight: bold.



Отступы и поля

margin

Задает размер отступа от каждого края элемента. Размер отступа задают в абсолютных величинах: пикселях (px); и в относительных: в пунктах (pt) или процентах (%). Пример: margin: 10pt.

padding

Задает размер полей вокруг содержимого элемента. Размер полей задают в абсолютных величинах: пикселях (px); и в относительных: в пунктах (pt) или процентах (%). Пример: margin: 20px.

Для задания отступов и полей элементов можно использовать дополнительные свойства CSS. Так например, можно задавать отдельно поля и отступы для верхней, нижней, левой и правой сторон элемента:

  • margin-top: 5px – отступ в 5 пикселей от верха элемента;
  • margin-left: 10px – отступ в 10 пикслей с левой стороны элемента;
  • padding-bottom: 7pt – поле размером 7 пунктов между содержимым элемента и его нижней границей;
  • padding-right: 1px – поле размером в 1 пиксель между содержимым элемента и его правой границей.



Размеры

height

Задает высоту элемента. Высоту элемента задают в абсолютных величинах: пикселях (px); и в относительных: в пунктах (pt) или процентах (%). Пример: height: 50px.

width

Задает ширину элемента. Ширину элемента задают в абсолютных величинах: пикселях (px); и в относительных: в пунктах (pt) или процентах (%). Пример: width: 100px.