Введение в CSS, Дейв Рэгетт

Это краткое руководство по использованию стиля в Web-страницах. В нем показано, как использовать язык каскадных таблиц стилей (CSS) W3C, а также использования средств HTML в качестве альтернативы. The route will steer you clear of most of the problems caused by differerences between different brands and versions of browsers.

Чтобы таблицы стилей работали, важно, чтобы в разметке не было ошибок. Автоматически исправить ошибки разметки можно с помощью утилиты HTML Tidy. Кроме того, эта утилита располагает разметку так, чтобы ее было удобнее читать и редактировать. Рекомендую Вам регулярно запускать Tidy и проверять всю разметку, которую Вы редактируете. Tidy очень эффективен при устранении ошибок в разметке, создаваемой некорректными средствами разработки.

Приступая к работе

Начнем с установки цвета текста и фона. Это можно сделать с помощью элемента STYLE, позволяющего определить свойства стиля для тегов документа:

То, что находится между тегами <style> и </style>, записывается в специальном виде для правил стиля. Каждое правило начинается с имени тега, за которым следует список свойств стиля, заключенный в фигурные скобки. В данном примере правило соответствует тегу body. Вы увидите, что тег body определяет общий вид Web-страницы.

Каждое свойство стиля начинается с имени свойства, за которым следует двоеточие, а затем значение свойства. Если в списке имеется несколько свойств стиля, их нужно разделять точкой с запятой. В данном примере указаны два свойства - "color" устанавливает цвет текста, а "background" - цвет фона страницы. Я рекомендую всегда ставить точку с запятой, даже после последнего свойства.

Цвета могут задаваться названиями или числовыми значениями, например rgb(255, 204, 204) - густо-розовый. 3 числа представляют красный, зеленый и синий компоненты соответственно в диапазоне 0 - 255. Можно использовать и шестнадцатеричный формат, в котором этот же цвет будет представлен как #FFCCCC. Подробнее о цветах написано в следующем разделе.

Обратите внимание, что элемент style должен размещаться в заголовке (head) документа вместе с элементом title. Он не может находиться в теле элемента body.

Ссылка на отдельную таблицу стилей

Если Вы хотите использовать один и тот же стиль на нескольких Web-страницах, имеет смысл создать отдельную таблицу стилей, на которую будет установлена ссылка с каждой страницы. Это можно сделать следующим образом:

Тег LINK должен располагаться в элементе head. Для атрибута rel должно быть установлено значение "stylesheet", чтобы браузер мог определить, что атрибут href задает Web-адрес (URL) таблицы стилей.

Установка полей страницы

Web-страницы гораздо лучше выглядят с большими полями. Величину левого и правого полей можно задать с помощью свойств "margin-left" и "margin-right", например

Это правило устанавливает ширину левого и правого поля равной 10% ширины окна, и при изменении размера окна браузера поля будут изменяться.

Установка левого и правого отступа

Чтобы немного выделить заголовки, можно начинать их с поля, установленного для элемента body, например

В данном примере приведены три правила стиля. Одно для элемента body, одно для элемента h1 (используется для самых главных заголовков) и одно для всех остальных заголовков (h2, h3, h4, h5 и h6). Поля заголовков добавляются к полям элемента body. Отрицательные значения используются для смещения точки начала заголовка влево относительно поля, установленного для элемента body.

В последующих разделах примеры правил стиля нужно будет помещать в элемент style в заголовке документа (если он имеется) или в связанную с документом таблицу стилей.

Установка пустого пространства над и под объектом

Браузеры достаточно хорошо выбирают пустое пространство над и под заголовками, абзацами и т.д. Две причины, чтобы, тем не менее, взять управление пустым пространством в свои руки: если Вы хотите, чтобы перед определенным абзацем или заголовком был слишком большой отступ или если Вам нужно точно контролировать расстояния вообще.

Свойство "margin-top" определяет отступ над, а "margin-below" - под объектом. Чтобы установить эти свойства для заголовка h2, запишите:

