Применение веб-технологий стороны клиента для создания сайтов
width: 100%;
background: #fff;
}
/* Шрифт для «шапки», меню навигации, заголовков второго
уровня в основном тексте и «подвала» */
#header, #menu, #text h2, #footer {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
/* Общие правила оформления «шапки» и «подвала» */
#header, tfooter p {
color: tfff;
background: #369;
padding: Юрх 2 Opx;
margin: Opx;
}
/* Представление «шапки» */
#header {
font-size: 250%;
border-bottom: solid 5px #69c;
}
/* На внутренних страницах сайта титульная надпись в «шапке»
выступает в качестве ссылки на главную страницу. Для этой
ссылки задаются такие правила, чтобы она визуально была
неотличима от заголовка без ссылки */
#header a:link, theader a:visited, theader a:hover, theader a:active {
color: tfff;
text-decoration: none;
}
/* «Подложка» для навигационного меню. Ширина области навигации
постоянна во всех браузерах и составляет 200 пикселов */
tmenucarrier
{
width: 20Opx;
margin-bottom: 20px;
float: left;
background: #fff0cc url(images/bg_menu.gif) center repeat-y scroll;
}
/* Собственно блок навигации */
tmenu {
font-size: 18px;
Глава 4. Использование блочной модели Св82для верстки сложных веб-страниц 239
text-align: center;
padding: Юрх 2 Opx;
border-style: none dotted dotted none;
border-width: Opx 2px 2px Opx;
border-color: #c00;
}
/* Хитрые игры со свойствами margin и padding имеют целью
полную совместимость с IE5. Блок навигации отображается в IE5
так же, как и в более современных браузерах. «Кнопки»
навигационного меню расположены на расстоянии 20 пикселов
друг от друга и от границ навигационного блока по вертикали */
#menu p {
padding: Юрх Орх;
margin: Opx;
}
/* При помощи свойства display мы превращаем гиперссылки и
контейнер …, размещенные в блоке навигации, из
внутристрочных элементов в блочные, что дает нам возможность
указать ширину при помощи свойства width */
#menu a, #menu span
{
display: block;
width: 154px;
margin: auto;
}
/* Далее следуют правила представления «кнопок» навигационного меню.
Их четьгре вида: 1) обыкновенные; 2) вьоделенные при помощи курсора
мыши; 3) соответствующие текущему «магистральному» разделу и
предназначенные для его внутренних страниц — для таких «кнопок»
назначен класс current; 4) соответствующие текущей
странице и поэтому не являющиеся ссылками — этот вид «кнопок»
представлен элементами … */
#menu a {
color: #000;
text-decoration: none;
}
#menu a:link, #menu a:visited {
background: #fff0cc;
border: solid 2px #fc9;
240 Часть //. Применение веб-технологий стороны клиента для создания сайтов
#menu a:hover, #menu a:active, #menu a.current:link,
^#menu a.current:visited, #menu span {
border-style: solid dotted;
borde r-width: 2px;
border-color: #c00;
}
#menu a.current:link, #menu a.current:visited, #menu span {
background: #fff;
}
#menu span
{
color: #999;
}
#menu a.current:hover, #menu a.current:active {
background: #fffOcc;
}
/* Дальнейшие правила определяют оформление элементов области
основного текстового содержания страницы V
#text {
margin-left: 200рх;
padding: 20рх;
}
#text h2 {
font-size: 120%;
font-weight: normal;
text-transform: uppercase;
color: #369;
}
/* Псевдокласс first-child указывает на первый вложенный
в блок #text заголовок
…
. Для таких заголовков
верхний вертикальный отступ устанавливается равным нулю.
Впрочем, Internet Explorer не понимает этого псевдокласса,
так что в браузере от Microsoft первый заголовок области
основного текста будет расположен заметно дальше от
«шапки», нежели в браузерах, относящихся к рекомендациям
W3C более уважительно */
#text h2:first-child {
margin-top: Opx;
}
/* Абзацы основного текста оформляются в соответствии
с традициями русскоязычного текстового набора */
#text p {
text-align: justify;
Глава 4.
|
5th Фев 2011
|
Теги:
|