B ackground - image устанавливает фоновое отображение всего документа или ячейки таблицы.
BODY {background-image: URL;}
В данном примере URL – адрес графического файла.
B ackground - repeat определяет параметры повторения (копирования) изображения в разных направлениях видимой части HTML-документа: repeat – позволяет повторять изображение во всех направлениях, repeat-x – только по горизонтали, repeat-y – только по вертикали.
BODY {background-image: images/picture.gif;
background-repeat: repeat-x;}
В данном примере настройка стиля показывает горизонтальное повторение изображения фона.
В качестве дополнительных свойств для фонового изображения используются: background-attachment – устанавливает правила скроллинга фонового изображения; background-position – позволяет зафиксировать положение фонового изображения (используется совместно с background-repeat и позволяет устанавливать значения repeat-x или repeat-y).
B ackground - attachment – устанавливает правила скроллинга фонового изображения в одном из двух значений: scroll – фоновое изображение двигается вместе с содержимым страницы при прокрутке документа, fixed – фиксирует изображение на экране.
BODY {background-image: images/picture.gif;
background–attachment: scroll;}
В этом примере стилевые настройки позволяют покручивать фоновое изображение.
B ackground - position используется в том случае, если используется background-repeat и установлено значение repeat-x или repeat-y. Это свойство позволяет зафиксировать положение фонового изображения на определенном уровне: top – позиционирование по верхней границе экрана, middle – по центру экрана, bottom – по нижней границе, left – выравнивание по левой границе экрана, right – выравнивание по правой границе экрана, center – выравнивание по центру.
BODY {background-position: 30cm 0cm;}
TD {background-position : middle;}
В данной настройке стиля происходит позиционирование графического изображения на странице и в ячейке таблицы.
Теги <DIV> и <SPAN> играют особую роль для CSS. Они позволяют выделить в документе отдельные области, задавая для них специфические свойства. Все, что нужно сделать, – это поместить теги, принадлежащие конструируемой области, внутрь <DIV> </DIV> или <SPAN> </SPAN>. Разница между <DIV> и <SPAN> только в одном: после блока <DIV> браузер переходит на новую строку, а после блока <SPAN> – нет.
Рассмотрим на примере некоторые свойства форматирования текста в CSS с применением к одной HTML-странице. Отображение примера в браузере показано на рис. 5.4.
<HTML>
<HEAD>
<ТIТLЕ>Форматирование текста в CSS</TITLE>
<STYLE TYPE="text/css">
<! - -
.text {font-family: Tahoma; color: #003366;
line-height: 7mm; font-size: 12pt;}
#kursiv {font-style: italic;}
SPAN.font {font-size: 11px;}
.color {background-color: #cecece; } - ->
</STYLE>
</HEAD>
<BODY BGCOLOR="#ffffff" TEXT="black "LINK="#00ff00"
ALINK="#00ff00" VLINK="blue">
<FONT CLASS="text">
CSS предоставляет разработчику электронных документов гораздо более широкий набор возможностей работы с текстовой информацией, нежели стандартный HTML. Помимо способов выделения текста
(<FONT STYLE="text-decoration: underline;"> подчеркивание </FОNТ>, <FONT ID="kursiv">кypcив</FONT>, <FONT STYLE="font-weight: bold;"> жирное начертание</FОNТ>, <FONT STYLE="font-family: Times New Roman;"> выбор гарнитуры</FONT> и <SPAN CLASS="font"> paзмep шpифтa </SPAN>), с помощью средств CSS возможно <FONT СLАSS="соlоr"> изменять такие параметры </FONT>, как <FONT STYLE="letter-spacing: 3рх;"> мeжбyквeнный </FONT> и межстрочный интервал, <FONT STYLE="text-transform: uppercase;"> тип perистpa</FONT>
(строчные и прописные буквы) и многое другое.
</FONT>
</BODY>
</HTML>
Рис. 5.4. Отображение примера с применением
свойств форматирования
Структурное форматирование. Каскадные таблицы стилей принесли много нового и заметно расширили функциональность форматирования структурных элементов электронного документа: P, DIV и пр. Наиболее распространенные свойства структурного форматирования в CSS приведены в табл. 5.2.
Свойства списков применяются для настройки отображения элементов нумерованных и маркированных списков, определяемых в коде HTML тэгом <LI>. В языке CSS данному элементу присваиваются следующие свойства: list-style-type – определяет внешний вид маркера, list-style-image – устанавливает графический маркер.
Таблица 5.2
Свойства структурного форматирования в CSS
| Свойство | Назначение | Формат записи и принимаемые значения |
| List-style-type | Определяет вид маркера списка текста | list-style-type: circle; |
| List-style-image | Установка изображения вместо маркера | list-style-image: image/marker.gif; |
| Margin-left (или Padding-left) | Отступ слева | margin-left: 10mm; (padding-lef: 10mm;) |
| Margin-right (или Padding-right) | Отступ справа | margin-right: 10mm; (padding-right: 10mm;) |
| Margin-top (или Padding-top) | Отступ сверху | margin-top: 15mm; (padding-top: 15mm;) |
| Margin-bottom (или Padding-bottom) | Отступ снизу | margin-bottom: 15mm; (padding bottom: 15mm;) |
| Margin (padding) | Определение размера поля относительно верхнего, правого, нижнего и левого края структурного элемента | margin: 1px 2px 3px 4px; (padding: 15px 10px 15px 10px;) |
| Border-width | Ширина границы | border-width: 20px; |
| Width | Ширина объекта | width: 500px; |
| Height | Высота объекта | height: 500px; |
| Float | Расположение относительно других объектов | float: right; |
| Clear | Расположение других объектов вокруг данного | clear: both; |
| Border-color | Цвет обрамления | border-color: red; |
| Background-color | Цвет заднего фона | background-color: #c0c0c0; |
| Border-style | Вид границы элемента | border-style: dotted; |
List - style - type – определяет внешний вид маркера и имеет следующие значения:
– none – маркер списка не отображается;
– disc – маркер в виде черного круга;
– circle – в виде полой окружности;
– square – в виде черного квадрата;
– decimal – последовательность арабских чисел;
– lower-roman – в виде римских цифр;
– upper-roman – в виде последовательности римских цифр в заглавном регистре;
– lower-alpha – в виде последовательности строчных букв;
– upper-alpha – в виде последовательности заглавных букв.
LI {list-style-type: square;}
Данный стиль устанавливает маркер списка текста в виде черного квадрата.