em - это очень полезная единица измерения, поскольку она соотносится с размером шрифта. Один em равен высоте шрифта. Используя em, Вы можете сохранить общий вид Web-страницы независимо от размера шрифта. Это куда более безопасно, чем использование пикселов или точек, которые могут вызвать проблемы у пользователей с большими шрифтами.

В текстовых процессорах обычно используются точки, например, 10pt. К сожалению, один и тот же размер точки по-разному представляется в разных браузерах. То, что в одном браузере выглядит замечательно, в другом может быть совершенно невозможно прочесть! Использование em устраняет эти проблемы.

Чтобы задать отступ над конкретным заголовком, следует создать для этого заголовка именованный стиль. Это делается с помощью атрибута class в разметке, например

Правило начинается с имени тега, за которым следует точка, а потом значение атрибута class. Между словами и точкой не должно быть пробелов, иначе правило не будет работать. Есть и другие способы установки стиля для конкретного элемента, но атрибут class - самый гибкий.

Если за заголовком следует абзац текста, значение margin-bottom для заголовка не добавляется к значению margin-top абзаца. Вместо этого используется максимальное из этих двух значений. То же правило действует в отношении margin-top и margin-bottom независимо от того, для каких тегов они указаны.

Отступ первой строки

Иногда нужно, чтобы первая строка каждого абзаца начиналась с отступа. Следующее правило стиля эмулирует традиционный способ представления абзацев в книгах:

Оно задает отступ первой строки каждого абзаца равным 2 em и запрещает расстояние между абзацами.

Управление шрифтом

В этом разделе описано, как установить шрифт и его размер и как использовать курсив, полужирный и другие стили.

Стили шрифтов

Чаще всего используются такие стили как курсив и полужирный шрифт. Большинство браузеров представляют тег em tag курсивом, а тег strong - полужирным шрифтом. Предположим, что Вы хотите, чтобы содержимое элемента em представлялось полужирным курсивом, а содержимое элемента strong полужирным шрифтом в верхнем регистре:

Если Вы захотите представлять все заголовки в нижнем регистре, Вы можете сделать это следующим образом:

Установка размера шрифта

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

В данном примере размеры заголовков устанавливаются в процентах относительно размера, используемого для обычного текста:

Задание семейства шрифтов

Весьма вероятно, что Ваш любимый шрифт не будет доступен всем браузерам. Чтобы справиться с этой проблемой, можно перечислить несколько шрифтов в порядке предпочтения. Список гарантированно доступных шрифтов достаточно короток, поэтому рекомендуется заканчивать Ваш список одним из следующих шрифтов: serif, sans-serif, cursive, fantasy или monospace, например:

В данном примере важные заголовки будут при возможности отображаться с использованием шрифта Garamond, если его нет, то Times New Roman, а если и он недоступен, то с использованием шрифта с засечками, используемого в браузере по умолчанию. Текст абзаца будет отображаться шрифтом Verdana или шрифтом без засечек, используемым в браузере по умолчанию.

Разборчивость шрифтов обычно зависит от высоты букв нижнего регистра, чем от собственно размера шрифта. Шрифты типа Verdana гораздо более разборчивы, чем шрифты типа "Times New Roman", и поэтому для текста абзацев рекомендуется использовать именно их.

Как избежать проблем со шрифтами и полями

Мое первое правило - избегать текста на уровне body, который бы не был вложен в элемент уровня блока типа p. Например:

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

Мое второе правило - задавать семейство шрифтов для элементов pre, поскольку некоторые браузеры забывают использовать шрифты фиксированной ширины, если Вы устанавливаете размер шрифта или другие свойства для элемента pre.

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

Границы и фон

Границу можно легко разместить вокруг заголовка, списка, абзаца или их группы, поместив их в элемент div. Например:


div.box { border: solid; border-width: thin; width: 100% }

Обратите внимание, что, если не установить свойство "width", некоторые браузеры слишком выносят правое поле вправо. Это можно использовать с разметкой следующим образом:


<div class="box">

Содержимое этого элемента DIV будет заключено в тонкую рамку.

