double arrow

Файл стилей: style.css

/* Правила для экранной версии представления данных */

@media screen {

/* Общие установки для страницы */

html, body { margin: 0px; padding: 0px; border: 0px; }

body { color: #000; background: #999 url(images/bg_page.gif) scroll;

font-family: Georgia, "Times New Roman", Times, serif; }

/* "Подложка" для всей страницы */

#carrier { width: 100%; background: #fff; }

/* Шрифт для "шапки", меню навигации, заголовков второго уровня в основном тексте и "подвала" */

#header, #menu, #text h2, #footer {

font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;

}

/* Общие правила оформления "шапки" и "подвала" */

#header, #footer p { color: #fff; background: #369; padding: 10px 20px;

margin: 0px; }

/* Представление "шапки" */

#header { font-size: 250%; border-bottom: solid 5px #69c; }

/* На внутренних страницах сайта титульная надпись в "шапке"

выступает в качестве ссылки на главную страницу. Для этой

ссылки задаются такие правила, чтобы она визуально была

неотличима от заголовка без ссылки */

#header a:link, #header a:visited, #header a:hover, #header a:active {

color: #fff; text-decoration: none; }

/* "Подложка" для навигационного меню. Ширина области навигации

постоянна во всех браузерах и составляет 200 пикселей */

#menucarrier { width: 200px; margin-bottom: 20px; float: left;

background: #fff0cc url(images/bg_menu.gif) center repeat-y scroll; }

/* Собственно блок навигации */

#menu { font-size: 18px; text-align: center; padding: 10px 20px;

border-style: none dotted dotted none; border-width: 0px 2px 2px 0px;

border-color: #c00; }

/* Хитрые игры со свойствами margin и padding имеют целью

полную совместимость с IE5. Блок навигации отображается в IE5

так же, как и в более современных браузерах. "Кнопки"

навигационного меню расположены на расстоянии 20 пикселей

друг от друга и от границ навигационного блока по вертикали */

#menu p { padding: 10px 0px; margin: 0px; }

/* При помощи свойства display мы превращаем гиперссылки и

контейнер <span>...</span>, размещенные в блоке навигации, из

внутристрочных элементов в блочные, что дает нам возможность

указать ширину при помощи свойства width */

#menu a, #menu span { display: block; width: 154px; margin: auto; }

/* Далее следуют правила представления "кнопок" навигационного меню.

Их четыре вида: 1) обыкновенные; 2) выделенные при помощи курсора

мыши; 3) соответствующие текущему "магистральному" разделу и

предназначенные для его внутренних страниц - для таких "кнопок"

назначен класс current; 4) соответствующие текущей

странице и поэтому не являющиеся ссылками - этот вид "кнопок"

представлен элементами <span>...</span> */

#menu a { color: #000; text-decoration: none; }

#menu a:link, #menu a:visited { background: #fff0cc; border: solid 2px #fc9; }

#menu a:hover, #menu a:active, #menu a.current:link, #menu a.current:visited, #menu span {border-style: solid dotted; border-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: #fff0cc; }

/* Дальнейшие правила определяют оформление элементов области

основного текстового содержания страницы */

#text { margin-left: 200px; padding: 20px; }

#text h2 { font-size: 120%; font-weight: normal; text-transform: uppercase;

color: #369; }

/* Псевдокласс first-child указывает на первый вложенный

в блок #text заголовок <h2>...</h2>. Для таких заголовков

верхний вертикальный отступ устанавливается равным нулю.

Впрочем, Internet Explorer не понимает этого псевдокласса,

так что в браузере от Microsoft первый заголовок области

основного текста будет расположен заметно дальше от

"шапки", нежели в браузерах, относящихся к рекомендациям

W3C более уважительно */

#text h2:first-child { margin-top: 0px; }

/* Абзацы основного текста оформляются в соответствии

с традициями русскоязычного текстового набора */

#text p { text-align: justify; text-indent: 1.5em; margin: 0px; }

/* Класс абзацев, предназначенный для новостей сайта */

#text p.news { text-align: left; text-indent: 0pt; margin-top:.5em;

margin-bottom:.5em; }

/* Класс, позволяющий выделять полужирным начертанием

даты свежих обновлений сайта */

.date { font-weight: bold; }

/* Представление нумерованных и маркированных списков

в основном тексте */

#text ul, text ol { margin-top: 0px; margin-bottom: 0px; }

#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; }

/* Правила, определяющие представление "подвала" и содержащихся в нем

элементов - абзацев и гипертекстовых ссылок */

#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: 0px; padding: 0px; border: 0px; }

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: 0px; }

#menucarrier { background: #fff0cc; border-top: solid 1px #666;

border-bottom: solid 1px #666; }

#footer { border-top: solid 1px #666; }

h2, p { margin: 5px 0px; }

#text h2 { font-size: 14px; }

ul { list-style: square inside; margin: 5px; padding: 0px; }

li { margin: 0px; padding: 0px; }

a:link { color: #00f; }

a:visited { color: #609; }

}

/* Правила для печатной версии представления данных.

Этот фрагмент листа стилей еще проще. При помощи свойства

display со значением none мы скрываем все элементы, не

требующиеся в печатной версии - "шапку", блок навигации

и "подвал". Остается только область основного текста.

Используем рубленый шрифт кегля 16 пунктов для заголовков,

антикву кегля 12 пунктов для всего остального. Всему

тексту, включая гиперссылки, назначаем черный цвет. */

@media print {

body { color: #000; 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; }

}


Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



Сейчас читают про: