Приглашаем посетить

Фет (fet.lit-info.ru)

Границы

Методика форматирования Web-страниц и размещения на них содержимого в отведенном для этого пространстве описывается в CSS в виде пространственной модели (Box Formatted Model). Согласно этой модели, пространство, в терминологии создателей CSS - бокс (box), в котором размещено содержимое или часть содержимого Web-страницы (тексты, изображения), можно представить в виде объекта, обладающего набором специфических характеристик. Необходимо подчеркнуть, что боксом считается не страница или ячейка таблицы, а лишь пространство, отведенное для содержимого или определенной его части. Формально каждый бокс имеет ядро, представляющее собой содержательную часть страницы или ячейки таблицы, и набор окружающих ядро элементов, характеристики которых определяют внешний вид бокса. Под последними понимаются поля отступа, бордюры и т. д.

Ширина бокса состоит из суммы ширин собственно содержимого, отступов (Padding), бордюра (Border) и величины полей (Margin). Параметры, определяющие размеры каждого из этих элементов, задаются отдельно в зависимости от желания авторов Web-страниц. Из тех же слагаемых складывается и высота бокса. Высота же собственно содержимого - это просто расстояние между его верхней и нижней границами. Так, если содержимое - текст, то это будет расстояние между самой высокой точкой в верхней строке и самой низкой в нижней. Поскольку содержимое размещается внутри бокса, то верхнюю границу содержимого мы назовем верхней внутренней границей бокса (Inner Top), а нижнюю - нижней внутренней границей (Bottom Top). Таким же образом вычисляется и длина содержимого. Принимая во внимание сказанное выше, увидим, что внешний край бокса охватывает все элементы, составляющие бокс, а внутренним краем бокса охвачено только содержимое.

Разобравшись в некоторых тонкостях терминологии, обратимся к методам изменения свойств элементов бокса. Заметим, что каждому из элементов можно присвоить те или иные параметры, неизменным останется лишь фон полей - они всегда прозрачные. Ниже будут рассмотрены примеры назначения стиля и размеров элементам, составляющим бокс. Во многом методы указания стиля похожи - можно указать стиль или размеры для любой из четырех сторон элементов, составляющих окружение содержимого бокса, предусмотрена сокращенная форма записи. Впрочем, обо всем по порядку.

Стиль бордюра

Определенный стиль можно задать как для всего бордюра, так и для каждой из его четырех сторон по отдельности. Общий стиль задается в соответствии с синтаксисом

{border-style: значение}

В приведенном ниже примере стилевое решение задано отдельно для вертикальных и горизонтальных частей бордюра:

<html>

<head>

<title>рисунок 2</title>

</head>

<body>

<tr>

<p style="border-style:solid double;border-width:10pt; border-color:blue">Стиль solid для горизонтальных частей.<br>

Стиль double для вертикальных частей</p>

</td></tr>

</table>

</body>

</html>

В данном случае для горизонтальных частей бордюра задан стиль solid, для вертикальных - double. В строке

они идут по порядку: сначала solid для горизонтальных полос, затем double - для вертикальных.

Выделить какую-либо одну из сторон бокса можно, назначив специфический стиль для нее. Делается это в соответствии со следующими вариантами синтаксиса:

{border-top-style: значение} - для верхней части бордюра;

{border-bottom-style: значение} - для нижней части бордюра;

{border-right-style: значение} - для правой части бордюра;

{border-left-style: значение} - для левой части бордюра.

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

<p style="border-top-style: ridge; border-width:12pt; border-color:yellow" >Стиль ridge для <br> верхней части бокса.</p>

Ширина бордюра

Задание ширины бордюра нам уже встречалось в примерах выше. Делается это в соответствии с синтаксисом

{border-widht: значение}

Указать ширину бордюра можно как в общеупотребительных единицах измерения - пикселах (px), дюймах (in) или сантиметрах (cm), так и в типографских - пунктах (pt) и приведенных эквивалентах (размер буквы "m" употребляемого шрифта, em). Кроме того, для задания ширины бордюра используются три фиксированных значения:

thin

medium

thick

Ниже приведен код, где употребляются все три значения:

<p style="border-style: solid; border-width:thin; border-color:red" >Стиль бокса solid<br> ширина - thin.</p>

</td></tr>

<p style="border-style: solid; border-width:medium; border-color:red" >Стиль бокса solid<br>

ширина - medium.</p>

</td></tr>

<p style="border-style: solid; border-width:thick; border-color:red" >Стиль бокса solid<br>

ширина - thick.</p>

</td></tr>

</table>

Как и стиль, ширину бордюра можно указывать отдельно для каждой из четырех сторон. Синтаксис указания ширины в этом случае будет выглядеть следующим образом:

{border-top-width: значение} - для верхней части бордюра;

{border-bottom-width: значение} - для нижней части бордюра;

{border-right-width: значение} - для правой части бордюра;

{border-left-width: значение} - для левой части бордюра.

Используя синтаксис

{border-widht: значение}

можно для назначения ширины бордюра употреблять сокращенную форму записи. Принцип такой же, как и при указании стиля для каждой из сторон бордюра - указывается необходимое число значений, по одному для каждой стороны, для которой назначается соответствующая ширина. Так, например, в случае

<p style="border-width: thin thick">Ширина - thin<br></p>

указаны два значения. Браузер, поддерживающий спецификации CSS, интерпретирует эти указания следующим образом:

Цвет бордюра

Основываясь на тех же принципах, что и выше, назначаем цвет бордюра. Указывается он в соответствии с синтаксисом

{border-color: значение},

как это и сделано в примере