</div>

Имеются следующие типы границ: dotted (точечная), dashed (пунктирная), solid (сплошная), double (двойная), groove (вдавленная), ridge (выпуклая), inset (вложенная) и outset (наложенная). Свойство border-width определяет ширину. Его значения: thin (тонкая), medium (средняя) и thick (толстая); кроме того, можно задавать конкретное значение, например, 0.1em. Свойство border-color позволяет установить цвет.

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


  div.color {

    background: rgb(204,204,255);

    padding: 0.5em;

    border: none;

  }

Без явного определения свойства border некоторые браузеры будут изменять цвет фона только под каждым символом. Свойство padding задает некоторое расстояние между краями закрашенной области и содержащимся в ней текстом.

Можно задать различные значения этого расстояния слева, сверху, справа и снизу с помощью свойств padding-left, padding-top, padding-right и padding-bottom, например padding-left: 1em.

Предположим, Вам нужны границы не со всех сторон. С помощью семейства свойств border-left, border-top, border-right и border-bottom с соответствующим суффиксом: style, width или color можно управлять свойством border для каждой из сторон независимо, например

Здесь устанавливается красная граница вдоль нижнего и левого краев абзацев, принадлежащих классу "changed".

Установка цветов

Вот некоторые примеры установки цветов, используемых в предыдущих разделах. Напоминание:

Здесь по умолчанию устанавливается черный текст на белом фоне, но элементы strong представляются красным цветом. 16 стандартных названий цветов описаны ниже. Кроме того, можно использовать десятичные значения для красного, зеленого и синего компонентов, каждое значение должно лежать в диапазоне от 0 до 255, например, rgb(255, 0, 0) - то же самое, что red. Можно использовать и шестнадцатеричные значения цветов, которые начинаются символом '#', за которым следует шесть шестнадцатеричных цифр. Ниже имеется конвертер, позволяющий преобразовывать значения из RGB в шестнадцатеричные.

Задание цветов ссылок

CSS можно использовать для установки цвета гипертекстовых ссылок с использованием разных цветов для непросмотренных, просмотренных и активных ссылок (то есть ссылок, на которых происходит щелчок в данный момент). Можно даже определить цвет, принимаемый ссылкой при указании на нее мышью.

Можно представлять гипертекстовые ссылки без обычного подчеркивания. Это делается путем установки для свойства text-decoration значения none, например:

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

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

Дальтонизм

Работая с цветом, помните, что от 5 до 10% людей страдают той или иной формой дальтонизма. Это может вызвать затруднения при различении красного и зеленого или желтого и синего. В редких случаях люди вообще не воспринимают цвета. Рекомендую избегать таких комбинаций цвета текста/фона, которые затруднят чтение текста людьми, страдающими дальтонизмом.

Именованные цвета

Стандартный набор названий цветов: белый, бирюзовый, голубой, желтый, зеленый, коричневый, красный, оливковый, пурпурный, розовый, светло-серый, серый, темно-синий, черный, ярко-зеленый, ярко-синий. Эти 16 цветов определены в HTML 3.2 и 4.01 и соответствуют основному набору VGA на персональных компьютерах. Большинство браузеров понимают более широкий набор названий, но их использование не рекомендуется.

Таким образом, значение "#800080" аналогично значению "purple".

Шестнадцатеричные значения цветов

Значения типа "#FF9999" представляют цвета в виде шестнадцатеричных значений красного, зеленого и синего цветов. Первые два символа после знака # задают значение красного цвета, следующие два - зеленого, а два последних - синего. Эти числа всегда лежат в десятичном диапазоне от 0 до 255. Если Вы знаете десятичные значения, их можно преобразовать в шестнадцатеричные с помощью калькулятора, например, входящего в состав Microsoft Windows.

Безопасные для браузеров цвета

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

Большинство браузеров поддерживают так называемую "безопасную для барузеров" палитру. В ней используется 6 равноотстоящих градаций красного, зеленого и синего цветов и их комбинаций. Выбирая цвета из этой палитры, Вы избежите пятен. Особенно это полезно для фоновых изображений.

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

