Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Веб программирование.Начало пути.doc
Скачиваний:
6
Добавлен:
01.04.2025
Размер:
8 Мб
Скачать
☆

Границы элементов

Свойство

Описание

border

Задает свойства границ элемента страницы: [{border-color}] [{bor­der-style}] [{border-width}]; Значение по умолчанию medium none.

border-color

Задает цвет: {border-top-color} [{border-right-color}] [{border-bot­tom-color}] [{border-left-color}];Может быть задано от одного до четырех значений. Если задано одно значение, оно применяется ко всем четырем границам. Если задано два значения, первое отно­сится к верхней и нижней границам, а второе - к левой и правой. Если задано три значения, то первое применяется к верхней гра­нице, второе - к левой и правой, третье - к нижней.

border-top-color

Задает цвет верхней границы элемента страницы: {Цвет};

border-bottom-color

Задает цвет нижней границы элемента страницы: {Цвет};

border-left-color

Задаёт цвет левой границы элемента страницы: {Цвет};

border-right-color

Задает цвет правой границы элемента страницы.

border-right-color: {Цвет};

border-style

Задает тип сразу всех границ элемента страницы. border-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset;

none – запрещает рисование границы; dotted – рисует точечную линию; dashed –штриховую линию; solid – сплошную линию; double – двойную сплошную линию; groove – трехмерную вдавленную границу; ridge – трехмерную выпуклую границу; inset – трехмерную "ступеньку вверх"; outset – рисует трехмерную "ступеньку вниз".

border-top-style

Задает тип верхней границы элемента страницы: none|dotted|dashed|solid|double|groove|ridge|inset|outset;

border-bottom-style

Задает тип нижней границы элемента страницы: none|dotted|dashed|solid|double|groove|ridge|inset|outset;

border-left-style

Задает тип левой границы элемента страницы: none|dotted|dashed|solid|double|groove|ridge|inset|outset;

border-right-style

Задает тип правой границы элемента страницы: none|dotted|dashed|solid|double|groove|ridge|inset|outset;

border-width

Задает толщину границ элемента страницы: {border-top-width} [{border-right-width}] [{border-bottom-width}] [{border-left-width}];

Если задано одно значение, оно применяется ко всем четырем гра­ницам. Если заданы два значения, первое относится к верхней и нижней границам, а второе - к левой и правой. Если задано три зна­чения, первое применяется к верхней границе, второе - к левой и правой, третье - к нижней. Толщина может быть задана числом или предопределенным значением : thin, medium, thick. Значение по умолчанию medium.

border-top-width

Задает толщину верхней границы элемента страницы.

border-top-width: medium|thin|thick|{Толщина};

border-bottom-width

Задает толщину нижней границы элемента страницы.

border-bottom-width: medium|thin|thick|{Толщина};

border-left-width

Задает толщину левой границы элемента страницы.

border-left-width: medium|thin|thick|{Толщина};

border-right-width

Задает толщину правой границы элемента страницы.

border-right-width: medium|thin|thick|{Толщина};

border-top

Задает все свойства верхней границы элемента страницы за один прием: [{border-top-color}] [{border-top-style}] [{border-top-width}];

Значение по умолчанию medium none.

border-bottom

Задает все свойства нижней границы элемента страницы: [{border-bottom-color}] [{border-bottom-style}] [{border-bottom-width}];

border-left

Задает все свойства левой границы элемента: [{border-left-color}] [{border-left-style}] [{border-left-width}];

border-right

Задает все свойства правой границы: [{border-right-color}] [{border-right-style}] [{border-right-width}];

Пример:

h1 {border-top-width: thin}

h1 {border-width: 5px}

border-top-color - указывает цвет верхней границы блока.

Пример:

p {border-top-color: black}

border-top-style - указывает стиль верхней границы блока.

Пример:

p {border-top-style: solid}

border-style - определяет стили всех границ блока. Если значение свойства одно, то значение применяется ко всем границам блока. В слу­чае двух значений первое задает стили верхней и нижней границы, а вто­рое – стили левой и правой границ. При указании четырех значений они применяются к верхнему, правому, нижнему и левому границам.

Пример:

<html>

<head>

<title> Использование стилей для отмены рамки изображений</title>

<style type="text/css">

img { border: none }

</style>

</head>

<body>

<img src=”image.gif”>

</body>

</html>