Таблица стилей:
как она выглядит, и что в ней предусмотрено?

Как она выглядит?

body {background: #ffc; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; margin: 0; padding: 0}
h1, h2, h3, h4 {color: #036}
h1 {font-size: 165%; text-align: center; margin-top: 0; padding-top: 0}
h2 {font-size: 130%}
h3 {font-size: 100%}
h4, p, li, dt, dd, th, td, caption {font-size: 90%}
h1, h2 {font-weight: normal}
h3, h4, dt, th {font-weight: bold}
dt {padding-top: 1em}
div.corpus td, th, caption, .map {padding: 1em}
div.corpus table, div.corpus td, th {border-collapse: collapse; border-style: solid; border-width: 1px; border-color: #000}
a:hover {color: #fff; background: #800; text-decoration: none}
.corpus {padding-left: 10%; padding-right: 10%}
.addr, .nav, .map {color: #666; font-size: 80%}
.addr {text-align: center; padding: 2em}
.nav {background: #fc9; margin: 0; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #036; padding: 0.5em}
.map {text-align: right; margin: 0}
.portrait {border-style: none}
.example {background: #fff; border-style: solid; border-width: 1px; border-color: #000; padding: 2em}

В таблице стилей, которую вы видите в рамке, есть пробелы и разрывы строк. Без них человеку трудно просматривать код. Компьютеру все равно, поэтому из лежащей на сервере версии пробелы (кроме трех, необходимых для правильной интерпретации кода) и разрывы строк удалены. Удаление пробелов и разрывов строк позволяет сэкономить 147 Байт (13.6% объема исходного файла с пробелами).

Где она находится на сайте?

Таблица стилей находится по адресу http://dhhse.narod.ru/main.css. Желающие могут на нее посмотреть.

Что в ней предусмотрено?

Сначала описаны свойства элементов: всего тела документа в целом, заголовков, абзацев (параграфов) текста, элементов списков и частей таблиц. Потом описаны свойства классов (их названия начинаются с точки). К свойствам элементов относятся цветовое и шрифтовое оформление, оформление рамок таблиц и блоков текста, а также позиционирование блоков текста (отступы от краев экрана и от других блоков).

Описание формата таблиц получилось несколько длиннее, чем могло бы. Это связано с тем, что во всплывающем окне с рекламным баннером narod.ru для позиционирования элементов используется таблица. Если не сделать нужных оговорок в таблице стилей, окно рекламного баннера многократно увеличится в размерах.

Все размеры шрифтов и зависимые от них размеры отступов указаны в относительных единицах. Это позволяет людям со слабым зрением увеличить по желанию размер шрифта в тех браузерах, в которых это предусмотрено. При оформлении использован минимум цветов. Цвета фона подобраны так, чтобы можно было сохранить без изменения стандартные цвета ссылок. Подробнее о том, почему все выглядит так, а не иначе, см. в разделе дизайнерская концепция.

.corpus

Благодаря этому классу текст основной части страницы отображается с отступом от края экрана.

.addr

Благодаря этому классу адрес внизу страницы написан маленькими серыми буквами.

.nav

Благодаря этому классу первая навигационная строка наверху страницы выделена более темным фоном и более мелким шрифтом и отграничена от основной части страницы.

.map

Этот класс описывает свойства второй навигационной строки, содержащей ссылку на карту сайта.

.portrait

Благодаря этому классу картинки могут не иметь рамки.

.example

Этот класс описывает белые рамки с контуром, в которых размещены примеры кода на этой странице.