Введение в 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", и поэтому для текста абзацев рекомендуется использовать именно их.

Буквицы

Вот как можно создать буквицу, не вызывая проблем совместимости браузеров. Этот метод заключается в том, что первая буква абзаца помещается в элемент span. В будущем необходимость в элементе span должна отпасть, поскольку в браузерах будет реализован механизм CSS first-letter.

Правило стиля для достижения этого эффекта следующее:

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

Мое первое правило - избегать текста на уровне 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.