Joomla портал
seo seo Subscribe
0
seo

Использование блочной модели 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-разметка гораздо проще кода листа стилей, поэтому мы приведем

листинги, отражающие все три вида страниц.

seo
5th Фев 2011
Теги:
seo

Написать ответ

seo
 
seo
Все права защищены © 2023 Joomla портал
 
 
seo