Использование блочной модели CSS2 для верстки сложных веб-страниц 241
text-indent: 1.5em;
margin: Opx;
}
/* Класс абзацев, предназначенный для новостей сайта */
#text p.news {
text-align: left;
text-indent: Opt;
margin-top: .5em;
margin-bottom: .5em;
}
/* Класс, позволяющий выделять полужирным начертанием
даты свежих обновлений сайта */
.date {
font-weight: bold;
}
/* Представление нумерованных и маркированных списков
в основном тексте */
#text ul, text ol {
margin-top: Opx;
margin-bottom: Opx;
}
#text ul {
list-style-type: square;
}
/* Оформление ссылок в основном тексте */
#text a {
text-decoration: none;
}
#text a-.link {
color: #f60;
}
#text a:visited
{
color: #999;
}
#text a:hover {
text-decoration: underline;
}
#text a:active {
color: #f00;
}
242 Часть II. Применение веб-технологий стороны клиента для создания сайтов
/* Правила, определяющие представление «подвала» и содержащихся в нем
элементов — абзацев и гипертекстовых ссылок */
#footer {
width: 100%;
clear: both;
}
#footer p {
font-size: 70%; border-top: solid 5px #69c;
}
#footer a:link, #footer a:visited, #footer a:hover, #footer a:active {
color: #fff;
text-decoration: underline;
}
}
/* Правила, определяющие версию представления данных для карманных
компьютеров. Никак не взаимосвязаны с правилами, определенными
для экранной версии представления. Перечисленные ниже конструкции
очень простые, комментировать здесь почти нечего. Все блоки
позиционированы согласно простейшей схеме static и следуют
друг за другом в нормальном потоке. Размер шрифта для всего
текста страницы задан в пикселах: 16 пикселов для заголовков
первого уровня, 14 — для заголовков второго уровня и 12 — для
всех остальных элементов */
@media handheld {
html, body {
margin: Opx;
padding: Opx;
border: Opx;
}
body {
font: 12px Tahoma, Arial, Helvetica, sans-serif;
color: #000;
background: #fff;
}
#header, #menucarrier, #text, #footer {
padding: 5px;
}
#header, #footer {
background: #ccc;
}
#header {
font-size: 16px;
margin: Opx;
}
Глава 4. Использование блочной модели С882для верстки сложных веб-страниц 243
#menucarrier {
background: #fffOcc;
border-top: solid lpx #666;
border-bottom: solid lpx #666;
}
Hi footer {
border-top: solid lpx #666;
}
h2, p {
margin: 5px Opx;
}
#text h2
{
font-size: 14px;
}
ul {
list-style: square inside;
margin: 5px;
padding: Opx;
}
li {
margin: Opx;
padding: Opx;
}
a:link {
color: #00f;
}
a .-visited {
color: #609;
}
}
/* Правила для печатной версии представления данных.
Этот фрагмент листа стилей еще проще. При помощи свойства
display со значением попе мы скрываем все элементы, не
требующиеся в печатной версии — «шапку», блок навигации
и «подвал». Остается только область основного текста.
Используем рубленый шрифт кегля 16 пунктов для заголовков,
антикву кегля 12 пунктов для всего остального. Всему
тексту, включая гиперссылки, назначаем черный цвет. */
@media print {
body {
color: #000;
244 Часть //. Применение веб-технологий стороны клиента для создания сайтов
font: 12pt «Times New Roman», Times, serif;
}
#header, #menucarrier, #footer {
display: none;
}
#text h2 {
font: 16pt Arial, Helvetica, sans-serif;
}
#text a {
color: #000;
text-decoration: none;
}
Типы страниц
Наш сайт включает в себя три вида страниц. Это главная страница; страницы
оглавлений «магистральных» разделов; и, наконец, страницы третьего уровня
вложенности, т. е. внутренние страницы разделов.
Перечисленные категории документов отличаются друг от друга, во-первых,
структурой содержания элемента .. ., во-вторых, тем, что
титульная надпись в «шапке» всякой страницы, за исключением главной,
является ссылкой на последнюю, и в-третьих, устройством навигационного блока.
HTML-разметка гораздо проще кода листа стилей, поэтому мы приведем
листинги, отражающие все три вида страниц.
|
5th Фев 2011
|
Теги:
|