Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Комолова.doc
Скачиваний:
13
Добавлен:
27.08.2019
Размер:
1.1 Mб
Скачать

1995 Года, когда сам недавно образованный (и в декабре 1994 года проведший

свое первое совещание) консорциум W3C объявил о выборе технологии CSS для

форматирования HTML-документов

Уже в ноябре того же 1995 года консорциум W3C вновь обращается к этой теме на

своем семинаре по каскадным элементам оформления Впервые поддержка CSS

была реализована в браузере Internet Explorer 3 0 Там все только начиналось,

поэтому правила составления стилевых шаблонов были весьма разрозненными

Со временем структура CSS несколько раз видоизменялась, добавлялись новые

элементы, убирались старые Первый уровень стилевых шаблонов (CSS1) был

утвержден 11 января 1999 года, второй уровень (CSS2) был принят к обсужде-

нию в мае 1998 года, а третий уровень (CSS3) начали обсуждать в мае 2001 года

Переход от одного уровня к другому говорит о попытках систематизации CSS

Почему листы стилей называют каскадными? Этот эпитет употребляют потому,

что к одному HTML-элементу можно применять несколько стилевых правил, ин-

терпретируемых браузером последовательно, другими словами — каскадом

Важной особенностью стилевого оформления является то, что преобразованию

заданным стилем подвергаются все теги, заключенные внутри тега с указанным

стилем Например, если определяется стиль для тега <BODY>, то он присваивается

всему содержимому веб-страницы Это качество называется наследованием по ана-

логии с наследованием в объектно-ориентированных языках программирования

Синтаксис листа стиля

Синтаксис листа стиля имеет четкую структуру

Элемент  Все начинается с элемента, или селектора Элементами могут быть

не только простые теги, например заголовок <H1> или абзац <P>, но и более

сложные теги, например, ссылка <A> или таблица <TD>

Свойство  Именно для элемента назначаются атрибуты форматирования или

набор свойств Каждый элемент характеризуется своими свойствами, напри-

мер начертание шрифта (FONT-FAMILY: Arial), значения поля (MARGIN: 15px), об-

рамление (BORDER-RIGHT: white 1px solid), высота (HEIGHT: 1px) и др

Значение  Каждое свойство достигает определенного значения В примерах

свойств свойства приведены уже со значениями (Arial; white 1px solid, 1px)

Объявление  Свойство и значение, которое оно должно принять, образуют объ-

явление

Правило  Элемент и его объявление образуют правило

Правило определения синтаксиса листа стиля иллюстрирует рис 17 1

Пусть, например, необходимо сделать жирный синий подчеркнутый текст, тогда

в коде делается следующая запись:

<font color=»red»><strong><u> поклонитесь солнцу </u></strong></font>  Группирование стилей и селекторы  классов   239

Рис 17 1  Правило определения синтаксиса листа стиля

А если подобный стиль требуется применить несколько раз? Хорошо если 5 раз, а

если 10–20? Вот тут и помогает СSS

Благодаря следующей записи все элементы H1 в документе будут красного цвета,

размером в 20 точек:

h1 {color:red; size:20pt;}

Группирование стилей и селекторы

классов

Существуют дополнительные методы, которые расширяют функциональные воз-

можности каскадных листов стилей Стили можно сгруппировать, что позволя-

ет уменьшить количество необходимых атрибутов и аргументов путем создания

логических групп Группирование листов стилей может происходить по одина-

ковым тегам или по атрибутам одного семейства Порядок следования атрибутов

играет важную роль: атрибуты начертания и типа шрифта должны находиться

перед остальными атрибутами — кегль должен быть задан до межстрочного ин-

тервала, и только потом в строку можно добавить дополнительную информацию

В случае группирования атрибутов запятые между ними не ставятся, исключение

составляет атрибут семейства шрифта, перед ним ставится запятая

Пример группирования по тегам: 

до группирования: ‰

h1 {font-family: arial; font-size: 14pt}

h2 {font-family: arial; font-size: 14pt}

h3 {font-family: arial; font-size: 14pt}

