Свойства структурного форматирования в CSS

List-style-type – определяет внешний вид маркера и имеет следующие значения:

– none – маркер списка не отображается;

– disc – маркер в виде черного круга;

– circle – в виде полой окружности;

– square – в виде черного квадрата;

– decimal – последовательность арабских чисел;

– lower-roman – в виде римских цифр;

– upper-roman– в виде последовательности римских цифр в заглавном регистре;

– lower-alpha – в виде последовательности строчных букв;

– upper-alpha – в виде последовательности заглавных букв.

LI {list-style-type: square; }

Данный стиль устанавливает маркер списка текста в виде черного квадрата.

List-style-image: URL – позволяет назначить в качестве метки маркированного списка произвольное изображение из существующего графического файла.

Li {list-style-image: image/marker.gif; }

отображает содержимое графического файла вместо маркера списка.

Значения отступов вокруг содержащего их элемента устанавливают следующие свойства стилей: margin-left – отступ слева, margin-right – отступсправа, margin-top – отступ сверху, margin-bottom – отступ снизу. Значение этих свойств определяется в пикселах, сантиметрах и миллиметрах.

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

P {margin-left: 20 px; }

IMG {margin: 10mm 15mm 10mm 15mm; }

В данном примере задан отступ для абзаца слева – 20 пикселов, а отступы от графического изображения сверху, справа, снизу и справа заданы значениями в одном свойстве marginв той же последовательности, то есть сверху и снизу по 10 мм, а справа и слева – по 15 мм.

Свойства padding-left, padding-right, padding-top, padding-bottom описывают значение отступов от видимых рамок объектов HTML, например таблиц. Величина отступов также определяется в пикселах, сантиметрах и миллиметрах.

TABLE {

padding-left: 10px;

padding-right: 10px;

padding-top: 15px;

padding-bottom: 15px; }

Эти же отступы можно задать другим способом:

TABLE {padding: 15px 10px 15px 10px; }

Border-width – свойство, которое определяют ширину видимого обрамления объектов, например таблиц и их ячеек, по правилам, аналогичным записи свойств, указанных выше.

TD {Border-width: 2px; }

Width и height – свойства, которые определяют соответственно ширину и высоту объекта в пикселах, сантиметрах, миллиметрах или процентах от значения, принятого по умолчанию. Применяются они в основном для задания геометрических размеров изображений. Данные свойства можно использовать как вместе, так и по отдельности.

IMG {height: 80%;

Width: 120 px; }

Float – указывает на расположение какого-либо объекта в окне браузера относительно других объектов, размещенных рядом. Принимаемые значения: left – расположение объекта слева, right – расположение объекта справа, none – расположение объектов по умолчанию.

TD {float: left; }

Clear – описывает расположение других объектов вокруг данного элемента web-страницы. Принимаемые значение: left – расположение слева, right – справа, both – расположение с двух сторон.

IMG {clear: both; }

Border-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 как для текстового, так и для структурного форматирования.