Объявление стиля

Элементы HTML, используемые совместно с таблицами стилей

Спецификации CSS

Синтаксис таблиц стилей

Элементы font и basefont

Для установления параметров шрифта Web-страницы: типа шрифта, размера и цвета можно использовать одиночный элемент basefont. Этот элемент должен быть задан в начале тела документа HTML. По умолчанию, если элемент basefont опущен, используется тип шрифта, принятый в данном Web-браузере по умолчанию, размер шрифта, равный 3 (при диапазоне изменений от 1 до 7) и цвет текста – черный.

Строковый элемент font задает тип, размер и цвет шрифта своего содержимого, заключенного между тегами <font> и </font>.

Помимо общих атрибутов class, dir, id, lang, style и title, для элементов basefont и font можно задать атрибуты: color – цвет текста, face – список имён шрифтов, разделённых запятыми, которые Web-браузер должен искать в порядке убывания приоритета и size – абсолютный (от 1 до 7) или относительный (со знаками "+" или "-") размер шрифта.

Элементы basefont и font, также как и другие элементы форматирования, согласно спецификации HTML 4.01, не рекомендуется использовать в Web-страницах (вместо них нужно использовать стили). В рекомендации XHTML 1.1 эти два элемента определены в модуле Legacy (Наследство).

Каскадные таблицы стилей аналогичны стилям текстового процессора Word и выполняют в Web-странице аналогичные функции, т.е. определяют внешний вид отображае­мого HTML-документа: цвет шрифта и фона документа, сам шрифт, разбив­ку текста и многие другие характеристики.

Первая спецификация по каскадным таблицам стилей – CSS1 (Cascade Style Sheets, Level 1 – каскадные таблицы стилей уровня 1) была принята консорциумом W3C в декабре 1996 года и пересмотрена в марте 1998 года. В мае 1998 года W3C издал спецификацию по каскадным таблицам стилей CSS2 (каскадные таблицы стилей уровня 2). В настоящее время ведется разработка спецификаций CSS 2.1 и CSS3.

В спецификации CSS 2.1 устранены ошибки, обнаруженные в спецификации CSS2, удалены свойства стилей, не реализованные ни в одном Web-браузере, а также добавлено несколько новых свойств.

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

Несмотря на то, что спецификации CSS 2.1 и CSS3 официально еще не приняты, многие Web-браузеры уже реализуют некоторые возможности, определенные в этих спецификациях.

Элементы HTML можно условно поделить на две группы:

· элементы, описывающие структуру Web-страницы (например, элементы заголовков h1, h2, h3,h4, h5, h6 или абзаца p);

· элементы, задающие стиль вывода компонент Web-страницы (например, элемент вывода жирным шрифтом b или элемент задания характеристик шрифта font).

Кроме того, для многих элементов были определены атрибуты, задающие стиль вывода данного элемента (например, атрибут align, задающий выравнивание текста в элементах h1, h2, h3,h4, h5, h6, p и div).

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

Из описанных выше элементов для использования в Web-страницах достаточно, помимо элементов html, title, meta и head, следующих элементов:

· элемент тела документа body (без атрибутов alink, background, bgcolor, link, text и vlink);

· элементы заголовков h1, h2, h3, h4, h5 и h6 (без атрибута align);

· элементы абзаца p и группы абзацев div (без атрибута align);

· элемент перехода на новую строку br;

· элемент span, используемый для задания стиля строковых компонент Web-страницы;

· элемент вывода горизонтальной линейки hr (без атрибутов align и color).

Объявление стиля задается следующим образом:

свойство: значение

Между параметром свойство и символом ":", а также между символом ":" и параметром значение может быть любое количество пробельных символов.

Параметр свойство задает одно из определенных в спецификации CSS2 наименований (идентификаторов) свойств, например, color (цвет) или text-align (выравнивание текста). Идентификатор свойства содержит большие или маленькие латинские буквы (от A до Z и от a до z), цифры от 0 до 9, а также символ "-". Параметр свойство может быть задан как заглавными, так и строчными буквами, например, свойство цвета может быть задано как color, Color или COLOR. Общепринятым является запись свойства строчными буквами.