после группирования: ‰

h1,h2,h3 {font-family: arial font-size: 14pt}

Пример группирования по атрибутам одного семейства: 

до группирования: ‰

body {margin-top: 12pt;margin-right: 10pt;margin-left: 15pt}

после группирования: ‰

body {margin: 12pt 10pt 15pt}

Атрибутом элемента в HTML, определяющим его класс, является атрибут CLASS

В CSS можно описать собственные стили для различных классов одних и тех же

элементов 240     Урок 17. Каскадные листы стилей 

Селекторы классов (class selectors) имеют синтаксис:

селектор.класс {cвойства}

Классы могут так же быть описаны без явного привязывания их к определенным

элементам, синтаксис:

.класс {свойства}

Четыре варианта использования CSS

Существуют четыре варианта использования листов стилей в HTML-документе:

встраивание; 

подключение; 

связывание; 

импорт 

В составе документа можно одновременно использовать различные типы листов

стилей При этом действуют правила каскадирования: встраиваемые стили имеют

приоритет перед подключаемыми, подключаемые стили имеют приоритет перед

связываемыми, связываемые стили имеют приоритет перед импортируемыми

Встраиваемые стили

Встраиваемые стили определяются в HTML-теге и оказывают влияние только на

этот тег Соответствующий код показан в листинге 17 1 (рис 17 2)

Рис 17 2  Применение стиля к абзацу

Листинг 17 1  Пример применения стиля к абзацу

<html><head><title>ПРИМЕР ВСТРАИВАЕМОГО СТИЛЯ</title></head>

<body>

<p style="font: 17pt comic sans ms">Текст этого абзаца будет отображаться шрифтом Comic

sans ms размером 17 пунктов</p>

</body></html>

Подключаемые стили

Подключаемые стили, которые также называют внутренними стилями, приме-

няются ко всей веб-странице Для этого служит тег <STYLE>, помещаемый в за-  Четыре варианта использования CSS   241

головок HTML-документа Стили определяются для различных типов HTML-

документов Так, можно задать отображение всех элементов <H1> серым цветом

шрифтом Verdana размером 14 пунктов Соответствующий код представлен в ли-

стинге 17 2 (рис 17 3)

Рис 17 3  Использование подключаемых стилей

Листинг 17 2  Пример использования подключаемых стилей

<html><head><title>ПОДКЛЮЧАЕМЫЕ СТИЛИ</title>

<style>

<!--

body {

background: #ffffff;

color: #000000;

}

h1 {

font: 14pt Book Antiqua;

color: #cc0000;

}

p{

font: 12pt times;

}

a {

color: #ff0000; text-decoration: none;

}

-->

</style></head>

<body>

<h1>Иван Комолов НЕЗАБУДКА </h1>

<p >Незабудка, с ветром споря <br>Говорит: "Разумным будь". <br>

Все хорошее запомни, <br>Все плохое позабудь.<br></p><p ></p>

<P >Вспомни май и берег речки,<BR> Луг зеленый был в цвету<BR>

Как хорошие словечки<BR> Ты шептал мне на лету.<br></p><p ></p>

<p >И ушел в широко поле<br>Глубоко волнуя грудь. <br>

Все хорошее запомни, <br>Все плохое позабудь.<br></p><p ></p>

<p >Прилетай в зеленом звоне,<br>Соловьи здесь росы пьют, <br>

Все хорошее запомни, <BR>Все плохое позабудь.<br></p>

</body></html>242     Урок 17. Каскадные листы стилей 

В листинге 17 3 представлен код еще одной страницы (рис 17 4) Стиль, приме-

ненный к первой фразе, форматирует ее серым цветом и курсивом Вторая фраза

написана серым цветом и подчеркнута Третья фраза написана черным цветом

и подчеркнута

Рис 17 4  Применение стилей к абзацам

Листинг 17 3  Пример применения стилей к абзацам

<html>

<head>

<title> ПРИМЕР CSS </title>

</head>

<style>

.gray {color:gray; font-style:italic}

