Конечно, идеал простоты и функциональности недостижим, цель статьи куда более скромная - привести минимум элементов HTML, для которых имеет смысл прописывать стиль, с тем, чтобы создать простой, функциональный и удобный текстовый дизайн.

Сброс стиля и нужно ли его делать

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

Выход давно придуман, надо делать так называемый "глобальный сброс параметров стиля CSS". Такой "сброс" (подключаемый первым стилевой файл) позволяет обеспечить более-менее одинаковый вид документа в разных браузерах. Особенно желательно сбросить отступы margin и padding.

"Сбросов" тоже существует множество, мне кажется вполне подходящим этот:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
table { /* для таблиц с атрибутом HTML cellspacing="0" */
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

Если не хочется перечислять столько тегов в начале стиля, имеет смысл вспомнить, что в CSS существует "универсальный селектор" * (звёздочка), позволяющий сделать стилевые указания для всех элементов. Но обычно его вполне заменяет стиль для элемента body.

Думаю, что удобнее всего будет разместить код сброса в отдельном файле reset.css и вызывать его директивой @import из основного файла стиля (он будет называться, конечно, style.css):

@import "reset.css";

Наш основной стиль будет вызываться из каждого документа HTML таким тегом:

<link rel="stylesheet" type="text/css" href="style.css">

Здесь предполагается, что документ и файлы стилей находятся в одной папке. На самом деле ничто не мешает указать относительный путь к файлу style.css или его полный URL:

<link rel="stylesheet" type="text/css" href="http://nickolay.info/style.css">

Следует понимать, что этот и любой другой сброс просто выставит в нули и единицы все мыслимые и немыслимые отступы. Фактически, нам придётся ставить их заново для всех используемых в стиле элементов. Не лучше ли взять возможность сброса на заметку, а "танцевать" всё-таки от умолчаний браузеров, смирившись с тем, что верхний отступ от таблицы в "Опере" будет чуть-чуть отличаться от того же в Internet Explorer? Вопрос спорный. Если у страницы профессиональный и очень сложный дизайн, сброс может помочь, если же речь о том, как быстро создать удобный стиль - он только помешает. Так что дальше будем действовать без него.

Как устроен элемент в CSS - границы и единицы измерения

Прежде чем рассуждать о конкретных свойствах, давайте вспомним минимум теории о том, как устроен элемент HTML с точки зрения языка стилей CSS.

Для любого элемента HTML в CSS создается объемлющий его прямоугольник, устройство которого показано на рисунке.

Как видно на рисунке, помимо содержимого каждый элемент содержит заполнитель (padding, вмещающий блок), рамку (border) и прозрачную границу (margin), образующие его внешние слои.

Каждый из этих четырех вложенных прямоугольников распадается на четыре части: левую (left), правую (right), верхнюю (top) и нижнюю (bottom). Периметр каждой из четырех частей прямоугольника называется ее краем, так что каждый элемент может иметь до 4 краев:

• край содержимого ограничивает отображаемую область элемента, в которой выводится его содержимое;
• край заполнителя ограничивает свободное пространство между рамкой и содержимым. Если элемент имеет непрозрачный фон, внешней границей его нанесения будет внешний край заполнителя. Если ширина заполнителя равна 0, его край совпадает с краем содержимого;
• край рамки ограничивает видимую рамку элемента. Если ширина рамки равна 0, то ее край совпадает с краем заполнителя;
• край границы определяет прозрачные поля элемента, расположенные вне рамки. Если ширина границы равна 0, то ее край совпадает с краем рамки.

Каждый край состоит из четырех сторон-частей.

Второй важный момент - при работе со стилями нам часто придется указывать размеры различных объектов. Все размеры в CSS указываются в виде числа, после которого следует единица измерения.

Единицу измерения следует писать слитно с числом, иначе ряд кривых браузеров, таких как "Опера", ничего не покажут.

Первые пять размеров — абсолютные. Формально они применимы только тогда, когда известны точные физические характеристики устройства отображения, например, диагональ дисплея. Указание абсолютных размеров в стиле может лишить пользователя возможности управлять размерами шрифта с помощью браузера, а также привести к тому, что при "слишком большом" или "слишком маленьком" разрешении монитора документ станет неудобочитаемым. На практике всё это разработчики обычно игнорируют.

Оставшиеся четыре размера — относительные.

Единицы em и ex основаны на размере шрифта того элемента, к которому относится использующая их декларация.

Величина em задает размер шрифта как размер его наибольшей буквы, обычно это буква "M", откуда и произошло сокращение em. Величина ex интерпретируется как высота строчных букв шрифта, обычно это высота буквы "x", откуда произошло сокращение ex.

Указание размера в пикселах зависит как от физических размеров экрана дисплея, так и от его разрешения. Так, пиксел на экране с разрешением 640*480 всегда больше, чем на том же экране при установленном разрешении 1280*1024.

Процентные значения указывают на величину элемента в процентах от другой величины. Всюду, где CSS допускает использование процентов, в описании свойств указывается, какая величина является базовой для расчета значений в процентах. Обычно это соответствующее свойство родительского элемента.

Свойства для тегов: какие понадобятся точно?

Цвет фона и шрифта. Обычно - белый и черный соответственно, чаще всего лучше так и оставить. Не возбраняется, впрочем, сделать фон слегка темнее белого, скажем, #EEEEEE, а цвет - слегка светлее черного, #111111 будет, думаю, в самый раз. Фоновые картинки не рекомендую вовсе - разве уж очень хорошие и очень блеклые, чтоб их практически не было заметно.

Базовый шрифт. Им-то и будет всё написано. Принято считать, что на экране лучше воспринимаются шрифты без отточий и засечек ("тонких деталей" букв), они более гладкие, чем обычные символы Times New Roman. Примеры таких шрифтов - Verdana, Arial, Helvetica, Tahoma (не правда ли, первый - самый лучший? Жаль только, что у него с ударениями в HTML проблема). Если мы не хотим зависеть от того, установлен ли у пользователя нужный шрифт, можно написать и

font-family: sans-serif;

Будет использован "родовой" шрифт семейства, начертание которого напоминает наш. Кстати, если не знаете, какие ещё бывают семейства шрифтов, то вот они:

Семейство	Описание
serif	пропорциональные шрифты с засечками на буквах: Times New Roman, Bodoni, Garamond;
sans-serif	пропорциональные шрифты без засечек на буквах: Georgia, Arial, Verdana, Helvetica, Tahoma;
cursive	каллиграфические шрифты, стилизованные под рукописный текст с типичными для него соединениями между буквами: Script, Zapf Chancery;
fantasy	шрифты декоративного характера: Western, Comic Sans MS
monospace	моноширинные или телетайпные шрифты с одинаковой шириной печатаемых символов: Courier New, Prestige, Everson Mono

У Вас все шрифты в этой табличке показались? Если да, повезло. У меня нет. И у большинства пользователей не покажутся. Отсюда вывод - лучше всего ограничиться минимальным набором широко распространённых шрифтов - Verdana, Arial или Georgia для всего документа и Courier New для листингов. Не плодите лишних сущностей.

Итак, основной шрифт без засечек пропишем в body, не забудем также указать размер, цвет и расстояние между строками (обычно имеет смысл его чуть-чуть увеличить, так лучше). Для абзацев укажем также небольшие отступы margin, не забудем и про аналогичные настройки для таблиц. Вот что получится:

body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 background-color: #EEEEEE;
 color: #111111;
 font-size : 12px;
 line-height: 16px;
}
p,ul,ol,dl {
 margin-top: 3px;
 margin-bottom: 3px;
}
dt {
 font-weight: bold;
}
table {
 font-size : 12px;
 line-height: 16px;
}