<p style="border-style: solid;

border-width:thick;

border-color:green">

Бордюр зеленого цвета<br>

для всего бокса.</p>

Существуют и варианты для каждой из частей бордюра в отдельности:

{border-top-color: значение} - для верхней части бордюра;

{border-bottom-color: значение} - для нижней части бордюра;

{border-right-color: значение} - для правой части бордюра;

{border-left-color: значение} - для левой части бордюра.

Задание цвета, как мы видим, не сложнее указания прочих свойств бордюра, хотя и не лишено определенных тонкостей. Последние связаны с особенностями воспроизведения цвета на компьютерах пользователей. Дело в том, что составные цвета, не входящие в число шестнадцати базовых, часто не могут быть корректно воспроизведены, если применяются для создания трехмерных бордюров. Ниже приведен пример того, как выглядит один и тот же цвет - coral (255,127,80), будучи использован для создания трехмерного и обычного бордюров. Вот код примера:

<html>

<head>

<title>рисунок 6</title>

</head>

<body>

<tr>

<p style="border-style: ridge;

border-width:12pt;

border-color:coral">Бордюр ridge<br>

для всего бокса.</p>

</td></tr>

<tr>

<p style="border-style: solid;

border-width:12pt;

border-color:coral">Бордюр solid<br>

для всего бокса.</p>

</td></tr>

</table>

</body>

</html>

Избежать подобных недоразумений можно двумя способами. Первый - тщательно подбирать цвета, тестируя возможные варианты воспроизведения того или иного цвета. Второй - не обращаться к составным цветам, а при невозможности отказаться от них не применять трехмерных бордюров.

Сокращенная запись

Как и многие другие способы придания элементам Web-страниц определенного стиля, параметры, описывающие задание стиля для бордюра, допускают сокращенную запись. В данном случае такая запись параметров выглядит следующим образом:

<p style="border: solid thick green">Зеленый бордюр<br>

для всего бокса.</p>

Как видно из примера, три свойства, задающие стиль бордюра, его ширину и цвет, свелись к одному - border, а три соответствующих значения пишутся через пробел.

Отступ

Как в действующей первой версии спецификации CSS, так и в еще не утвержденной второй предусмотрена возможность регулировать величину отступа между содержимым и бордюром, если таковой имеется. Этой простой на вид функцией не стоит пренебрегать, так как с ее помощью можно, например, менять положение текста относительно краев страницы или ячейки таблицы, не прибегая к жестко заданному выравниванию.

Методы указания отступа практически не отличаются от методов задания любого другого параметра бокса. Синтаксис назначения отступа:

{padding: значение}

Значение может быть указано как в традиционных единицах измерения, так и в процентах.

Пример:

<html>

<head>

<title>рисунок 7</title>

</head>

<body>

<tr>

<p style="border: solid thick green;

padding-left:25%">Зеленый бордюр<br>

для всего бокса.<br>Отступ задан<br>в процентах</p>

</td></tr>

</table>

</body>

</html>

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

{padding-top: значение} - отступ сверху;

{padding -bottom: значение} - отступ снизу;

{padding -right: значение} - отступ справа;

{padding -left: значение} - отступ слева.

Аналогично рассматривавшимся выше способам указания ширины бордюра предусмотрена сокращенная запись величины отступа, когда свойству padding придаются одно, два, три или четыре значения. Смысл этой методики раскрыт в табл. 3.

В примере мы укажем два значения:

<html>

<head>

<title>рисунок 8</title>

</head>

<body>

<tr>

<p style="border: solid thick green;

padding:10pt 40pt">Зеленый бордюр<br>

для всего бокса.<br>Отступ сверху<br>и снизу</p>

</td></tr>

</table>

</body>

</html>

Результат исполнения кода - на рис 8.

Поля

Поля являются последним, самым удаленным от содержимого элементом, формирующим бокс. Поле - расстояние между бордюром и сторонами страницы или ячейки таблицы. Синтаксис, точнее, синтаксисы его задания похожи на синтаксисы задания элементов, рассмотренных выше:

{margin: значение}

Величину полей можно задать отдельно для каждой из четырех сторон бокса. Для этого применяются специальные свойства, аналогичные тем, что мы видели для других элементов бокса:

{margin-top: значение} - поле сверху;

{margin -bottom: значение} - поле снизу;

{margin -right: значение} - поле справа;

{margin -left: значение} - поле слева.

В примере, приведенном ниже, поля отложены слева от бордюра (ширина полей задана в пунктах, но может быть задана и в процентах):

<html>

<head>

<title>рисунок 9</title>

</head>

<body>

<tr>

<div style="border: solid thick green;

margin-left: 50pt">Зеленый бордюр<br>

для всего бокса.<br>Поля слева</div>

</td></tr>

</table>

</body>

</html>

Пространство,

выделенное под содержимое

Кроме регулирования параметров окружения содержимого, имеется возможность в явном виде отводить площадь для того или иного содержимого. Для этого указываются размеры прямоугольника, в который должно "вписаться" содержимое:

{width: значение}

{heigth: значение}

Значения могут быть заданы явным образом (абсолютно - в привычных единицах измерения, относительно - в процентах) или автоматически. В последнем случае под содержимое отводится столько места, сколько оно может занять. В примере мы задаем параметры отведенного пространства, указывая ширину в процентах, высоту - в пикселах.

<html>

<head>

<title>рисунок 10</title>

</head>

<body>

<tr>

<div style="border: solid thick green;

width: 50%; height: 70px">Зеленый бордюр<br>

для всего бокса.</div>

</td></tr>

</table>

</body>

</html>

[Содержание]