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

Свойство	Описание
border	Задает все свойства границ элемента страницы. Заменяет атрибуты border-color, border-style и border-width. border: [{border-color}] [{border-style}] [{border-width}]; Значение по умолчанию medium none.
border-color	Задает цвет всех границ элемента страницы. Заменяет атрибуты border-top-color, border-right-color, border-bottom-color и border-left-color. border-color: {border-top-color} [{border-right-color}] [{border-bottom-color}] [{border-left-color}]; Может быть задано от одного до четырех значений. Если задано одно значение, оно применяется ко всем четырем границам. Если задано два значения, первое относится к верхней и нижней границам, а второе - к левой и правой. Если задано три значения, то первое применяется к верхней границе, второе - к левой и правой, третье - к нижней.
border-top-color	Задает цвет верхней границы элемента страницы. border-top-color: {Цвет};
border-bottom-color	Задает цвет нижней границы элемента страницы. border-bottom-color: {Цвет};
border-left-color	Ззадает цвет левой границы элемента страницы. border-left-color: {Цвет};
border-right-color	Задает цвет правой границы элемента страницы. border-right-color: {Цвет};
border-style	Задает тип сразу всех границ элемента страницы. Заменяет атрибуты border-top-style, border-right-style, border-bottom-style и border-left-style. border-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset; none – запрещает рисование границы (значение по умолчанию); dotted – рисует точечную линию; dashed – рисует штриховую линию; solid – рисует сплошную линию; double – рисует двойную сплошную линию; groove – рисует трехмерную вдавленную границу; ridge – рисует трехмерную выпуклую границу; inset – рисует трехмерную "ступеньку вверх"; outset – рисует трехмерную "ступеньку вниз".
border-top-style	Задает тип верхней границы элемента страницы. border-top-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset;
border-bottom-style	Задает тип нижней границы элемента страницы. border-bottom-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset;
border-left-style	Задает тип левой границы элемента страницы. border-left-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset;
border-right-style	Задает тип правой границы элемента страницы. border-right-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset;
border-width	Задает толщину всех границ элемента страницы. 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|{Толщина}; Толщина может быть задана числовым значением или thin, medium, thick.
border-bottom-width	Задает толщину нижней границы элемента страницы. border-bottom-width: medium|thin|thick|{Толщина}; Толщина может быть задана числовым значением или thin, medium, 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. 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-bottom: [{border-bottom-color}] [{border-bottom-style}] [{border-bottom-width}];
border-left	Задает все свойства левой границы элемента. Заменяет атрибуты border-left-color, border-left-style и border-left-width. border-left: [{border-left-color}] [{border-left-style}] [{border-left-width}];
border-right	Задает все свойства правой границы. Заменяет атрибуты border-right-color, border-right-style и border-right-width. border-right: [{border-right-color}] [{border-right-style}] [{border-right-width}];

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

Пример:

h1 {border-top-width: thin}

border-bottom-width - определяет размер нижней границы блока. По умолчанию значением данного свойства является средняя толщина границы.

border-left-width - указывает размер левой границы блока. По умолчанию значением данного свойства является средняя толщина границы.

border-right-width - задает размер правой границы блока. По умолчанию значением данного свойства является средняя толщина границы.

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

Пример:

h1 {border-width: 5px}

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

Пример:

p {border-top-color: black}

border-bottom-color - задает цвет нижней границы блока.

border-left-color - определяет цвет левой границы блока.

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

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

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

• none – граница отсутствует.

• hidden – граница скрыта.

• dotted – граница отображается пунктирной линией.

• dashed – граница выводится штрих-пунктирной линией.

• solid – граница отображается сплошной линией.

• double – граница отображается двумя непрерывными линиями.

• groove – граница отображается вдавленной линией.

• ridge – граница выводится выпуклой линией.

• inset – блок представляется вдавленным.

• outset – блок отображается выпуклым.

Пример:

p {border-top-style: solid}

border-bottom-style - задает стиль нижней границы блока.

border-left-style - определяет стиль левой границы блока.

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

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

Пример:

<html>

<head>

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

<style type="text/css">

img { border: none }

</style>

</head>

<body>

<img src=”image.gif”>

</body>

</html>

Визуальное форматирование

Свойства правил визуального форматирования, позволяют нужным образом расположить фрагменты Web-страницы в окне браузера.

position - определяет способ позиционирования блока на странице. По умолчанию HTML-элементы отображаются браузером последовательно в порядке их расположения в HTML-документе с учетом положения элементов в структуре документа. Значениями свойства position могут быть:

static – блок позиционируется в соответствии с естественным потоком отображения элементов. Это значение задается по умолчанию.

relative – определяет смещение блока относительно его естественного положения в потоке отображения элементов.

absolute – удаляет блок из естественного потока отображения и размещает блок на странице произвольным образом.

top - указывает смещение верхнего края блока относительно верхнего края родительского элемента.

bottom - задает смещение нижнего края блока относительно нижнего края родительского элемента.

left - определяет смещение левого края блока относительно левого края родительского элемента.

right - указывает смещение правого края блока относительно правого края родительского элемента.

Пример:

<img src=”img.gif” style=”position: absolute; top: 30px; bottom: 30px; left: 30px; right: 30px;”>

float - изменяет положение блока. Значениями свойства могут быть: left – блок смещается влево, а его содержимое отображается вдоль правой стороны блока; right – блок перемещается вправо, а его содержимое выводится вдоль левой стороны блока; none – блок не смещается.

Пример:

<html>

<head>

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

<style type="text/css">

. letter {

font-size: 150%; /* Размер шрифта буквицы */

float: left; /* Выравнивание по левому краю */

color: green; /* Цвет буквицы */

padding: Зрх /* Отступ между буквицей и текстом */

}

</style>

</head>

<body>

<span class=”letter”>Б</span>уквица

</body>

</html>

clear - указывает стороны блока, где плавающие элементы не ставятся. По умолчанию плавающие элементы устанавливаются на всех сторонах. Значениями свойства могут быть:

left – все плавающие элементы на левой стороне блока будут опущены вниз.

right – все плавающие элементы на правой стороне блока будут опущены вниз.

none – плавающие элементы устанавливаются на всех сторонах блока.

Пример:

h1 {float: left }

width - указывает ширину блока содержимого элемента. По умолчанию ширина блока вычисляется браузером автоматически.

Пример:

p {width: 100px}

height -определяет высоту блока содержимого элемента. По умолчанию высота блока вычисляется браузером автоматически.

Пример:

p {height: 100px}