#boldunderline {text-decoration:underline; font-weight:bold}

</style>

<body>

<p class="gray">Р. Пруц</p>

<p class="gray" id="boldunderline">Мои глаза не увлажняются слезами</br>

при мысли о скоротечности жизни: </p>

<p id="boldunderline">Вечная юность свойственна всякому, </br>

Кто ищет вечного </p>

</body>

</html>

Еще один пример применения стилей показан на рис 17 5 (листинг 17 4)

Листинг 17 4  Еще один пример применения стилей

<html><head><title>ПРИМЕР КАСКАДНЫХ ЛИСТОВ СТИЛЕЙ</title>

<style type=text/css>

h1 {

font-size: 32px; color: red; font-style: italic

}

.blue {

color: blue

}

#bold {

font-weight: bold

}  Четыре варианта использования CSS   243

</style></head>

<body>

<h1>заголовок форматирован крупным красным курсивом </h1>данное <font

class=blue>слово </font> - синее, a <font id=bold>другие слова</font> - жирные.

</body></html>

Рис 17 5  Еще один пример применения стилей

Связываемые стили

Связываемые, или внешние, стили применяются к документам всего веб-сайта

Создайте с помощью любого текстового редактора документ, содержащий только

определения стилей, и сохраните его в файле с расширением .css Созданные та-

ким образом списки можно применить к любой веб-странице

Чтобы ссылка работала, необходимо добавить ссылку на созданный файл стилей

в раздел заголовка HTML-документа Если в файл стилей были внесены измене-

ния, то эти изменения отразятся в каждом документе, который содержит ссылку

на файл стилей

На рис 17 6 показан результат применения CSS к тексту (листинг 17 5)

Листинг 17 5  Пример применения стилей, находящихся во внешнем файле

<html><head><title>ПРИМЕР ИСПОЛЬЗОВАНИЯ CSS-ФАЙЛОВ</title>

<link href="листинг 17.6.files/style.css" type=text/css rel=stylesheet></head>

<body bottommargin=0 bgcolor=#545454 leftmargin=100 topmargin=0 rightmargin=0

marginwidth="0" marginheight="0">

<H4>      Иван Комолов</h4>

<h1>У каждого свое</h1>

<p>У гор - отроги,<br>

У рек - ручьи,<br>

У ног - дороги. <br>

Иди ищи<br>

Ключи от счастья<BR>

Среди тревог.<br>

Они во власти<br>

Твоих дорог <br></p>244     Урок 17. Каскадные листы стилей 

<h1>Подснежники</h1>

<p>Пробудились первыми, <br>

Позабыли сны.<BR>

Ощутили нервами<br>

Биоток весны. <br></p>

</body></html>

Рис 17 6  Применение стилей, находящихся во внешнем файле

Внешний css-файл style.css, определяющий параметры форматирования показан-

ной на рис 17 6 веб-страницы, представлен в листинге 17 6

Листинг 17 6  Внешний css-файл для веб-страницы, показанной на рис. 17.6.

Body {

Background: #ffffff;

Color: #000000;

}

H1 {

font-family: Helvetica, Arial;

font-size: 24 pt;

color: #0000ff;

}

p {font-family: Garamond, Times;

font-size: 14 pt;

}

Импортируемые стили

Импорт внешних стилей напоминает их связывание Единственное отличие со-

стоит в том, что импорт можно сочетать с другими методами определения стилей

На рис 17 7 показан результат импорта внешних стилей (листинг 17 7)   Четыре варианта использования CSS   245

Рис 17 7  Импорт внешних стилей

Листинг 17 7  Пример импорта внешних стилей

<html><head><title>ПРИМЕР ИМПОРТА ВНЕШНИХ СТИЛЕЙ </title>

<style type="text/css">

<!--

@import c:\nina\piter\кн html\cd\глава 17\листинг17.8.css;

h3 {color: maroon; font-family: courier}

-->

</style>

<head>

<body>

<h3>Современные технологии форматирования</h3>

<p>Импорт внешних стилей<br>

позволяет сократить<br>