Они составляются из цветов, в которых красный, зеленый и синий компоненты ограничены следующими значениями:

Вот таблица безопасных цветов и их шестнадцатеричных значений. Спасибо за нее Бобу Штейну.

**Названия цветов и их sRGB-значения**
	черный = "#000000"		зеленый = "#008000"
	светло-серый = "#C0C0C0"		ярко-зеленый = "#00FF00"
	серый = "#808080"		оливковый = "#808000"
	белый = "#FFFFFF"		желтый = "#FFFF00"
	коричневый = "#800000"		темно-синий = "#000080"
	красный = "#FF0000"		ярко-синий = "#0000FF"
	пурпурный = "#800080"		бирюзовый = "#008080"
	розовый = "#FF00FF"		голубой = "#00FFFF"

RGB	00	51	102	153	204	255
Hex	00	33	66	99	CC	FF

Образцы цветов безопансой палитры для большинства графических пакетов можно бесплатно загрузить с www.visibone.com.

Что если браузеры не поддерживают CSS?

Более старые браузеры, до Netscape 4.0 и Internet Explorer 4.0, либо не поддерживают CSS вообще или поддерживают некорректно. Для них можно управлять стилями средствами HTML.

Установка цвета и фона

Установить цвет можно с помощью тега BODY. В следующем примере устанавливается белый цвет фона и черный цвет текста:

Элемент BODY должен располагаться до видимого содержимого Web-страницы, например, до первого заголовка. Кроме того, Вы можете управлять цветом гипертекстовых ссылок. Для этого имеется три атрибута:

Браузер может располагать мозаикой фоновое изображение, которое может задаваться Web-адресом, например

На случай, если браузер не сможет представить изображение, имеет смысл указать цвет фона с помощью атрибута bgcolor. Убедитесь, что выбранные цвета не затрудняют чтение. Рассмотрим следующий случай:

Большинство браузеров по умолчанию представляют текст черным цветом. В конечном итоге на странице будет черный текст на черном фоне! Многие люди страдают той или иной формой дальтонизма, например, некоторым оливковый цвет может казаться зеленым.

Другая проблема возникает, если Вы пытаетесь распечатать Web-страницу. Многие браузеры игнорируют цвет фона, но применяют цвет текста. Установка белого цвета для текста часто может привести к печати белой страницы, поэтому не рекомендуется следующее:

Атрибут bgcolor можно использовать и в ячейках таблицы, например

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

Установка шрифта, его размер и цвета

Для выбора шрифта, его размера и цвета можно использовать тег FONT. В данном примере устанавливается только цвет:

Атрибут face используется для установки шрифта. В нем можно указать список шрифтов в порядке предпочтения, например

Для выбора размера шрифта можно использовать атрибут size со значением от 1 до 6. Если перед числом поместить знак - или +, оно будет интерпретироваться как относительное. Если Вы хотите использовать больший размер шрифта, укажите size="+1", а если меньший - size="-1", например

Следует избегать двух вещей: не выбирайте цветовые комбинации, затрудняющие чтение текста для людей, страдающих дальтонизмом. Не используйте для представления заголовков только шрифт, заголовки всегда следует размечать с помощью элементов h1 - h6 в соответствии с их важностью.

Дополнительная информация

Более подробную информацию о CSS и поддерживающих их средствах разработки you можно найти на странице W3C, посвященной CSS. Там имеются ссылки на книги по HTML и CSS, например, "Raggett on HTML 4", опубликованную в 1998 году издательством Addison Wesley. См. Также "Beginning XHTML", опубликованную в 2000 году издательством Wrox Press. Более подробное описание CSS см. в издании "Cascading Style Sheets" Хокона Вим Ли и Берта Боса, опубликованном в 1999 издательством Addison Wesley, в котором CSS рассматриваются с точки зрения самих архитекторов CSS.

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

красный:		Шестнадцатеричное
зеленый:
синий:

Как добавить стиль