Фон
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.
|