размеры HTML-файлов<br>

</p>

</body></html>

Внешний css-файл для веб-страницы, показанной на рис 17 7, представлен в ли-

стинге 17 8 (это файл Листинг17.8.css)

Листинг 17 8  Внешний css-файл для веб-страницы, показанной на рис. 17.7

<style type="text/css">

h3 {color:crimson font-family:Arial Black}

p {background:cornsilk; font-family: times}

</style>

В этом примере браузер сначала импортирует правила, содержащиеся в файле

Листинг17.8.css (выражение @import должно быть расположено первым), и затем

формирует набор правил для данной веб-страницы

Следует заметить, что для тега <H3> заданы два противоречащих друг другу пра-

вила Одно из них содержится во внешнем файле, а другое включено в состав до-

кумента В этом случае включенное правило заменяет импортированное правило

А для тега <P> действуют внешние правила, так как внутренних правил не пред-

ставлено 246     Урок 17. Каскадные листы стилей 

Примеры использования стилей

В этом разделе представлено несколько достаточно сложных примеров примене-

ния каскадных листов стилей

На рис 17 8 показана веб-страница, выполненная с помощью CSS (листинг 17 9)

Рис 17 8  Пример использования стилей

Листинг 17 9  Пример использования стилей

<html><head><title></title>

<style type=text/css>a:link {

color: #f0047f; text-decoration: underline

}

a:active {

color: red

}

a:visited {

color: blue

}

body {

color: black; background-color: #e3ffe8

}

.text5 {

font-size: 9px; color: black; font-family:

'Arial','Helvetica','sans-serif'; text-decoration: none

}

.text0 {

font-size: 18px; COLOR: black; font-family:  Примеры использования стилей   247

'Arial Black'; text-decoration: none

}

.text2 {

font-weight: bold; font-size: 18px; color:

black; font-family: 'Arial','Helvetica','sans-serif';

text-decoration: none

}

.text1 {

font-weight: bold; font-size: 14px; color:

black; font-family: 'Arial','Helvetica','sans-serif';

text-decoration: none

}

.text19 {

font-weight: bold; font-size: 14px; font-family:

'Arial','Helvetica','sans-serif'

}

.Tnormal {

font-size: 12px; color: black; font-family:

'Arial','Helvetica','sans-serif'; text-decoration: none

}

.para1 {

text-align: center

}

.pnormal {

}

.box1 {

width: 2px; height: 380px

}

.box2 {

width: 2px; height: 377px

}

.box3 {

padding-right: 1px; padding-left: 1px; padding-bottom: 1px;

padding-top: 1px

}

.box4 {

width: 135px; height: 131px

}

.box6 {

left: 392px; width: 148px; position: absolute; top: 59px; height: 130px

}

.box7 {

left: 338px; width: 212px; position: absolute; top: 356px; height: 187px

}

.box8 {

padding-right: 1px; padding-left: 1px; left: 414px;

padding-bottom: 1px; width: 99px; padding-top: 1px;

position: absolute; top: 440px; height: 35px

}

.box9 {

left: 107px; width: 350px; position: absolute; top: 497px; height: 1px

}

.box10 {

продолжение 248     Урок 17. Каскадные листы стилей 

Листинг 17 9 (продолжение)

left: 123px; width: 314px; position: absolute; top: 73px; height: 98px

}

.box13 {

left: 65px; width: 22px; position: absolute; top: 73px; height: 343px

}

</style>

<meta content="mshtml 5.50.4522.1800" name=generator></head>

<body leftmargin=0 topmargin=0 marginwidth="0" marginheight="0">

<table cellSpacing=0 cellPadding=0 align=left border=0>

<tbody> <tr> <td colspan=15></td> <td valign=top width=1 height=2>

<img height=2 src="lettera1.files/qxwspacer.gif" width=1 border=0>

<!--Размещение рисунка пустой клетки-->

</td></tr> <tr><!--Строка 1--> <td></td><!--Ячейка 1-->

<td valign=top width=55 height=23><!--Ячейка 2-->

