Web / Primer_for_ZITs11
.htmLab for ZITs p {text-align:justify; font-size:18pt} tt {color: blue; font-size:18pt} h4 {color: #8A2BE2; font-family:arial; font-size:18pt; text-align:center} h3 {color: #8A2BE2; font-family:arial; font-size:19pt; text-align:center} h2 {color: #8A2BE2; font-family:arial; font-size:120pt; text-align:center} li {font-size:14pt; line-height: 150%} .r {text-align:right} «Проектирование и разработка Web-сайтов» Лабораторная работа
Теория CSS — внешние таблицы стилей Группирование элементов (SPAN и DIV) Селектор по идентификатору Блоковая модель Поля (margin) Границы (border) Фон (background) Отступы (padding) Контейнер блока Абсолютное позиционирование Плавающие блоки Центрирование блока Практический пример применения стилей
Задание Спецификация HTML 4.0 CSS — внешние таблицы стилей Представьте, что вы создаете сайт, в котором десяток страниц и каждая страница должна иметь таблицу стилей, задающую её оформление. Как правило, все страницы сайта выглядят одинаково, а значит, для их оформления применяются подобные таблицы стилей. Поэтому, чтобы не дублировать их в каждом html-документе, таблицу стилей можно поместить в отдельный файл — style.css (это обычный текстовый файл с правилами CSS). Имя файла может быть любым, а расширение — обязательно css. Затем необходимо связать html-документы с файлом style.css: поместить в связываемом html-документе между командами <head> и </head> следующую строку: <link rel=stylesheet href="style.css" type="text/css"> Такие таблицы стилей называются внешними. Преимущество внешних таблиц стилей — удобство редактирования таких страниц, т.к. в этом случае достаточно исправить стиль оформления команды в одном месте — в файле, содержащем таблицу стилей, и на всех веб-страницах, использующих эти стили, внешний вид команд изменится. Группирование элементов (SPAN и DIV) В языке HTML все элементы можно разделить на два типа: строчные и блочные. Строчные элементы, как ясно из их названия, выводятся линейной строкой, например: <I>, <B> и <SPAN>. Элемент <SPAN> можно назвать нейтральным элементом, который ничего не добавляет к содержимому документа. Но, в сочетании с CSS, <SPAN> может использоваться для визуальных эффектов применимо к отдельным блокам текста.
Пример — народная мудрость: <p>Научить нельзя, можно только научиться.</p> Скажем, мы хотим, чтобы слово «научиться» было выделено курсивом и красным цветом. Для этого в таблице стилей можно описать селектор по классу, который затем будет использован в команде <SPAN>: <p>Научить нельзя, можно только <SPAN class="prim"> научиться. </SPAN></p> В CSS: SPAN.prim { font-style: italic; color: red; } Демонстрация примера Блочные элементы создают визуально самостоятельную структурную единицу — блок, например: <H1>–<H6>, <P> и <DIV>. Основное отличие <DIV> от команды абзаца <P> в том, что по умолчанию перед и после абзаца всегда добавляется пустая строка, а у <DIV> — нет. Элемент <DIV> в сочетании с CSS позволяет задавать целый комплекс свойств блока. Селектор по идентификатору Помимо селектора по классу, позволяющего задать свойства однотипных элементов, в CSS есть возможность выделить некий элемент, стиль оформления которого должен существенно отличаться от всех других на веб-странице. Это делается с помощью селектора по идентификатору. Например, пусть требуется, чтобы на каждой странице сайта самый первый заголовок отличался ото всех остальных. С помощью атрибута id= присвоим заголовку Н1 уникальный идентификатор: <H1 id="firstheader"> Первый заголовок на странице </H1> Чтобы записать CSS-правило для определения стиля этого заголовка, используется такой же прием, как и для селекторов по классу, но в качестве разделителя используется не точка, а символ решетки (#). H1#firstheader { color: red; font-size: 15pt } /* стиль первого заголовка */ H1 { color: blue; font-size: 13pt } /* стиль всех остальных заголовков */ Внимание! В одном html-документе не может быть двух элементов с одинаковым значением атрибута id. По аналогии с унифицированным селектором по классу можно создать унифицированный селектор по идентификатору (имя элемента при этом не указывается): #menu { text-align: right; color: blue } <DIV id="menu"> Блок с пунктами меню сайта </DIV> Блоковая модель Блоковая модель в CSS имеет детальные опции для определения полей, рамок, заполнения и содержимого каждого элемента. На рисунке показано, как построена блоковая модель:
Каждый блок в CSS обязательно имеет информационную часть, или содержимое, которым может быть текст, изображение или другая информация. Эта часть блока называется контентом (content) или содержимым. Вокруг области контента могут быть пустые области, называемые отступами (padding). С точки зрения дизайна отступы обеспечивают для содержимого блока эстетически более привлекательный вид. Непосредственно за отступами проходит граница (border), которая может иметь определенную толщину и стиль линий. Также блок может иметь поля (margin), это дополнительное свободное пространство вне границ блока. Согласно спецификации CSS, поля, границы и отступы не входят в ширину блока, вы задаете ширину лишь той части блока, которая отведена для содержимого. Все поля, границы и отступы делятся соответственно на верхние, нижние, левые и правые. Для каждого из них можно задать значения независимо от других. Поля (margin) Поля — это расстояние от каждой стороны блока до соседних элементов (или краёв документа). Регулируя величину полей, можно управлять расстоянием между блоками. Значения могут задаваться в любых единицах длины, а также в процентах. Процентное соотношение в этом случае вычисляется относительно контейнера, породившего блок. По умолчанию в любом браузере поля веб-страницы имеют определенное ненулевое значение. Если для целей дизайна их требуется устранить, следует записать такое правило: BODY { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } Или в сокращенном виде, если все поля одного размера: BODY { margin: 5px } Если для страницы требуется установить поля по 10 % от ширины страницы справа и слева, а поля сверху и снизу пусть останутся по умолчанию, то правило будет выглядеть так: BODY { margin-right: 10%; margin-left: 10%; } Допустимы также отрицательные значения полей. Использование селекторов по классу для задания полей позволяет сделать наложение текста друг на друга как это сделано в следующем примере. <html> <head> <title>Style Sheets</title> <style> .t1 { margin-left: 10pt; color: darkmagenta; font-size: 30pt; font-weight: bold; font-family: Courier New } .t2 { margin-top: -37pt; /* блок будет сдвинут вверх на 37 пунктов */ margin-left: 8pt; color: magenta; font-size: 30pt; font-weight: bold; font-family: Courier New } </style> </head> <body bgcolor=#FFFFFF> <div class="t1">Объявление</div> <div class="t2">Объявление</div> <p>А теперь применение классов t1 и t2 по отдельности: <div class="t1">Объявление</div> <p> <div class="t2">Объявление</div> Демонстрация примера Границы (border) Границы блоков делятся на четыре сегмента: верхний, правый, нижний, левый. Каждый отдельный сегмент блока может иметь свои характеристики: цвет, толщину, тип линий. Свойство width Толщину границы можно задать как в виде ключевых слов: thin — тонкая граница; medium — граница средней толщины; thick — толстая граница, так и в единицах измерения: P { border-top-width: 1px; border-right-width: medium; border-bottom-width: 2px; border-left-width: thin; } Недопустимо задание величины границы в процентах и отрицательных значекний. Свойство border-color Цвет границы также возможно задать для каждой из четырех сторон блока по отдельности: border-top-color — цвет верхнего сегмента границы; border-right-color — цвет правого сегмента границы; border-bottom-color — цвет нижнего сегмента границы; border-left-color — цвет левого сегмента границы; Свойство border-style Это свойство задает тип линий, которыми будут отображаться границы блока: border-top-style — тип линии верхнего сегмента границы; border-right-style — тип линии правого сегмента границы; border-bottom-style — тип линии нижнего сегмента границы; border-left-style — тип линии левого сегмента границы; Тип границы может быть следующим: none — граница отсутствует (используется по умолчанию); dotted — линия из точек; dashed — пунктирная линия; solid — сплошная линия; double — двойная сплошная линия; groove — граница отображается «вдавленной» линией с имитацией объема; ridge — противоположно значению groove; inset — имитация нажатой кнопки; outset — противоположно значению inset.
С помощью этого свойства можно, например, обвести рамкой отдельное слово: .ramka { border: solid 1px red } /* это сокращенная запись */ <P>В этом абзаце вокруг слова <SPAN class="ramka">рамка</SPAN> будет граница со всех четырех сторон в виде сплошной линии толщиной в 1 пиксель, красного цвета. Пример задания разных цветов и типов границы блока: h1 { border-top-width: thin; border-top-style: dotted; border-top-color: red; border-bottom-width: medium; border-bottom-style: dashed; border-bottom-color: blue; border-right-width: thick; border-right-style: solid; border-right-color: green; border-left-width: thick; border-left-style: double; border-left-color: orange; } Демонстрация примера Фон (background) Свойство background-color Это свойство позволяет задавать цвет фона страницы или любого другого элемента (заголовка, абзаца). BODY { background-color: aqua } P { background-color: blue } Свойство background-image Это свойство задает изображение в качестве фона любого элемента: DIV { background-image: URL(picture.gif) } <DIV style="width:300px;height:222px">Ёжик в тумане</DIV> Здесь в атрибуте style= указаны значения ширины и высоты изображения, чтобы оно отобразилось полностью на экране. Демонстрация примера Совет. При использовании свойства background-image рекомендуется задавать и значение свойства background-color. Оно будет использоваться в том случае, если фоновое изображение по тем или иным причинам будет недоступно. Свойство background-repeat В случае, когда задано фоновое изображение, это свойство определяет, будет ли оно повторяться по горизонтали и вертикали. Допустимы следующие значения: repeat — изображение повторяется и по вертикали и по горизонтали; repeat-x — изображение повторяется только по горизонтали (по оси x); repeat-y — изображение повторяется только по вертикали (по оси y); no-repeat — изображение не повторяется, остается только одна копия изображения. Пример: DIV { background-image: URL(picture.gif); background-repeat: repeat-x} Текст внутри этого контейнера будет располагаться поверх фонового изображения, которое будет повторяться по горизонтали. Отступы (padding) Как уже было сказано, отступы задают расстояние от границы до содержимого блока. Чтобы понять чем отступы (padding) отличаются от полей (margin) рассмотрим такой пример. Создадим два класса: .p_mar { background-color: #CCCCFF; margin: 2em } .p_pad { background-color: yellow; padding: 2em } Оформим два различных абзаца при помощи этих классов: <P>Для этого абзаца не задано ничего, т.е. используются значения по умолчанию.</P> <P class="p_mar">Для этого абзаца заданы поля (margin) размером 2 em.</P> <P class="p_pad">Для этого абзаца заданы отступы (padding) размером 2 em.</P> Демонстрация примера Внимание! Если размеры полей могут иметь отрицательные значения, то размеры отступов могут быть только положительными. Контейнер блока Формирование веб-страницы при помощи средств CSS сводится к следующему: создается блок и задаются его параметры; вновь созданный блок размещается (позиционируется) на странице. Контентная часть блока может быть не только текстом, изображением, таблицей. Внутри блока могут располагаться и другие блоки. В этом случае первый блок будет являться контейнером для вложенных в него блоков. Для некоторых элементов контейнером служит непосредственно окно браузера. Важно понимать, что общая ширина контейнера складывается из собственно ширины блока, ширины левых и правых полей, толщины левой и правой границ, а также левого и правого отступов. Ширина контентной части блока задается при помощи свойства width, высота — при помощи свойства height. Если ширина блока задается в процентах, то она вычисляется относительно ширины контейнера блока. Пример блока, который будет служить контейнером для абзаца: #main_block { color: red; background-color: #FFFFCC; border: 2px solid red; margin: 2em; padding: 1em; width: 200px } P { width: 50%; border: 2px dotted blue; } <DIV id="main_block">
Содержимое главного блока #main_block
<P>Абзац шириной 50 % своего контейнера</P>
</DIV> Итак, у основного блока граница задана сплошной линией красного цвета, а у вложенного блока — синей пунктирной линией. Демонстрация примера Абсолютное позиционирование Представим окно браузера как систему координат:
Принципы CSS-позиционирования — в том, что вы можете расположить блок в системе координат где угодно. Скажем, мы хотим позиционировать заголовок. При использовании блоковой модели заголовок выглядит так:
Если мы хотим расположить его в 100 пикселах от верхней границы окна браузера и на 200 пикселов правее левой границы окна браузера, то мы должны написать такое правило: h1 { position: absolute; top: 100px; left: 200px; } Вот результат:
Для абсолютного позиционирования элемента свойство position должно иметь значение absolute. Положение блока задается при помощи свойств сдвига: left — смещение левого края блока относительно левого края контейнера; right — смещение правого края блока относительно правого края контейнера; top — смещение верхнего края блока относительно верхнего края контейнера; bottom — смещение нижнего края блока относительно нижнего края контейнера. В качестве примера абсолютного позиционирования разместим 4 блока в углах документа: #box1 { position: absolute; top: 50px; left: 50px; } #box2 { position: absolute; top: 50px; right: 50px; } #box3 { position: absolute; bottom: 50px; right: 50px; } #box4 { position: absolute; bottom: 50px; left: 50px; } Демонстрация примера Плавающие блоки Для того, чтобы в CSS реализовать «резиновую» вёрстку, были придуманы плавающие блоки. Их нельзя позиционировать с точностью до пикселя, как при абсолютном позиционировании. Они могут свободно перемещаться и «прижиматься» к краю своего контейнера. Подобным образом ведут себя рисунки в HTML, для которых задан атрибут align=. Плавающие блоки в CSS определяются свойством float. Свойство float Данное свойство определяет, будет ли блок плавающим и в какую сторону он будет перемещаться. Свойство может принимать следующие значения: left — блок перемещается влево. Остальное содержимое документа будет выводиться вдоль правой стороны блока, начиная с самого верха. right — блок перемещается вправо. Остальное содержимое документа будет выводиться вдоль левой стороны блока, начиная с самого верха. none — блок не перемещается (значение по умолчанию). Рассмотрим пример. Допустим, вы пишете статью, и по ходу необходимо вставлять ремарки или делать комментарии. Поместим эти комментарии внутрь плавающего блока, а сам блок разместим рядом с нужным местом в статье. Создадим такой блок, указав для него свойство float со значением left. Для плавающих блоков всегда надо явно указывать ширину, иначе блок растянется так, чтобы поместить в себя всё содержимое. .comment { background-color: #CCCCFF; border: 1px solid; padding: 5px; width: 250px; float: left } <DIV class="comment">
Текст внутри плавающего блока
</DIV>
<P>Текст, который будет обтекать блок</P> Демонстрация примера А что произойдет, если в HTML-коде разместить несколько одинаковых плавающих блоков? Рассмотрим такой пример кода: <DIV class="comment">
Первый плавающий блок должен «прилипать» к левому краю контейнера.
</DIV>
<DIV class="comment">
Второй плавающий блок — «прилипнет» куда?
</DIV>
<P>... Фрагмент текста ...</P> Демонстрация примера Получается, что второй блок располагается правее первого, несмотря на то что также является левосторонним. Если же требуется изменить положение плавающего блока, то следует воспользоваться свойством clear — аналогом атрибута clear=. Свойство clear Данное свойство определяет, какие стороны плавающих блоков не могут соседствовать с другими плавающими блоками. Свойство может принимать следующие значения: left — блок должен размещаться ниже всех левосторонних плавающих блоков. right — блок должен размещаться ниже всех правосторонних плавающих блоков. right — блок должен размещаться ниже всех плавающих блоков. none — нет ограничений на размещение (значение по умолчанию). <DIV class="comment">
Первый плавающий блок должен «прилипать» к левому краю контейнера.
</DIV>
<DIV class="comment" style="clear:left">
Второй плавающий блок — «прилипнет» куда?
</DIV>
<P>... Фрагмент текста ...</P> Демонстрация примера Из всего сказанного можно сделать вывод, что несколько плавающих блоков будут располагаться на одной линии, если их суммарная ширина будет меньше ширины контейнера или равна ей. Если в качестве контейнера рассмотреть окно браузера, то таким образом легко реализовать вёрстку в несколько колонок. Создадим три плавающих левосторонниз блока, чтобы их суммарная ширина не превышала 100 % ширины окна браузера. #block1 { background-color: #CCCCFF; border: 1px solid; padding: 5px; width: 30%; float: left } #block2 { background-color: #FFCCCC; border: 1px solid; padding: 5px; width: 30%; float: left } #block3 { background-color: #FFCC99; border: 1px solid; padding: 5px; width: 30%; float: left } <DIV id="block1">
Первый плавающий блок должен «прилипать» к левому краю контейнера.
</DIV>
<DIV id="block2">
Второй плавающий блок должен выстроится с первым в одну линию.
</DIV>
<DIV id="block3">
Третий плавающий блок должен выстроится с двумя предыдущими в одну линию.
</DIV> Демонстрация примера Центрирование блока При вёрстке в одну колонку, если она ýже окна браузера, её чаще всего центрируют. Однако центрирование в CSS не так просто реализовать, как кажется на первый взгляд. Свойство text-align: center, к примеру, должно центрировать содержимое блока, но не сам блок относительно контейнера. В этом случае может помочь значение auto свойства margin. По спецификации CSS, для значения auto размеры полей вычисляются особым образом: если оба свойства margin-right и margin-left принимают значение auto, то их вычисляемые значения будут одинаковы. Что это означает? Когда левое и правое поля будут совпадать? Когда блок центрирован! Именно этого мы и добивались. Пример — блок шириной 60 % ширины окна браузера, располагаемый по центру. Но при этом текст в блоке прижат к левому краю, а не центрирован. #block { background-color: #CCCCFF; border: 1px solid; padding: 5px; margin-right: auto; margin-left: auto; width: 60% } <DIV id="block">
Отцентрирован блок, но не его содержимое.
<P>Причем ширина блока меняется, если менять ширину окна браузера.
</DIV> Демонстрация примера Практический пример применения стилей Предположим, что требуется сверстать сайт, имеющий такой внешний вид:
Сразу условимся, что все файлы с изображениями будут находиться в папке images, размещенной в той же папке, что и веб-страницы сайта.
А CSS-стили будут вынесены в отдельный файл sp-style.css. Прежде всего определим, что фоновое изображение sp-fon-1.jpg
будет задано для всего документа, т.е. для элемента BODY; здесь же укажем, что текст документа будет черного цвета: BODY { background-image: URL(images/sp-fon-1.jpg); color: black } Выделим блоки, из которых будет сформирована структура сайта (цвет, которым написано название блока, совпадает с цветом рамки на рисунке): main — основной блок шириной 800 пикселов и размещенный по центру; все остальные блоки должны быть расположены внутри него. head — головная часть сайта шириной 100 %, реализована как таблица с невидимыми границами. punkt — пункты меню сайта. text — содержимое отдельных страниц сайта. Поскольку блоков для пунктов меню несколько, то для них создадим селектор по классу. Тогда как блоки main, head и text будут в единственном экземпляре, а значит для них применим селекторы по идентификатору. Чтобы блок main разместился по центру окна браузера установим значения свойств margin-left и margin-right равными auto. Для блока head укажем его ширину: 100 %. Блоки punkt сделаем плавающими, прижатыми к левому краю;
их ширину зададим равной 24 % (чтобы они уместились в одну линию)
и установим размер отступов сверху и снизу по 10 пикселов. Блок text тоже разместим по центру,
установим размер всех отступов в 1 em,
и зададим для него другой фоновый рисунок (sp-fon-2.jpg)
Для этих блоков CSS-правила будут такими: #main { width: 800px; margin-left: auto; margin-right: auto; } #head { width: 100% } .punkt { float: left; width: 24%; padding-top:10px; padding-bottom:10px; } #text { background-image: URL(images/sp-fon-2.jpg); margin-left: auto; margin-right: auto; padding: 1em; } Создадим класс menu для описания свойств текста в пунктах меню (в том числе, в таблице — головной части сайта).
Эти свойства должны быть такими: размер шрифта — 12 пунктов, гарнитура — Comic Sans MS, шрифт полужирный. .menu { font-size: 12pt; font-family: Comic Sans MS; font-weight: bold } Сформируем «каркас» сайта без таблицы и текста страницы, но с пунктами меню и стрелками (файл arrow.gif): <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 4.0//RU"> <html> <head> <meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=Windows-1251"> <link rel=stylesheet href="sp-style.css" type="text/css"> <title>Пример верстки сайта</title> </head> <body> <div id="main"> <div id="head"> <i>Головная часть сайта</i> </div> <!-- end head --> <div class="punkt"><span class="menu"><img src="images/arrow.gif" width=24 height=18> За бугром</span></div> <div class="punkt"><span class="menu"><img src="images/arrow.gif" width=24 height=18> Родные осины</span></div> <div class="punkt"><span class="menu"><img src="images/arrow.gif" width=24 height=18> Тоска объявлений</span></div> <div class="punkt"><span class="menu"><img src="images/arrow.gif" width=24 height=18> Пальцем в небо</span></div> <div id="text" style="clear:left"> <i>Текст страницы</i> </div> <!-- end text --> <div class="punkt"><span class="menu"><img src="images/arrow.gif" width=24 height=18> За бугром</span></div> <div class="punkt"><span class="menu"><img src="images/arrow.gif" width=24 height=18> Родные осины</span></div> <div class="punkt"><span class="menu"><img src="images/arrow.gif" width=24 height=18> Тоска объявлений</span></div> <div class="punkt"><span class="menu"><img src="images/arrow.gif" width=24 height=18> Пальцем в небо</span></div> </div> <!-- end main --> </body> </html> Демонстрация примера В блоке <div id="text" style="clear:left"> мы добавили атрибут style= со значением clear:left чтобы текст страницы шел заведомо ниже пунктов меню. Блоки <div class="punkt"> размещают пункты меню, а элементы <span class="menu"> — отображают пункты меню требуемыми свойствами шрифта. Создадим таблицу внутри блока head, т.е. в головной части сайта. Ширина этой таблицы равна 800 пикселов, отступ содержимого от границ ячеек — 5 пикселов.
Её структура (если рамку сделать видимой) должна быть такой: Логотип Пункт меню Пункт меню К содержимому в ячейках таблицы с пунктами меню применим тот же класс menu, что и в плавающих блоках. Ячейка с логотипом содержит 2 элемента: текст «Газета от сохи» отображаемый полужирным шрифтом размером 14 пунктов, гарнитурой Comic Sans MS gif-файл собственно с логотипом газеты (sp-logo.gif) шириной 475 пикселов и высотой 70 пикселов.
Для текста «Газета от сохи» создадим класс menu-big и запишем CSS-правило: .menu-big { font-weight: bold; font-size: 14pt; font-family: Comic Sans MS; } А в html-документе заменим «заглушку» <i>Головная часть сайта</i> на таблицу: <div id="head"> <table border=0 width=800 cellpadding=5> <tr> <td rowspan=2><div class="menu-big">Газета от сохи</div> <img src="images/sp-logo.gif" width=475 height=70 alt="Сермяжная правда"> </td> <td><span class="menu"><img src="images/arrow.gif" width=24 height=18> Толкователь</span></td> </tr> <tr> <td><span class="menu"><img src="images/arrow.gif" width=24 height=18> Емеля</span></td> </tr> </table> </div> <!-- end head --> Демонстрация примера Вот теперь перейдём к формированию стилей для текста страницы. В содержательной части страницы присутствуют два вида заголовков:
Н3 — прижатый к правой стороне блока и отображаемый гарнитурой Comic Sans MS
и Н4 — размещаемый по центру. А также абзацы, имеющие выравнивание по ширине. Добавим соответствующие CSS-правила в файл sp-style.css: H3 { font-family: Comic Sans MS; text-align: right } H4 { text-align: center } P { text-align: justify } Кроме того, в тексте есть слово выделенное полужирным курсивом. Предположим, что такое выделение будет встречаться и на других страницах сайта. Чтобы каждый раз не использовать по две команды курсива и полужирного шрифта, добавим стиль полужирного шрифта в команду CITE (есть такая команда в языке HTML, используется для выделения цитат, как правило текст отображается просто курсивом). CITE { font-weight: bold; } В html-документе заменим «заглушку» <i>Текст страницы</i> на то, что там должно быть (правда, пока без картинки): <h3>Толкователь</h3> <h4>Толковый словарь Ожегова</h4> <p>СЕРМЯЖНЫЙ <p>1. см. сермяга. <p>2. перен. Относящийся к бедному крестьянскому быту старой России. <i>Сермяжная Русь</i>. <p><cite>Сермяжная правда</cite> (шутл.) — безыскусственная, идущая от самого существа чего-н. <i>В его словах есть своя сермяжная правда</i>. <h4>«НАУКА И ЖИЗНЬ»</h4> <p>№ 10, 2000 год<br> С. Редичев<br> СЕРМЯЖНАЯ ПРАВДА </p> <p>Что такое сермяга? ... <p>Вот какой длинный и трудный путь был у сермяги. Оставалось сшить из этого материала нужные вещи. Шили вручную, как правило, льняными нитками. <br><i>Получил сермяжные портки, теперь носи и смены не проси</i>. </div> <!-- end text --> Демонстрация примера И, наконец, последнее, что осталось — это создать плавающий блок, в котором будет размещена иллюстрация к тексту и подпись под ней. Для этого применим селектор по классу foto (ведь иллюстраций на странице может быть несколько) со следующими свойствами: плавающий блок должен быть прижат к правой стороне, левое и нижнее поля равны по 15 пикселов (чтобы текст страницы не подступал вплотную к иллюстрации), текст подписи должен отображаться шрифтом размером 10 пунктов, гарнитурой Arial и прижат к правому краю. .foto { float: right; margin-left: 15px; margin-bottom: 15px; font-size: 10pt; font-family: Arial; text-align: right } В html-документе добавим блок <DIV> с атрибутом class="foto". Во втором атрибуте — style="width:357px" — явно укажем ширину блока, равную ширине картинки из файла serm.gif Файл с таблицей стилей sp-style.css можно посмотреть здесь. Итог всех трудов: