Фон элемента

VI. Одновременное задание атрибутов рамки

Рамки

Лекция № 3

РАМКИ. ФОН ЭЛЕМЕТА

I. Тип линии рамкиможно задать при помощи атрибутов:

1. border-left-style -левая линия;
2. border-right-style -правая линия;
3. border-top-style -верхняя линия;
4. border-bottom-style -нижняя линия.

II.Значения атрибутов border-left-style, border-right-style, border-top-style, border-bottom-style:

1. none – линия не отображается;
2. solid – линия отображается сплошной линией;
3. dotted – пунктирная линия;
4. dashed– штриховая линия;
5. double–двойная линия;
6. groove– вдавленная рельефная линия;
7. ridge– выпуклая рельефная линия;
8. inset– весь блок элемента отображается как будто он вдавлен в лист;
9. outset– весь блок элемента отображается как будто он выдавлен из листа.

III. Толщину линии рамкиможно задать при помощи атрибутов:

1. border-left-width - левая линия;
2. border-right-width - правая линия;
3. border-top-width - верхняя линия;
4. border-bottom-width - нижняя линия.

IV. Значения атрибутов:

1. Абсолютное значение: table { border-left-width: 5px; border-right-width: 5px; border-top-width: 0; border-bottom-width: 10px }
2. Одно из предопределенных значений: thin – тонкая линия; medium– средняя толщина линии; thick – толстая линия: table { border-left-width: medium; border-right-width: medium; border-top-width: thin; border-bottom-width: thick }

Эти атрибуты могут быть объединены в одном атрибуте border-width:

border-width: <top> <right> <bottom> <left>

V. Цвет линии рамки можно задать при помощи атрибутов:

1. border-left-color -левая линия;
2. border-right-color -правая линия;
3. border-top-color -верхняя линия;
4. border-bottom-color -нижняя линия

Пример: table {border-left-color: red; border-right-color: #000080; border-top-color: green; border-bottom-color: black}

Эти атрибуты можно объединить в один атрибут border-color.

Если атрибуты рамки одинаковы для всех ее сторон, можно задать их в одном атрибуте border: border: <стиль> <толщина> <цвет>

Поскольку значение атрибута однозначно определяет, к какому именно компоненту он относится, то их можно указывать в произвольном порядке: td { border: red thin solid}

1. background-color - цвет фона: body { background-color: green }
2. transparent - означает, что фон прозрачный: td { background-color: transparent }
3. background-image - URL-адрес изображения, которое будет использоваться в качестве фонового рисунка.
1. none – означает, что фоновая заливка отключена: body { background-image: none}
2. body { background-image: url(“pict.jpg”)}