<div class=box3>

<div class=para1><span class=text5>Санкт-Петербург </span></div>

<div class=para1><span class=text5>Петродворец</span></div></div></td>

<td colspan=13></td><!--Ячейка 3-->

<td valign=top width=1 height=23><!--Ячейка 4 -->

<img height=23 src="lettera1.files/qxwspacer.gif" width=1 border=0></td></tr>

<!--Размещение рисунка пустой клетки-->

<tr><!--Строка 2--> <td colspan=15></td><!--Ячейка 1-->

<td valign=top width=1 height=49><!--Ячейка 2-->

<img height=49 src="lettera1.files/qxwspacer.gif" width=1 border=0></td></tr><

!--Размещение рисунка пустой клетки-->

<tr><!--Строка 3--> <td colspan=14></td><!--Ячейка 1-->

<td valign=top width=2 height=380 rowspan=11><!--Ячейка 2-->

<div class=box1>

<img height=380 src="lettera1.files/line12.gif" width=2 border=0></div></td>

<!--Размещение вертикальной линии-->

<td valign=top width=1 height=1><!--Ячейка 3-->

<img height=1 src="lettera1.files/qxwspacer.gif" width=1 border=0></td></tr>

<!--Размещение рисунка пустой клетки-->

<tr><!--строка 4--> <td colspan=3></td><!--ячейка 1-->

<td valign=top width=2 height=377 rowspan=8><!--Ячейка 2-->

<div class=box2>

<img height=377 src="lettera1.files/line5.gif" width=2 border=0></div></td>

<!--Размещение вертикальной линии-->

<td colspan=10></td><!--Ячейка 3-->

<td valign=top width=1 height=102><!--Ячейка 4-->

<img height=102 src="lettera1.files/qxwspacer.gif" width=1 border=0></td></tr>

<!--Размещение рисунка пустой клетки-->

<tr><!--Строка 5--> <td colspan=3></td><!--Ячейка 1-->

<td colspan=10></td><!--Ячейка 2-->

<td valign=top width=1 height=24><!--Ячейка 3-->

<img height=24 src="lettera1.files/qxwspacer.gif" width=1 border=0></td></tr>

<!--Размещение рисунка пустой клетки-->

<tr><!--Строка 6--> <td colspan=3></td><!--Ячейка 1-->

<td colSpan=3></td><!--Ячейка 2-->

<td valign=top width=135 height=131 rowspan=3><!--Ячейка 3-->

<div class=box4>  Примеры использования стилей   249

<img height=131 alt=Lena1.gif src="lettera1.files/Lena1.gif" width=100 border=0></div>

</td>

<td colspan=6></td><!--Ячейка 4-->

<td valign=top width=1 height=10><!--Ячейка 5-->

<img height=10 src="lettera1.files/qxwspacer.gif" width=1 border=0></td></tr>

<!--Размещение рисунка пустой клетки-->

<tr><!--Строка 7--> <TD COLSPAN=3></TD><!--Ячейка 1-->

<td colspan=3></td><!--Ячейка 2-->

<td></td><!--Ячейка 3-->

<td valign=top width=200 colspan=4 height=73><!--Ячейка 4-->

<div class=box3>

<div class=pnormal><span class=text2>Как хорошо влюбиться первым

</span></div>

<div class=pnormal><span class=text2> И, полюбив, любимым быть!

</span></div></div></td><!--Ячейка 5-->

<td></td><!--Ячейка 6-->

<td valign=top width=1 height=73><!--Ячейка 7 -->

<img height=73 src="lettera1.files/qxwspacer.gif" width=1 border=0></td></tr>

<!--Размещение рисунка пустой клетки-->

<tr><!--Строка 8-->

<td colspan=3></td><!--Ячейка 1-->

<td colspan=3></td><!--Ячейка 2-->

<td colSpan=6></td><!--Ячейка 3-->

<td valign=top width=1 height=48><!--Ячейка 4-->

<img height=48 src="lettera1.files/qxwspacer.gif" width=1 border=0></td></tr>