Здесь заодно поправлены отступы сверху и снизу для базовых видов списков и выделено жирным "определение" в списке определений.

Указывать что-то лишнее для таблиц не нужно - ведь таблицы - один из немногих элементов HTML, который нужен и для дизайна, и для информации. Лучше прописать нужные свойства таблицы тегом, например

<table width="100%" border="1" cellpadding="4" cellspacing="0">

Выделение элементов текста. При написании текста нам обязательно понадобится несколько его разновидностей: обычный текст, который мы уже определили, заголовки, мелкий текст для разных сносок и примечаний, стили для цитат и листингов. К последним относится любой текст, где существенно разбиение по строкам - от программного кода до стихов. Общий совет здесь очень простой - ни к чему плодить лишние классы, используйте соответствующие теги HTML. Для заголовков определим стили тегов H1-H3 (если мало 3 уровней, можно и до H6 включительно), мелкий текст идеально определяется стилем тега SMALL, для цитат есть тег BLOCKQUOTE, а для листингов всех видов - PRE. Вот какие определения, например, можно для них сделать:

h1,h2,h3 {
 font-weight: bold; 
 line-height: 16px;
 color : #000000;
}
h1 {
 font-size: 18px; 
}
h2 {
 font-size: 16px; 
}
h3 {
 font-size: 14px; 
}
small {
 font-size : 9px; 
 line-height: 12px;
}
blockquote {
 font-size: 11px; 
 color: #444444; 
 line-height: 110%;
 background-color: #F0F0F0; 
 border: #D1D7DC; 
 border-style: solid;
 border: 1px;
}
pre {
 font-family: monospace; 
 font-size: 11px; 
 color: #003300;
 background-color: #F3F3F3; 
 border: #D1D7DC; 
 border-style: solid;
 border: 1px;
}