Для параметра значение обычно задается список его допустимых значений, например, для свойства font-style (стиль шрифта) допустимыми значениями являются: normal (нормальный), italic (курсив), oblique (наклонный) или inherit (наследуемый). В качестве значения должно быть указано только одно из допустимых значений, например:

font-style:italic.

Для многих свойств допустимые значения могут один из следующих типов:

· целые или вещественные числа;

· размер;

· процентное соотношение;

· ссылка на идентификатор ресурса (URL);

· цвета;

· строки.

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

Пример 4.3.9. Задание значения как числа:

line-height:1.5 – высота строки текста в 1,5 больше, чем высота шрифта в строке.

Значение, задаваемое как размер (в вертикальном или горизонтальном направлении) записывается как число, за которым непосредственно (без пробела) задается наименование (идентификатор) единицы измерения. В качестве единиц измерения используются как абсолютные, так и относительные единицы.

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

· mm – миллиметр;

· cm – сантиметр;

· in – дюйм (1in = 2.54 cm);

· pt – пункт (1pt = 1/72 in);

· pc – пика (1рс = 12 pt).

Относительные размеры задаются с помощью следующих идентификаторов:

· em – высота заглавной буквы M шрифта;

· ex – высота строчной буквы x шрифта;

· рх – количество пикселей (абсолютный размер пикселя зависит от разрешающей способности монитора или принтера).

Пример 4.3.10. Задание свойств со значением размера:

1. font-size:14pt – размер шрифта равен 14 пунктам.

2. font-size:1.5em – размер шрифта в 1,5 раз больше, чем размер заглавной буквы M.

Значение, задаваемое в процентах, всегда определяется относительно другого значения и записывается в виде целого или вещественного числа, за которым непосредственно (без пробела) следует символ "%".

Пример 4.3.11. Задание свойства со значением процентного отношения:

width:20% – ширина элемента равна 20% от какого-то другого значения (например, ширины экрана).

Ссылка на идентификатор ресурса записывается следующим образом:

url(URL).

Значение URL в скобках может быть задано как одиночных или двойных апострофах, так и без апострофов. При ссылке можно использовать как абсолютные, так и относительные URL.

Пример 4.3.12. Задание свойства как ссылки на ресурс:

1. background-image:url(https://www.mysite.com/bgimage.gif) – фоновое изображение Web-страницы или элемента страницы берется с заданного в абсолютном URL сайта.

2. list-style-image:url("oval.png") – маркер списка задан как изображение с относительным URL (изображение находится в той же папке, что и Web-страница).

Значение цвета можно задать одним из следующих способов:

· с помощью имени цвета (всего в HTML можно использовать по наименованию 147 цветов);

· с помощью шестнадцатеричного обозначения цвета в модели RGB, перед которым задается символ "#";

· с помощью функции rgb, параметрами которой являются компоненты цвета в модели RGB в виде целых десятичных чисел, либо процентов.

Пример 4.3.13. Задание свойства цвета:

1. background-color:yellow – желтый цвет фона задан по своему имени.

2. background-color:#FFFF00 – желтый цвет фона задан по своим шестнадцатеричным компонентам (первые две цифры – интенсивность красной компоненты, вторые две цифры – интенсивность зеленой компоненты и последние две цифры – интенсивность синей компоненты).

3. background-color:rgb(255, 255, 0) – желтый цвет фона задан с помощью функции rgb (первый параметр – интенсивность красной компоненты, второй параметр – интенсивность зеленой компоненты и третий параметр – интенсивность синей компоненты).

4. background-color:rgb(100%, 100%, 0%) – желтый цвет фона задан с помощью функции rgb (первый параметр – интенсивность красной компоненты в процентах, второй параметр – интенсивность зеленой компоненты в процентах и третий параметр – интенсивность синей компоненты в процентах).

Если значением свойства является строка, то она заключается в двойные или одиночные апострофы. Если внутри строки необходимо использовать в качестве символа одиночный или двойной апостроф, перед ними необходимо задать символ "\". Если строка слишком длинная, ее можно перенести на следующую строку, задав последним символом текущей строки символ "\".

Пример 4.3.14. Задание значения свойства как строки:

1. content:"Раздел \"5\". " – вывод строки Раздел "5".

2. content:"Cлишком\

длинная строка" – вывод строки Cлишком длинная строка.