<!--Размещение рисунка пустой клетки-->

<tr><!--Строка 9-->

<td colspan=3></td><!--Ячейка 3-->

<td colspan=10></td><!--Ячейка 4-->

<td valign=top width=1 height=53><!--Ячейка 5-->

<img height=53 src="lettera1.files/qxwspacer.gif" width=1 border=0></td></tr>

<!--Размещение рисунка пустой клетки-->

<tr><!--Строка 10-->

<td colspan=3></td><!--Ячейка 1-->

<td colspan=2></td><!--Ячейка 2-->

<td valign=top width=314 colspan=4 height=40 rowspan=2><!--Ячейка 3-->

<div class=box3>

<div class=pnormal><span class=text1>В могучих елях цвел багульник

</span></div>

<div class=pnormal><span class=text1>Вблизи Москвы. Не просто так.

</span></div></div></td>

<td colspan=4></td>

<td valign=top width=1 height=39><img height=39

src="lettera1.files/qxwspacer.gif" width=1 border=0></td></tr>

<!--Размещение рисунка пустой клетки-->

<tr> <td colspan=6></td> <td colspan=4></td>

<td valign=top width=1 height=1><img height=1 src="lettera1.files/qxwspacer.gif" width=1

border=0></td></tr>

<!--Размещение рисунка пустой клетки-->

<tr> <td colspan=14></td>

<td valign=top width=1 height=1><img height=1

src="lettera1.files/qxwspacer.gif" width=1 border=0></td></tr>

<!--Размещение рисунка пустой клетки-->

<tr> <td colspan=15></td>

продолжение 250     Урок 17. Каскадные листы стилей 

Листинг 17 9 (продолжение)

<td valign=top width=1 height=55><img height=55 src="lettera1.files/qxwspacer.gif"

width=1 border=0></td></tr>

<!--Размещение рисунка пустой клетки-->

<tr> <td colspan=5></td>

<td valign=top width=348 colspan=7 height=71>

<div class=box3>

<div class=para1><span class=text1>БАГУЛЬНИК

</span></div>

<div class=para1><span class=text1>Стихотворение Ивана Комолова

</span></div>

<div class=para1><a href="ninapetergof@mail.ru"><span class=text19>email:ninapetergof@

mail.ru</span></a><span

class=text1><br></span></div>

<div class=para1><span class=text1>http://www.uprint.spb.ru

</span></div></div></td>

<td colspan=3></td>

<td valign=top width=1 height=71>

<img height=71 src="lettera1.files/qxwspacer.gif" width=1 border=0></td></tr><!--

Размещение рисунка пустой клетки-->

<tr> <td valign=top width=2 height=1>

<img height=1 src="lettera1.files/qxwspacer.gif" width=2 border=0></td>

<!--Размещение рисунка пустой клетки-->

<td valign=top width=55 height=1>

<img height=1 src="lettera1.files/qxwspacer.gif" width=55 border=0></td>

<!--Размещение рисунка пустой клетки-->

<td valign=top width=26 height=1>

<img height=1 src="lettera1.files/qxwspacer.gif" width=26 border=0></td>

<!--Размещение рисунка пустой клетки-->

<td valign=top width=2 height=1>

<img height=1 src="lettera1.files/qxwspacer.gif" width=2 border=0></td>

<!--Размещение рисунка пустой клетки-->

<td valign=top width=23 height=1>

<img height=1 src="lettera1.files/qxwspacer.gif" width=23 border=0></td>

<!--Размещение рисунка пустой клетки-->

<td valign=top width=12 height=1>

<img height=1 src="lettera1.files/qxwspacer.gif" width=12 border=0></td>

<!--Размещение рисунка пустой клетки-->

<td valign=top width=1 height=1>

<img height=1 src="lettera1.files/qxwspacer.gif" width=1 border=0></td>

<!--Размещение рисунка пустой клетки-->

<td valign=top width=135 height=1>

<img height=1 src="lettera1.files/qxwspacer.gif" width=135 border=0></td>

<!--Размещение рисунка пустой клетки-->