Ссылки. Выберем цвета для посещенных и непосещенных ссылок, различать их нужно обязательно. Убирать ли подчеркивание - вопрос спорный, давайте укажем в стиле "убрать", но при наведении курсора будем подчеркивать. Конечно, главное для ссылок - они должно быть четко обозначены и не вызывать проблем с их идентификацией пользователем.

a:link,a:active { 
 text-decoration: none; color : #006699; 
}
a:visited {
 text-decoration: none; color : #003399; 
}
a:hover	{ 
 text-decoration: underline; color : #DD6900; 
}

Блоки на сайте - удобнее всего через стили

Наконец, вне зависимости от того, статический или динамический у Вас сайт, на нём будут некие блоки с информацией. Как минимум, заголовки или "колонки". Также бывает не обойтись без навигационных ссылок, отличающихся от "обычных". Делается это всё с помощью классов таблиц и ссылок.

Я не считаю хорошим полностью "табличный" дизайн, на котором сделано 99% сайтов. Что бы там ни говорили разработчики, большинством браузеров таблица отображается по-прежнему только будучи загруженной целиком. Но для выделения верхней навигационной или нижней информационной части страницы всё равно ничего лучше не придумать. Вот давайте один такой класс и сделаем, для верха и низа страницы, назовём его для краткости n.

.n {
 font-size : 12px;
 line-height: 12px;
 background-color: #FFFFFF;
 margin: 0px;
 border-style: dotted;
 border-color:#0033FF;
 border-width: 1px;
 border-collapse: collapse;
 border-spacing: 0px;
}

Так здесь все табличные свойства указаны в стиле, при "вызове" из HTML достаточно будет указания ширины таблицы и имени класса:

<table width=100% class="n">

Навигационную ссылку обзовём nav и сделаем пожирнее:

.nav {
 font-weight: 600;
}

При формировании блока навигационных ссылок это потребует указывать для них соответствующий класс:

<a href="http://nickolay.info" class="nav">Nickolay.info</a>

Возможно, это не всё, но не так уж много задач, для которых получившийся несложный стиль (или аналогичный ему) не подойдёт.

 Этот стиль в файле style.css

 Тестовый файл с этим стилем

Вот для сравнения один из "рекомендуемых" от W3C стилей, а именно "Modernist". Наш файл с ним превратился в нечто жуткое, притом что размер стиля намного больше.

гостевая; E-mail