Свойства блоков

14 15 16 17 18 19 20

Рамка – border –представляет собой видимый контур, для которого можно определять следующие характеристики:

· border-style:

o none – рамка отсутствует;

o dotted – точечная линия;

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

o solid – сплошная линия;

o double – двойная линия;

o groove – вдавленная линия в виде желобка;

o ridge – выпуклая линия в виде конька крыши;

o inset – содержимое элемента вдавлено в плоскость страницы;

o outset – содержимое элемента возвышается над плоскостью страницы.;

· border-width – определяет толщину рамки, для чего используются линейные единицы измерения CSS, а также следующие ключевые слова:

o thin – тонкая рамка;

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

o thick – толстая рамка;

· border-color – свойство определяет цвет рамки и может принимать значения тех же самых типов, которые возможны для свойства color.

Свойство border может быть задано в обобщенной форме. Обобщенное свойство border задает оформление рамки одинаковое с четырех сторон. Можно изменить эти характеристики, применяя свойства border-top, border-bottom, border-left, border-right, позволяющие воздействовать соответственно на верхнюю, нижнюю, левую и правую линии рамки. Каждое из указанных свойств, в свою очередь, могут быть также заданы обобщенными правилами:

o если задано одно значение, то оно применяется ко всем четырем сторонам;

o если определено два аргумента, то первый применяется к верхней и нижней, а второй –к левой и правой сторонам;

o если в списке фигурируют три значения, то первое используется для верхней стороны, второе – для левой и правой, третье – для нижней стороны;

o четыре значения применяются, начиная с верхней стороны, по часовой стрелке.

Например, следующее правило – применить ко всем заголовкам первого уровня сплошную рамку зеленого цвета толщиной в один пиксел:

h1 {border: solid 1px #090}

полностью аналогично развернутому правилу:

h1 {border-style: solid; border-width: 1px; border-color:#090}

Приведем демонстрационный пример.

Пример 2.3. Два варианта оформления линий рамки, дающие один и тот же результат, изображенный на рисунке 2.4.

Вариант 1.

<?xml version="1.0" encoding="windows-1251"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Рамки</title>

<!--

body {

color: #000; background: #fff;

}

h1 {

font: 120% Tahoma, Verdana, Arial, Helvetica, sans-serif;

border-top: none; border-right: none; border-left: solid 15px #c00;

border-bottom: solid 3px #c00;

}

-->

</style>

</head>

<body>

<h1>Рамки</h1>

<p>Обобщенное свойство border не разрешает задавать индивидуальные правила оформления рамки для каждой из четырех сторон блока, однако это все-таки можно сделать, применяя свойства border-top, border-bottom, border-left и border-right, позволяющие определить стиль оформления соответственно для верхней, нижней, левой и правой линий рамки.</p>

</body>

</html>

Вариант2.

<?xml version="1.0" encoding="windows-1251"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head> <title>Рамки</title>

<!--

body {

color: #000; background: #fff;

}

h1 {

font: 120% Tahoma, Verdana, Arial, Helvetica, sans-serif;

border-style: none none solid solid; border-width: 0px 0px 3px 15px;

border-color: #c00;

}

-->

</style>

</head>

<body>

<h1>Рамки</h1>

<p>Обобщенное свойство border не позволяет задавать индивидуальные правила оформления рамки для каждой из четырех сторон блока, однако это все-таки можно сделать, применяя свойства border-top, border-bottom, border-left и border-right, позволяющие определить стиль оформления соответственно для верхней, нижней, левой и правой линий рамки.</p>

</body>

</html>

Рисунок 2.4. Привила применения рамок

Поля (padding) и отступы (margin) могут задаваться в величинах, определенных при помощи линейных единиц измерения в CSS, а для свойства margin также в процентах от ширины содержимого родительского элемента. Ключевое слова auto предписывает использовать значение по умолчанию. Следующий пример иллюстрирует использование этих свойств.

Пример 2.4. Поля (padding) и отступы (margin)

<?xml version="1.0" encoding="windows-1251"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Применение блочных свойств CSS</title>

<!--

html, body {

margin: 0px;

padding: 0px;

border: 0px;

}

body {

color: #000;

background: #fff;

}

h1 {

font: 120% Tahoma, Verdana, Arial, Helvetica, sans-serif;

background: #f0f0f0;

border-style: solid dotted;

border-width: 3px 5px;

border-color: #c00;

padding: 5px 20px;

margin: 20px;

}

p {

margin: 0px 20px 20px 100px;

}

-->

</style>

</head>

<body>

<h1>Блочная модель CSS2</h1>

<p>CSS2 предоставляет разработчикам вполне состоятельное средство, позволяющее организовать пространство веб-страницы в виде набора прямоугольных областей с различными свойствами — речь идет о так называемой блочной модели. Подошло время познакомиться с ней лицом к лицу.</p>

<p>Блочная модель наличествовала в CSS с самого начала, но в спецификации CSS2 она подверглась весьма существенным дополнениям и коррективам.</p>

<h1>Нюансы терминологии</h1>

<p>Название «блочная модель» не должно вводить в заблуждение — свойства, предопределенные ею, вполне применимы не только к блочным, но и к внутристрочным элементам. Путаница возникает исключительно по причине особенностей перевода рекомендаций W3C на русский язык. Устоявшемуся русскоязычному названию «блочная модель» в англоязычной терминологии соответствует понятие box model, тогда как «блочный элемент» в оригинале — это block element.</p>

<p>Так или иначе, любой элемент HTML в визуальном представлении помимо непосредственного содержимого может иметь также поля, рамку и отступ.</p>

</body>

</html>