| |
le Sheet, CSS), на который иногда ссы-
лаются как на вложенную таблицу стилей, представляет собой набор специфика-
ций (называемых правилами), которые позволяют получить полный контроль над
расположением элементов на Web-странице и внешним видом ее содержимого.
Правила каскадных списков стилей могут использоваться для выбора цвета фона,
графических изображений или "водяных знаков", которые будут выводиться под
содержимым страницы. Кроме того, свойство position каскадных списков сти-
лей исключает необходимость использования скрытых таблиц для расположения
элементов страницы и позволяет указывать Web-браузеру, где располагать каждый
конкретный элемент. И, наконец, правила каскадных списков стилей позволяют
указывать тип и выбирать размер, цвет и вид текста. Помимо использования
обычного, полужирного и курсивного начертаний, каскадные списки стилей
дают возможность создавать затененный текст или текст с другими специальны-
ми эффектами без преобразования символьных данных в графические изображе-
ния, загрузка которых производится гораздо медленнее.
Несмотря на то что каскадный список стилей можно добавить в Web-доку-
мент несколькими различными способами, наверное, самый простой способ —
поместить правила списка стилей непосредственно в заголовок Web-страницы,
как показано на примере следующего кода:
... Содержимое Web-страницы ...
Несмотря на длинное название, "каскадный список стилей" представляет со-
бой всего лишь набор операторов между начальным и конечным дескрипторами
стиля (), расположенными перед началом HTML-кода страни-
174 Глава 4. Каскадные списки стилей
цы. При считывании HTML-документа браузер применяет правила (т.е. операто-
ры форматирования и позиционирования), приведенные в списке стилей, к эле-
ментам Web-страницы, описанным в разделе . На рис. 4.1 показан про-
стой каскадный список стилей с двумя правилами, которые указывают
Web-браузеру, каким образом выводить на экран два элемента, описанные в деск-
рипторе Web-страницы.
t n i i i n i l M 111 - I.>ICI
Псща
IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.9 Strict//EN"
"http://Нин.иЗ.огд/TR/xhtmli/DTD/xhtmli-strict.dtd">
html xmlns="http://ими.нЗ.org/1999/xhtml">
head>
<Ш1е>Внедренный каскадный список стипей (CSS)
/head)
body>
Текст заголовка уровня 1
C использованием касканых списков стилей можно независимо изменять
внешний вид заголовков и текста на ЫеЬ-странице.
/body>
/htnl>
У , •: > • •• -••: : - I . :±j
Рис. 4.1. Web-страница с каскадным списком стилей
Помимо позиционирования элементов страницы и форматирования текста,
правила каскадных списков стилей позволяют управлять расстоянием между сим-
волами, словами, строками и абзацами. Более того, правила списков стилей
дают возможность установить поля Web-страницы, ширину границы вокруг части
текста или других элементов и управлять выравниванием "плавающего" текста и
объектов (например, графических изображений), внедренных в текст. Для приме-
ра на рис. 4.2 показано, каким образом браузер Internet Explorer реализует пра-
вила каскадного списка стилей, которые выравнивают плавающее изображение
по левому краю окружающего его текста:
Обратите внимание, что правила каскадного списка стилей в этом примере
создают поля между текстом и левой и правой границами Web-страницы и со-
здают границу белого цвета между текстом и сторонами изображения.
Когда в конце 1996 года появились каскадные списки стилей, они существен-
но обогатили и облегчили процесс разработки Web-страниц, предоставляя дизай-
нерам Web-страниц следующие возможности:
Глава 4. Каскадные списки стилей 175
Q ров к о .ип Иэбронно
Дапас|й hnp//himl-webdesJgn/ChaplerOfl/Figura04-02.hijn
Although you may not think of it as such, text is actually an element on
the Web page. Normally, you put text in into paragraphs using the start
and end paragraph tags . The tag is actually a container
tag because it has a start and an end tag. However, you can also think
of text as going into a "paragraph" container. As such, I can position
text where I want it to go on the Web page by positioning the
paragraph container. Moving the container also moves it contents.
You might als
|
|
