Практический пример применения стилей
Предположим, что требуется сверстать сайт, имеющий такой внешний вид:
Сразу условимся, что все файлы с изображениями будут находиться в папке 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 можно посмотреть здесь.
Итог всех трудов:
Задание
Спецкурс
«Интернет-технологии»
Лабораторная работа № 3
Теория