<td valign=top width=16 height=1>

<img height=1 src="lettera1.files/qxwspacer.gif" width=16 border=0></td>

<!--Размещение рисунка пустой клетки-->

<td valign=top width=62 height=1><img height=1 src="lettera1.files/qxwspacer.gif"

width=62 border=0></td>

<!--Размещение рисунка пустой клетки-->

<td valign=top width=116 height=1>

<img height=1 src="lettera1.files/qxwspacer.gif" width=116 border=0>

</td><!--Размещение рисунка пустой клетки-->

<td valign=top width=6 height=1>

<img height=1 src="lettera1.files/qxwspacer.gif" width=6 border=0>  Примеры использования стилей   251

</td><!--Размещение рисунка пустой клетки-->

<td valign=top width=16 height=1>

<img height=1 src="lettera1.files/qxwspacer.gif" width=16 border=0></td>

<!--Размещение рисунка пустой клетки-->

<td valign=top width=11 height=1>

<img height=1 src="lettera1.files/qxwspacer.gif" width=11 border=0></td>

<!--Размещение рисунка пустой клетки-->

<td valign=top width=2 height=1>

<img height=1 src="lettera1.files/qxwspacer.gif" width=2 border=0></td>

<!--Размещение рисунка пустой клетки-->

<td valign=top width=1 height=1>

<img height=1 src="lettera1.files/qxwspacer.gif" width=1 border=0></td>

<!--Размещение рисунка пустой клетки-->

</tr></tbody></table>

<div class=box6><img height=130 alt=lena.gif src="lettera1.files/lena.gif" width=148

border=0> <!--Подпись рисунка --> </DIV>

<div class=box7><img height=182 alt=flower.gif src="lettera1.files/flower.gif" width=208

border=0>

<img height=5 src="lettera1.files/qxwspacer.gif" width=1 align=right border=0></div><!--

Размещение рисунка пустой клетки-->

<div class=box8>

<div class=pnormal><span class=tnormal>Он отвергал и мрак и тени, </span></div>

<div class=pnormal><span class=tnormal>В апреле май провозглашал </span></div></div>

<div class=box9>

<img height=1 src="lettera1.files/line16.gif" width=350 border=0></div>

<div class=box10><img height=98 alt=logo.gif src="lettera1.files/logo.gif" width=314

border=0></div>

<div class=box13><img height=343 alt="text" src="lettera1.files/text.gif" width=22

border=0></div></body></html>

На рис 17 9 показана еще одна веб-страница, выполненная с помощью CSS (ли-

стинг 17 10)

Рис 17 9  Еще один пример использования стилей252     Урок 17. Каскадные листы стилей 

Листинг 17 10  Пример более сложной программы на использование стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html><head><title>ПРИМЕР ИСПОЛЬЗОВАНИЯ ФАЙЛОВ С РАСШИРЕНИЕМ CSS</title>

<meta http-equiv=content-type content="text/html; charset=windows-1251">

<link href="листинг 17.10.files/style.css" type=text/css rel=stylesheet>

<meta content="mshtml 6.00.2600.0" name=generator></head>

<body bottommargin=0 bgcolor=#dddbbb leftmargin=0 topmargin=0 rightmargin=0

marginheight="0" marginwidth="0">

<img id=bgmmm style="display: none; left: 163px; position: absolute; top: 74px"

src="листинг 17.7.files/lfon.gif">

<table style="background: url(img/bg.jpg) no-repeat left top" height="100%"

cellspacing=0 cellpadding=0 width="100%" border=0>

<tbody> <tr> <td height=36>

<table height="100%" cellspacing=0 cellpadding=0 width="100%" border=0>

<tbody> <tr> <td width=339 background=""> </td>

<td align=left background="ff00ff"><img width=547 height=446

src="листинг 17.10.files/Воронихинские колонны.jpg"></td></tr></tbody></

table></td>

<tr height=1> <td>Россия, Санкт-Петербург</TD>

<tr height=119> <td style="padding-left: 350px; font-size: 18px; padding-top: