Цвет и фон

color – определяет цвет текста

Пример: P {color: green}

background-color – определяет цвет фона элемента.

Пример: DIV {background-color: blue}

background-image: определяет фоновое изображение элемента

Пример: H1 {background-image: url(“texture2.gif”)}

background: Удобное свойство для установки сразу всех параметров фона. Если параметры пропущены, то их значения берутся по умолчанию.

Пример: P {background: blue url(texture2.gif) }

Шрифты

font-family – определяет семейство шрифта.

Пример: BODY {font-family: “Times Roman”, courier, serif}

font-style – определяет начертание шрифта

Значения:

italic – курсив;

oblique – наклонное начертание;

Пример: SPAN {font-style: italic}

font-variant – определяет, будет ли шрифт выведен в виде малых прописных букв.

Значения:

normal – обычное начертание;

small-caps – вывод шрифта в виде малых прописных букв

Пример: H4 {font-variant: small-caps}

font-weight – определяет толщину выводимого шрифта

Значения:

normal – обычная толщина;

bold – полужирный шрифт;

bolder – жирный шрифт;

lighter – светлый шрифт

100-900 – число, указывающее толщину шрифта (400-normal)

font-size – определяет высоту шрифта

Пример: BODY {font-size: 16pt}

font – Удобное свойство для установки сразу всех параметров шрифта. Если какие-либо параметры пропущены, то их значения берутся по умолчанию.

Значения:

font-style – начертание;

font-variant – вывод шрифта в виде малых прописных букв;

font-weight – толщина;

font-size – кегль;

line-height – высота между строк;

font-family – семейство шрифтов.

Пример: BODY {font: italic bold 16pt 110% arial Garamond sans-serif}

Блочная модель (такие элементы, как например, BODY, DIV, P)

margin-top, margin-right, margin-bottom, margin-left – устанавливает ширину поля для определенной стороны элемента.

Пример: P{margin-top: 20px}

margin – Удобное свойство для установки ширины полей сразу для всех сторон элемента. У этого свойства может быть от одного до четырех значений. Если имеется только одно значение, то оно будет присвоено сразу всем полям. Если два значения, то первое из них присваивается верхнему и нижнему полю, а второе – левому и правому. Если же три, то первое значение присваивается верхнему полю, второе – левому и правому, а третье – нижнему.

Значения: ширина верхнего поля;

ширина правого поля;

ширина нижнего поля;

ширина левого поля.

Пример: DIV {margin: 20px 30px 5px}

padding-top, padding-right, padding-bottom, padding-left – устанавливает ширину промежутка между содержимым элемента и определенным участком его границы

Пример: P {padding-top: 20px}

padding – Удобное свойство для установки ширины промежутка между содержимым элемента и его границей сразу для всех сторон элемента. Значения присваиваются аналогично элементу margin.

Пример: DIV {padding: 20px 30px 5px}

border-top-width, border-right-width, border-bottom-width, border-left-width - устанавливает ширину рамки для определенной стороны

Значения:

thin - рамка в виде тонкой линии;

medium – рамка в виде линии средней толщины;

thick – рамка в виде толстой линии;

числовое значение (px, %)

Пример: P {border-top-width: 10px}

border-width – Удобное свойство для установки ширины рамки сразу для всех сторон элемента.

Пример: DIV {border-width: 5px 8px 7px}

border-top-color, border-right-color, border-bottom-color, border-left-color - устанавливает цвет для определенной стороны

Пример: P{border-top-color: pink}

border-color – Удобное свойство для установки цвета рамки сразу для всех сторон элемента.

Значения задаются в следующей последовательности:

цвет верхней стороны;

цвет правой стороны;

цвет нижней стороны;

цвет левой стороны.

border-top-style, border-right-style, border-bottom-style, border-left-style – устанавливает стиль рамки для определенной стороны.

Значения:

none – линия отсутствует;

hidden – линия отсутствует, но для таблиц это значение действует по другому;

dotted – пунктирная линия;

dashed – штрих-пунктирная линия;

solid – сплошная непрерывная линия;

double –двойная непрерывная линия;

groove – трехмерная борозда;

ridge – трехмерный гребень;

inset – трехмерная врезка;

outset – трехмерный орнамент.

Пример: P{border-top-style: double}

border-style: удобное свойство для установки стиля рамки сразу для всех сторон. Может иметь от одного до четырех значений. Если одно значение, то оно присваивается сразу всем сторонам, если два, то первое значение - верхней и нижней стороне, второе левой и правой, если три, то первое присваивается верхней стороне, второе – левой и правой, третье – нижней.

Пример: DIV {border-style: double solid}

border-top, border-right, border-bottom, border-left – удобное свойство для установки нескольких свойств рамки для определенной стороны.

Значения задаются в следующем порядке:

ширина рамки;

стиль рамки;

цвет рамки.

Пример: P {border-top: thin double blue}

border – удобное свойство для определения рамки сразу со всех сторон элемента. Значения устанавливаются одинаковыми для всех его сторон.

Значения:

ширина рамки;

стиль рамки;

цвет рамки.

Пример: P {border: 4px solid red}

Дата добавления: 2015-10-02