B order - color – описывает цвет видимого обрамления объектов: рамок, изображений и бордюров таблиц.
Например.
TABLE {border-color: blue;}
Background - color – задает цвет заднего фона, на котором расположен объект. Способы задания цвета были рассмотрены во второй главе.
TABLE { Background-color: green;}
Border - style – управляет отображением границы элемента. Значением этого свойства являются: dotted – граница из точек, solid – обычная сплошная граница, double – двойная линия, groove – утопленная линия границы, ridge – выпуклая граница, insert – объект, вдавленный в страницу, outset – выпуклый объект.
Свойства границ могут применяться не только к блочным элементам, но и к строчным. При этом строчный элемент автоматически превращается в блок, отделенный от остального текста пустыми строками.
TD { Border-style: groove;}
Пример web-страницы с использованием структурного форматирования в CSS. Отображение данного примера представлено на рис. 5.5.
<HTML>
<HEAD>
<ТIТLЕ> Структурное форматирование текста в CSS </TITLE>
<STYLE TYPE="text/css">
<!--
.text {font-family: Tahoma; color: #003366;
line-height: 7mm; font-size: 12pt;
margin:10px 10px 10px 10px; padding-left: 15px;
padding-right 15px; border-color: black;
border-style: dotted; background-color: #c0c0c0;
width: 500px; text-align: justify;}
#kursiv {font-style: italic;}
SPAN.font {font-size: 11px;}
.color {background-color: #cecece; }
IMG {float: left; width: 100px; height: 100px; margin-top: 15px;
margin-right: 15px;}
LI {list-style-type: circle;}
-->
</STYLE>
</HEAD>
<BODY BGCOLOR="#ffffff" TEXT="black" LINK="#00ff00"
ALINK="#00ff00" VLINK="blue">
<P CLASS="text">
<IMG SRC="picture.gif"> CSS предоставляет разработчику электронных документов гораздо более широкий набор возможностей работы с текстовой информацией, нежели стандартный HTML. Помимо способов выделения текста:</P>
<UL>
<LI><FONT STYLE="text-decoration: underline;"> подчеркивание </FОNТ>
<LI> <FONT ID="kursiv">кypcив</FONT>
<LI><FONT STYLE="font-weight: bold;"> жирное начертание</FОNТ>, <LI><FONT STYLE="font-family: Times New Roman;"> выбор гарнитуры </FONT>
<LI> <SPAN CLASS="font"> paзмep шpифтa </SPAN>
</UL>
<P CLASS="text">
с помощью средств CSS возможно <FONT СLАSS="соlоr"> изменять такие параметры </FONT>, как <FONT STYLE="letter-spacing: 3рх;"> мeжбyквeнный </FONT> и межстрочный интервал, <FONT STYLE="text-transform: uppercase;"> тип peгистpa</FONT>
(строчные и прописные буквы) и многое другое.
</P>
</BODY>
</HTML>
Рис. 5.5. Отображение примера с применением
структурного форматирования в CSS
Как видно из примера, некоторые структурные элементы позволяют применять свойства CSS, относящиеся к формированию текста: text-align, background-color и др. Таким образом, при формировании таблиц стилей допускается сочетание свойств CSS как для текстового, так и для структурного форматирования.
5.5. Слои и позиционирование документов
Обычно элементы web-страницы позиционируются относительно предыдущих элементов в коде HTML. С помощью средств CSS можно прибегнуть к позиционированию необходимых объектов в пределах электронного документа. Если позиционированным элементом является DIV, то говорят об отдельном слое в документе, так как этот элемент может размещаться на странице независимо от других элементов, перекрываясь с ними. Слои украшают web-страницу. Слой можно описать тегом <LAYER> (для Netscape Communicator) или DIV (для Internet Explorer) и наполнить нужным содержанием для последующего точного позиционирования на странице.
Существуют два типа визуального позиционирования элементов: абсолютное и относительное. Для описания каждого типа используются специальные свойства position и координаты top (вертикальная) и left (горизонтальная).