HTML / 8. Каскадные таблицы стилей

Стилевые свойства

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

Значения свойств
Большинство свойств устанавливает значение для некоторой характеристики вашего документа, определяющей, как броузер выведет его на экран. В качестве примера назовем размер символов или цвет заголовков второго уровня. Как было сказано ранее при описании синтаксиса стилей, чтобы задать значение CSS2-свойства, вы ставите двоеточие после ключевого слова, обозначающего это свойство, а за двоето-чием – одно или несколько чисел или ключевых слов, разделенных пробелами или запятыми. Например:

color:blue
font-family: Helvetica, Univers, sans-serif

Здесь color и font-family – свойства, а blue и названия шрифтов – их значения. Значения свойств бывают восьми различных видов: ключевые слова, значения длины, процентные значения, URL, цвета, углы, время и частотные значения.

Значения свойств – ключевые слова
Свойство может иметь значение, являющееся ключевым словом, выражающим действие или размер. К примеру, результат присваивания свойству значений underline (подчеркнуть) или line-through (зачеркнуть) очевиден. И размеры, связанные со свойствами, вы можете выразить при помощи ключевых слов, таких как small (маленький) или xx-large (весьма большой). Некоторые ключевые слова выражают отношение: например, bolder (жирнее) является допустимым значением для свойства font-weight. Ключевые слова в качестве значений свойств не чувствительны к регистру – Underline, UNDERLINE и underline в равной
мере возможны.

Значения свойств – длины
Так называемая «длина» length (термин из стандарта CSS2) явным образом устанавливает размер для свойства. Длина является числом, иногда десятичной дробью. Перед длиной могут стоять знаки «+» или «–», показывающие, что величина должна быть прибавлена к текущему значению свойства или вычтена из него. За длинами должно непосредственно (без промежуточных пробелов) следовать двухбуквенное обозначение единицы измерения.
Существуют три вида единиц измерения длин: относительные, пикселы и абсолютные. Относительные единицы определяют размер, который в качестве эталона (единицы) принимает некоторое другое свойство содержимого. В настоящее время есть только две относительные единицы: em, представляющая собой ширину строчной буквы «m» в текущем шрифте; и x-height, представляющая собой высоту буквы «x» в текущем шрифте (записывается ex). Пикселы – это светящиеся цветные точки на экране компьютера или телевизора, образующие текст и изображение. Пиксел как единица измерения (записывается px) равен экранному пикселу, так что размер некоторых свойств вы можете
определять количеством точек на дисплее. Абсолютные единицы длин всем нам знакомы лучше. Это дюймы (in), сантиметры (cm), миллиметры (mm), пункты (pt, 1/72 дюйма) и пики (pc, двенадцать пунктов). Ниже перечислены примеры допустимых длин, хотя не все единицы признаются поддерживающими стили броузерами:

1in
1.5cm
+0.25mm
-3pt
-2.5pc
+100em
-2.75ex
250px

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

Процентные значения заканчиваются знаком процента (%). К примеру:

line-height: 120% вычисляет расстояние между строками, которое должно стать на 20%
больше текущего (обычно зависящего от размера шрифта). Отметьте, что это значение не является динамическим – изменение размера шрифта после того, как это правило было обработано броузером, не повлияет на вычисленную высоту строки.

URL как значение свойств
Некоторые свойства также принимают (скорее даже ожидают) URL в качестве значения. Синтаксис CSS2 URL в стилевых свойствах отличается от традиционного в HTML/XHTML:

url(service://server.com/pathname)

Для свойств, определенных в стандарте CSS2, ключевое слово url обязательно, как и открывающая и закрывающая скобки. Не оставляйте между словом url и открывающей скобкой пробелов. В url может находиться как абсолютный, так и относительный URL. Однако имейте в виду, что относительный URL отсчитывается от URL-адреса таблицы стилей, в которой он содержится, то есть необязательно от базового URL-адреса вашего документа. Это означает, что если вы используете url-значение на уровне документа или во встроенном в тег стиле, то итоговый URL отсчитывается от URL текущего документа. В остальных случаях URL отсчитывается относительно внешней таблицы стилей, присоединенной к документу посредством директивы @import или с помощью тега <link>.

Значения свойств – цвета
Цветовые значения определяют цвет в свойстве (удивлены?). Цвет можно указать по названию или при помощи шестнадцатеричногоRGB-триплета так же, как это делается для обычных HTML/XHTML-атрибутов или десятичного RGB-триплета, что допустимо только для
стилевых свойств. Названия цветов и шестнадцатеричная RGB-нотация описаны в приложении G.

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

Десятичная RGB-нотация выглядит иначе:

rgb(red, green, blue)

Значения интенсивности red, green и blue – это целые числа в интервале от нуля до 255 или целые проценты. Как и в случае URL, не оставляйте пробелов между rgb и открывающей скобкой.

К примеру, в десятичных RGB-обозначениях белый цвет – это rgb(255, 255,255) или rgb(100%,100%,100%), а нейтральный желтый – это rgb(127, 127,0) или rgb(50%,50%,0%).

Значения свойств – углы, время и частота
Для некоторых свойств, таких как направление стрелки компаса, требуется значение, задающее угол. Эти свойства принимают числовые значения, за которыми следуют соответствующие единицы измерения: deg (градусы), grad (грады, то есть сотые доли прямого угла) или rad (радианы). Аналогичным образом значения времени выражаются числами, после которых стоит либо ms (миллисекунды), либо s (секунды). Частоты тоже выражаются числами, а в качестве единиц измерения можно указывать Hz (герцы) или kHz (1 килогерц = 1000 Hz). Интересно, что такие единицы, как MHz и GHz, не предусмотрены, т. к. в CSS2 имеются в виду только аудиочастоты, а не частоты электромагнитных волн, применяемых в телевидении, радиовещании, Bluetooth и других технологиях.

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

body {color: blue}

вместо того чтобы создавать правило для любого используемого в нем тега.Это наследование распространяется на все уровни. Если создать затем тег <div> c текстом другого цвета, поддерживающий стили броузер отобразит весь текст в разделе и в тегах, содержащихся в нем, этим новым цветом. Когда <div> завершится, цвет вернется к тому, что определен в теге .

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

Свойства шрифтов
Больше всего жалуются на то, что HTML и его потомку XHTML не хватает стилей и характеристики шрифтов, которые реализованы даже в простейших текстовых редакторах. Различные атрибуты <font> частично снимают эту проблему, но их скучно применять, поскольку каждое изменение шрифта требует отдельного тега <font>.
Таблицы стилей, конечно, меняют дело. Стандарт CSS2 предоставляет семь свойств шрифта, изменяющих вид текста, содержащегося в тегах, к которым они применяются:

font-family, font-size, font-size-adjust,

font-style, font-variant, font-stretch и font-weight.

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

Свойство font-family
Свойство font-family принимает в качестве значения список разделенных запятыми названий шрифтов (гарнитур). Броузер использует первый упомянутый в списке шрифт1, который при этом инсталлирован и может быть отображен дисплеем клиентской машины.
Названия шрифтов соответствуют конкретным начертаниям, скажем, Helvetica или Courier, или семействам шрифтов, определенным стандартом CSS2, таким как serif, sans-serif, fantasy и monospace. Каждый броузер сам решает, какой представитель семейства будет использован в действительности. К примеру, Courier – это самый популярный выбор моноширинного шрифта.

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

h1 {font-family: Helvetica, Univers, sans-serif}

предлагает броузеру поискать Helvetica, а если его нет, использовать Univers. Если ни один из этих шрифтов не окажется доступным на дисплее клиента, броузер применяет семейство начертаний sans-serif.

Заключайте названия шрифтов, содержащие пробелы, скажем New Century Schoolbook, в кавычки. Например:

p {font-family: Times, "New Century Schoolbook", Palatino, serif}

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

<p style="font-family: Times, 'New Century Schoolbook', Palatino, serif">

На практике нет необходимости применять кавычки, потому что значения, определяющие имена шрифтов, разделены запятыми, а «нормальный» броузер проигнорирует пробелы. Таким образом, следующие конструкции законны:

p {font-family: Times, New Century Schoolbook, Palatino, serif}
<p style="font-family: Times, New Century Schoolbook, Palatino, serif">

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

Свойство font-size
Свойство font-size, определяющее размер шрифта, в качестве значений может принимать абсолютные и относительные длины, проценты и ключевые слова. В частности:

p {font-size: 12pt}
p {font-size: 120%}
p {font-size: +2pt}
p {font-size: medium}
p {font-size: larger}

Первое правило, вероятно, употребляется чаще всего, поскольку выглядит самым знакомым, – оно устанавливает размер шрифта равным определенному числу пунктов (двенадцати в данном примере). Второе правило устанавливает размер шрифта на 20% больше, чем в родительском элементе. Третье – увеличивает нормальный размер шрифта
на 2 пункта. В четвертой строке выбирается заранее определенный броузером размер, обозначенный словом medium. Допустимыми ключевыми словами для абсолютного размера могут служить xx-small, x-small, small, medium, large, x-large и xx-large, которые обычно соответствуют семи размерам шрифта, используемым для атрибута size тега <font>. Последнее правило выбирает следующий по размеру шрифт по сравнению с тем, что используется в родительском элементе. Таким образом, если раньше применялся medium, то теперь он превратится в large. Вы также можете написать smaller с легко предсказуемым результатом.Ни один из современных броузеров не обращается корректно с предписаниями увеличить или уменьшить размер шрифта. Они скорее проигнорируют знак увеличения/уменьшения и примут его значение за абсолютный размер. Так что результатом применения третьего правила будет шрифт размером в два пункта, а совсем не на два пункта больше нормального.

Свойство font-stretch
Помимо шрифтов различных размеров их семейства содержат уплотненные и разреженные версии, символы в которых либо сжаты, либо растянуты. Применяйте свойство font-stretch для выбора более сжатых или более растянутых символов вашего шрифта. Используйте значение свойства normal, чтобы остановиться на версии шрифта нормального размера. Относительные значения wider и narrower выбирают следующий, более широкий или соответственно более узкий варианты начертания шрифта, но не шире и не уже крайних
(«ultra») версий семейства.

Оставшиеся значения свойства font-stretch назначают определенные варианты из семейства шрифтов. Начиная с самого плотного и заканчивая самым жидким, значения таковы: ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded и ultra-expanded.

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

Свойство font-size-adjust
Если не вдаваться в тонкости, то разборчивость и видимый размер шрифта зависят в основном от его характеристического отношения (aspect ratio) – отношения высоты строчной буквы к номинальному размеру (измеряемому по высоте заглавной буквы). Шрифты с характеристическим отношением, приближающимся к единице, разборчивей при мелком размере, чем шрифты с этим отношением вблизи нуля.

Кроме того, в зависимости от величины характеристического отношения видимый размер одного шрифта может быть явно больше или меньше другого шрифта, хотя их номинальные размеры одинаковы. Поэтому, когда один шрифт оказывается недоступным для броузера,
применение его заменителя может исказить внешний вид документа. Свойство font-size-djust позволяет подогнать размер замещающего шрифта с учетом его характеристического отношения, чтобы он наилучшим образом подходил для отображения. Используйте значение того свойства none, чтобы игнорировать характеристическое отношение. В противном случае присвойте свойству десятичное дробное число в интервале от нуля до единицы. Обычно назначается характеристическое отношение для шрифта, который должен быть выбран в первую очередь. Владеющий стилями броузер выведет тогда замещающий шрифт с размером, вычисленным по формуле:

s = (n/a) * fs

где s – это новый размер, используемый для вывода замещающего шрифта, вычисленный как частное от деления значения n свойства fontsize-adjust на характеристическое отношение замещающего шрифта а и умноженное затем на размер текущего шрифта fs. К примеру, предположим, что вы предлагаете вывести текст шрифтом Times New Roman с характеристическим отношением 0,45, но броузер его не обнаруживает и применяет вместо него шрифт Comic Sans MS с отношением 0,54. Тогда, чтобы сохранить приблизительно тот же видимый размер (для Times New Roman это 18 px), поддерживающий стандарт CSS2 броузер, учитывая значение свойства font-size-adjust (0,45 для Times New Roman), выведет на экран или напечатает текст шрифтом Comic Sans Microsoft с меньшим размером 0,45/0,54×18 px = 15 px. К сожалению, мы не можем показать вам, как популярные броузеры это делают, так как они это не поддерживают.

Свойство font-style
Используйте свойство font-style, чтобы отобразить текст наклонно. По умолчанию принимается стиль normal, который можно переменить на italic или oblique. К примеру:

h2 {font-style: italic}

выводит текст в заголовках уровня 2 курсивом. Netscape 4 поддерживает только значение italic для свойства font-style. Все современные броузеры воспроизводят оба значения, но обычно трудно отличить курсив от наклонного начертания.

Свойство font-variant
Свойство font-variant позволяет выводить текст маленькими заглавными буквами. Принятое по умолчанию значение этого свойства – normal – указывает на традиционную версию шрифта. Но вы можете придать этому свойству значение small-caps, выбирая версию, в которой строчные буквы заменяются маленькими заглавными (т. е. капителью).

Все современные броузеры поддерживают это свойство. Internet Explorer версий 4 и 5 некорректно реализует small-caps, выводя текст заглавными буквами.

Свойство font-weight
Свойство font-weight заведует весом или жирностью букв. По умолчанию принимается значение normal. Можно установить значение bold, чтобы получить жирную версию шрифта, или использовать относительные значения bolder и lighter для применения версии, которая будет более или соответственно менее жирной, чем принятая для родительского элемента.

Для определения различных уровней «жирности» текста используются числа, кратные 100, от 100 (самый тонкий) до 900 (самый жирный). Значение 400 соответствует значению normal, а 700 соответствует bold. Все современные броузеры поддерживают это свойство.

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

p {font-family: Times, Garamond, serif;
font-weight: bold;
font-size: 12pt;
line-height: 14pt}

Чтобы сократить эти трудоемкие и, вероятно, неудобные для восприятия описания, используйте всеобъемлющее свойство font и соберите все объявления в одно:

p {font: bold 12pt/14pt Times, Garamond, serif}

Группировка атрибутов шрифтов и порядок их перечисления существенны для свойства font. Первыми нужно указывать атрибуты стиля, жирности и варианта шрифта, за которыми должны следовать размер шрифта и высота строки, разделенные слэшем, и последним задается список гарнитур. Из всех свойств обязательны размер и гарнитура;
прочие могут быть опущены.

Вот несколько примеров определения свойства font:

em {font: italic 14pt Times}
h1 {font: 24pt/48pt sans-serif}
code {font: 12pt Courier, monospace}

Первый пример сообщает поддерживающему стили броузеру, что логическое подчеркивание следует выразить, использовав курсивный шрифт Times размером 14 пунктов. Второе стилевое правило говорит о том, что текст в теге <h1> отображается имеющимся в наличии шрифтом семейства sans-serif размером 24 пункта с 24 пунктами дополнительного расстояния между строками. Наконец, для текста в теге <code> установлен Courier или, если его нет, выбранный по усмотрению броузера моноширинный шрифт размером 12 пунктов.Вообразите сами, какие безобразия можно натворить, изобретательно применяя стили шрифтов. Если у вас не получается, загляните в последний номер журнала «Wired».

Выбор и синтез шрифтов
Первый CSS-стандарт, CSS1, определял упрощенный алгоритм соответствия шрифтов. Если указанный шрифт отсутствует на компьютере клиента, следует подставить неспецифичный шрифт. Конечно, результаты в большинстве случаев не радуют глаз и способны вызвать полный беспорядок на экране. Кроме того, нередко оказывается, что
какой-то из имеющихся шрифтов подошел бы лучше, чем шрифт общего назначения. Стандарт CSS2 значительно расширяет модель соответствия шрифтов, принятую в CSS1, и содержит новую специальную директиву (так называемое правило at), позволяющую авторам определять, загружать и использовать в документах новые шрифты.

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

Второй шаг предпринимается, когда ни один из шрифтов, перечисленных в правиле, не установлен на компьютере пользователя. Броузер пытается найти наиболее похожий из локальных шрифтов. Например, запрос на шрифт Helvetica может привести к использованию шрифта Arial – аналогичного шрифта без засечек.

Третий шаг алгоритма состоит в попытке броузера синтезировать шрифт путем модифицирования локального шрифта в соответствии с указанным. Например, запрос на шрифт Helvetica размером 72 пункта можно удовлетворить за счет масштабирования 12-пунктового шрифта Arial до требуемого размера.

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

@font-face {
descriptor : value;
...
descriptor : value
}

Каждая специальная директива @font-face определяет для броузера новый шрифт. Последующие запросы на шрифты могут быть удовлетворены этими новыми шрифтами. Броузер использует различные дескрипторные значения, чтобы гарантировать соответствие подставленного шрифта запрошенному.

Базовые дескрипторы шрифта
Базовые дескрипторы шрифта, указываемые в специальной директиве @font-face, соответствуют шрифтовым свойствам CSS2 и принимают те же значения, что и эти свойства. Иными словами, вы можете указывать дескрипторы font-family, font-style, font-variant, font-weight, font-stretch и font-size и их допустимые значения, чтобы определить новый шрифт для броузера. Например:

@font-face {
font-family : "Kumquat Sans";
font-style : normal, italic;
src : url("http://www.kumquat.com/foundry/kumquat-sans")
}

Здесь определяется шрифт Kumquat Sans, который можно загрузить с сайта www.kumquat.com. Для этого загружаемого шрифта доступны обычная версия и курсив. Поскольку другие дескрипторы не указаны, броузер будет предполагать, что остальные свойства шрифта (жирность, вариант и т. д.) определяются в самом шрифте. В общем случае отсутствие какого-либо дескриптора шрифта позволяет броузеру брать для соответствующего свойства любое значение.

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

Дескриптор src
Дескриптор src в специальной директиве @font-face сообщает броузеру, откуда брать шрифт. Для загружаемых шрифтов значением этого дескриптора является URL его документа, выраженный в соответствии с синтаксисом CSS2 с помощью ключевого слова url. Чтобы сослаться на локальные шрифты (то есть установленные на компьютере пользователя), напишите ключевое слово local вместо url и укажите локальное название шрифта.

Значением дескриптора src может быть и список, элементы которого разделены запятыми. Например, в коде, приведенном выше, мы могли написать:

src : url("http://www.kumquat.com/foundry/kumquat-sans"), local("Lucida Sans")Это означает команду броузеру загрузить шрифт Kumquat Sans с сайта www.kumquat.com, а если это не получится, поискать локальный шрифт Lucida Sans.

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

src : url("http://www.kumquat.com/foundry/kumquat-sans") format("type-1"),
local("Lucida Sans") format("truetype", "intellitype")

В этом случае внешний шрифт имеет формат Type 1, а локальные версии шрифта Lucida Sans доступны как в формате TrueType, так и в Intellifont.

Другими допустимыми значениями формата являются truedocpfr, opentype, embedded-opentype, truetype, truetype-gx и speedo.

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

Дескриптор unicode-range принимает список значений Unicode, разделенных запятыми. Каждое значение состоит из префикса U+ и шестнадцатеричного числа. Вы можете указывать диапазоны значений, разделяя границы диапазона дефисом. Вопросительный знак соответствует любому значению в данной позиции.

Дескриптор unicode-range призван точно указать глифы, определенные в шрифте. Если символы, используемые в документе, недоступны, броузер не загрузит шрифт. Так, значение U+2A70 показывает, что шрифт содержит соответствующий глиф в этой позиции. Запись U+2A7? задает символы от 2A70 до 2A7F, а запись U+2A70-2A9F – более широкий диапазон. Как правило, этот дескриптор применяется, чтобы ограничить использование специальных символов только теми, что определены в шрифте.

Дескриптор units-per-em принимает одно числовое значение, определяющее ширину самой широкой буквы в шрифте. Это значение, называемое «эм» (em), важно, если вы используете его как единицу измерения для задания значений других дескрипторов.
Дескриптор panose-1 принимает ровно десять целочисленных значений, разделенных пробелами и соответствующих особой характеристике шрифта, носящей имя Panose-1. Обсуждение Panose-1 выходит за рамки этой книги, и мы отсылаем заинтересованного читателя к специальной литературе.Дескрипторы stemv и stemh определяют толщину (в «эмах») вертикальных и горизонтальных штрихов в начертании символов шрифта. Аналогичным образом дескрипторы cap-height и x-height определяют высоту глифов в верхнем и нижнем регистре. Наконец, дескрипторы ascent и descent определяют максимальные размеры верхнего и нижнего элементов шрифта. Если вы используете любой из этих дескрипторов, вы должны задать дескриптор units-per-em.

Дескриптор slope определяет наклон вертикальных штрихов шрифта. Он играет важную роль при поиске курсивных и наклонных версий шрифта. Дескрипторы baseline, centerline, mathline и topline определяют обычную, центральную, математическую и верхнюю базовые линии шрифта. Все они принимают числовые значения, выраженные в «эмах». Для них вы тоже должны задать дескриптор units-per-em. Дескриптор bbox принимает ровно две пары координат (X, Y), определяющие левый нижний и правый верхний углы ограничивающего
прямоугольника шрифта. Дескриптор bbox важен, когда броузер решает синтезировать шрифт на основе данного. Указывая размеры ограничивающего прямоугольника, вы гарантируете, что синтезированный шрифт займет столько же места, сколько и запрошенный.

Дескриптор widths принимает список диапазонов Unicode-кодов, перечисленных через запятую, за которыми следуют отделенные пробелами значения, определяющие ширину символов в диапазоне. Если вы укажете одно значение для диапазона, все символы в диапазоне будут иметь одинаковую ширину. Когда указаны несколько значений, каждое относится к соответствующему символу из диапазона. Подобно дескриптору bbox дескриптор widths обеспечивает хорошую степень совпадения синтезированного шрифта с запрошенным.

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

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

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

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

Все современные броузеры поддерживают свойства цвета и фона.

Свойство background-color
Свойство background-color управляет (вы угадали!) цветом фона элемента. Присваивайте этому свойству в качестве значения цвет или ключевое слово transparent. Значение по умолчанию – transparent (прозрачный). Результат будет естественным.

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

<li style="background-color: blue">

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

th {background-color: black; color: white}

Если хотите, чтобы текст, на важности которого вы настаиваете, действительно выделялся, покрасьте его фон в красный цвет:

em {background-color: red}

Свойство background-image
Свойство background-image помещает изображение позади содержимого элемента. Его значением является либо URL, либо ключевое слово none, которое принимается по умолчанию.

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

<table style="background-image: url(backgrounds/woodgrain.gif)">
li.marble {background-image: url(backgrounds/marble.gif)}

Первый пример использует встроенное в тег стилевое правило, чтобы подложить под таблицу узор древесных волокон. Второй – определяет класс элементов списка, который помещает мраморный фон под содержимое тегов <li> с атрибутом class=marble. А вот этот XHTML-пример:

<h2>Here's what's for dinner tonight:</h2>
<ul>
<li class="marble">Liver with Onions</li>
<li class="marble">Mashed Potatoes and Gravy</li>
<li class="marble">Green Beans</li>
<li class="marble">Choice of Milk, Tea, or Coffee</li>
</ul>
<h2>And for dessert:</h2>
<ul>
<li>Creamed Quats in Milk (YUM! YUM!)</li>
</ul>

Если изображение больше, чем содержащий его элемент, оно будет обрезано по границам области, занимаемой элементом. Если изображение окажется меньше, броузер «замостит» его копиями пространство, отведенное под элемент. Способ укладки изображения определяется значением атрибута background-repeat.

Вы управляете начальным положением изображения по отношению к элементу при помощи свойства background-position. Поведение изображения при прокручивании документа определяется свойством background-attachment.

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

Свойство background-attachment
Если вы используете в качестве фона элемента изображение, свойство background-attachment позволит управлять тем, каким образом это изображение прикреплено к окну броузера. При принятом по умолчанию значении scroll броузер перемещает фоновое изображение вместе с элементами, когда пользователь прокручивает документ. Значение fixed делает изображение неподвижным.

Свойство background-position
По умолчанию поддерживающие стили броузеры выводят фоновое изображение, начиная с левого верхнего угла выделенного пространства. С помощью свойства background-position можно сместить начальное положение фонового изображения. Смещение может быть абсолютным (длина) и относительным (процентное значение или ключевое слово). В результате потенциально «обрезанное» изображение будет заполнять прямоугольную область от этой сдвинутой начальной точки.

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

Например:
table {background-image: url(backgrounds/marble.gif);
background-position: 10px 20px}

сдвигает мраморный фон на 10 пикселов вправо и на 20 пикселов вниз от верхнего левого угла всякого элемента <table> в документе.

Процентные значения устроены чуть хитрее, но они легче в использовании. Если считать, что расстояния от левого до правого края элемента, так же как и от верхнего до нижнего, равны 100 процентам, то центр элемента расположен в точке 50%, 50%. Подобным образом сдвиг на треть элемента вправо и на две трети вниз обозначается 33%, 66%. Итак, чтобы сдвинуть фон обеденного меню из нашего примера к центру пространства, в которое отображается содержимое элемента, напишем: background-position: 50%

Но зачем использовать числа, когда достаточно одного слова? Вы можете применять ключевые слова left, center и right так же, как и top, center и bottom вместо 0%, 50% и 100% соответственно. Чтобы центрировать изображение по отношению к области, занятой содержимым тега, напишите:

background-position: center

Длины и процентные значения1 можно использовать совместно, так что:

background-position: 1cm 50%

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

Вероятно, вы ожидаете, что при размножаемом фоне (это свойство установлено по умолчанию, см. разд. 8.4.5.5) изображение расширяется вниз и вправо. Это не совсем так. В современных броузерах изображение «обтекает» элемент, заполняя отведенное ему пространство на экране.

<style type=css/text>
<!--
pre {background-image: url(backgrounds/vert.gif)}
pre.offset {background-image: url(backgrounds/vert.gif); backgroundposition:
-20px -20px}
-->
</style>
...
The following background image is offset by -20 pixels left and up:
<pre class=offset>
</pre>
<p>
This background image is not offset:
<pre>
</pre>

Свойство background-repeat
Обычно броузер, чтобы заполнить выделенное пространство, размножает фоновое изображение и по горизонтали, и по вертикали. Используйте свойство background-repeat, чтобы уклониться от этого принятого по умолчанию образа действий броузера. Чтобы изображение повторялось только по горизонтали, но не по вертикали, применяйте значение repeat-x. Для повторения только по вертикали используйте repeat-y. Чтобы прекратить укладывание плитки вообще, употребляйте no-repeat. Часто это свойство используют, чтобы поместить на странице водяной знак или логотип, обойдясь без многократного повторения картинки. К примеру:

body {background-image: url(backgrounds/watermark.gif);
background-position: center center;
background-repeat: no-repeat
}

приведет к тому, что центр страницы будет помечен фоновым изображением.

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

body {background-image: url(backgrounds/ribbon.gif);
background-position: top right;
background-repeat: repeat-y
}

Свойство background
Многие свойства фона так же не просто описывать и впоследствии читать, как характеристики шрифтов. Поэтому, подобно font, в CSS2 предусмотрено общее свойство background.

Свойство background принимает значения, пригодные для характеристик background-color, background-image, background-attachment, background-repeat и background-position, в любом порядке.

Если не указаны значения для некоторых свойств, последние задаются по умолчанию. Таким образом:

background: red

устанавливает значение свойства background-color в красный, а для всех остальных задает принятые по умолчанию. Более сложный пример:

background: url(backgrounds/marble.gif) blue repeat-y fixed center

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

Свойство color
Свойство color устанавливает цвет переднего плана для содержимого тега – цвет текста, например. Значением данного свойства может быть название цвета, шестнадцатеричный RGB-триплет или десятичный RGB-триплет. Таким образом, ниже перечислены допустимые объявления этого свойства:

color: mauve
color: #ff7bd5
color: rgb(255, 125, 213)
color: rgb(100%, 49%, 84%)

Чаще всего вы будете использовать color для определения цвета текста, но можете также при его помощи модифицировать и нетекстовое содержимое тега. К примеру, следующее объявление создает зеленую горизонтальную линейку:

hr {color: green}

Если цвет элемента не определен, то окраску он унаследует от родителя.

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

Свойство letter-spacing
Свойство letter-spacing вставляет дополнительные промежутки между символами в тексте при его отображении броузером. Значение свойства может быть либо длиной, либо принятым по умолчанию ключевым словом normal, указывающим, что броузер должен использовать обычное расстояние между буквами. К примеру:

blockquote {letter-spacing: 2px}

вставляет дополнительные два пиксела между соседними буквами в теге
. А так выглядят 5 пикселов между символами.

Все популярные броузеры поддерживают это свойство.8.4.6.2. Свойство line-height Используйте свойство line-height (высота строки) для определения минимального расстояния между строками в тексте, являющемся содержимым тега. Когда броузер выводит текст с одинарным интервалом, верх следующей строки всего лишь на несколько пунктов ниже предыдущей. Увеличивая высоту строк, вы увеличиваете расстояние между
ними.

Значением свойства line-height может быть абсолютная или относительная длина, процентное значение, масштабный множитель или ключевое слово normal. Например:

p {line-height: 14pt}
p {line-height: 120%}
p {line-height: 2.0}

Первый пример устанавливает расстояние между базовыми линиями последовательных строк текста в точности равным 14 пунктам. Вто-рой указывает, что высота строки должна составлять 120% от размера шрифта. Последний пример использует масштабный множитель, чтобы установить высоту строки в два раза большей, чем размер шрифта, выводя текст с двумя интервалами. Принятое по умолчанию значение normal обычно эквивалентно масштабному множителю 1,0 или 1,2.

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

Масштабные множители, напротив, откладывают вычисление высоты строки до момента действительного отображения текста. Следовательно, варьирование font-size локально воздействует на line-height. Вообще, лучше использовать для свойства line-height масштабные множители, чтобы высота строки автоматически менялась вместе с размером
шрифта.

Рассматриваемое обычно отдельно от характеристик шрифтов свойство line-height (точнее, его значение) может служить одним из элементов спецификации свойства font.

Свойство text-align
Выравнивание текста относительно краев страницы – это элементарная функция практически всех текстовых процессоров. Свойство textalign предоставляет такую возможность для любого HTML-тега блочного характера. (Разработчики стандартов из W3C предпочитают, чтобы вы пользовались скорее text-align из CSS2, чем явным атрибутом align для выравнивания блочных тегов, таких как <p> и <div>). Используйте одно из четырех значений: left, right, center или justify. По умолчанию принимается, конечно, left.1 К примеру:

div {text-align: right}

указывает поддерживающему стили броузеру выровнять весь текст в теге <div> по правому краю. Значение justify предлагает броузеру выровнять текст по левому и по правому краю, раздвигая символы и слова по мере необходимости.

Все популярные броузеры в настоящее время поддерживают выравнивание left, right и center, но не justify.

Свойство text-decoration
Свойство text-decoration создает украшения текста, некоторые из которых можно получить с применением тегов физической разметки.Значением этого свойства служат одно или несколько ключевых слов из множества: underline (подчеркнутый), overline (надчеркнутый),
line-through (зачеркнутый) и blink (мерцающий). Значение none принимается по умолчанию и говорит поддерживающему стили броузеру, что текст следует представлять обычным образом.

Свойство text-decoration хорошо подходит для оформления гиперссылок. К примеру:

a:visited a:link a:active {text-decoration: underline overline}

помещает линии над и под гиперссылками в документе.

Это свойство текста не наследуется и не имеет влияния на нетекстовые элементы.
Интересно, что все популярные броузеры поддерживают свойство text-decoration, но только Internet Explorer обладает достаточно хорошим вкусом, чтобы не поддерживать значение blink.

Свойство text-indent
Существует традиция, в наши дни уже не такая общепринятая, начинать первую строку абзаца с отступом.1 Некоторые же текстовые блоки, такие как определения, обычно выносят первую строку влево, создавая то, что называется обратным или висячим отступом.

Свойство text-indent стандарта CSS2 позволяет начинать абзац с красной строки или с висячего отступа, управляя величиной отступа первой строки в блоке. Применяйте с этим свойством длины и процентные значения. Отрицательные значения создают висячий отступ. Процентные – влекут за собой вычисление величины отступов в долях ширины
родительского элемента. По умолчанию значение свойства – ноль. Чтобы выводить все абзацы в документе с красной строки, напишите, скажем:

p {text-indent: 3em}

Использованная единица длины em масштабирует величину отступа в зависимости от размера шрифта на разных броузерах.

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

p.wrong {text-indent: -3em}
p.hang {text-indent: -3em; margin-left: 3em}p.large {text-indent: -3em; margin-left: 6em}

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

Все популярные броузеры поддерживают свойство text-indent.

Свойство text-shadow
Свойство text-shadow позволяет придать вашему тексту трехмерный вид при помощи выдержавших проверку временем теней. Значениями свойства являются обязательный сдвиг и необязательные цвет и радиус растушевки. У свойства может быть несколько наборов значений, разделенных запятыми, что позволяет получить последовательность
теней, причем каждый очередной набор значений находится на слое выше предыдущего, но всегда остается под оригинальным текстом.

Обязательно указываемый при определении свойства сдвиг составляется из двух длин. Первая отвечает горизонтальному смещению, вторая определяет смещение по вертикали. Положительные значения размещают тень вправо и вниз на указанное расстояние от текста. Отрицательные значения соответствуют тени, протянувшейся вверх и влево.
Необязательный параметр радиус тоже принимает значения длины и характеризует границы растушевки. Влияние этого параметра зависит от выводящего устройства. Еще один параметр тени – это цвет. Он, разумеется, может быть задан названием или RGB-триплетом и обозначает цвет тени. Если цвет не указан, text-shadow использует значение свойства color. К примеру:

h1 {text-shadow: 10px 10px 2px yellow}
p:first-letter {text-shadow: -5px -5px purple, 10px 10px orange}

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

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

Свойство text-transform
Свойство text-transform позволяет автоматически преобразовать часть или весь текст документа в отображаемый заглавными или строчными буквами. Допустимыми значениями являются capitalize, uppercase, lowercase, none.

Capitalize выводит каждую первую букву любого слова в верхнем регистре, даже если текст исходного документа набран строчными буквами. Значения uppercase и lowercase выводят весь текст в верхнем и соответственно нижнем регистрах. Значение none, разумеется, отменяет всякое преобразование. К примеру:

h1 {text-transform: uppercase}

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

h2 {text-transform: capitalize}

гарантирует, что каждое слово в заголовках уровня 2 начинается с прописной буквы, что приемлемо, например, в заголовках разделов.

Отметьте, что тогда как uppercase и lowercase влияют на весь текст, capitalize действует только на первую букву каждого слова. Следовательно, попытка преобразовать слово «htML» при помощи capitalize приведет к «HtML». Свойство text-transform поддерживают все популярные броузеры.

Свойство vertical-align
Свойство vertical-align управляет положением элемента по отношению к содержащей его строке. Его допустимыми значениями являются:

baseline

Выравнивает базовую линию элемента с базовой линией охватывающего элемента.

middle

Выравнивает середину элемента с серединой охватывающего элемента. (Обычно середина – это верх строчной буквы).

sub

Элемент выводится как подстрочный индекс.

super

Элемент выводится как надстрочный индекс.

text-top

Выравнивает верхний край элемента с верхним краем шрифта охватывающего элемента.

bottom

Выравнивает нижний край элемента по нижнему выносному элементу текущей строки. Кроме того, процентное значение указывает положение относительно
базовой линии текущей строки, так что значение 50% приподнимает элемент на половину высоты строки над базовой линией. Значение 100% помещает элемент ровно на высоту строки ниже базовой линии.

Все популярные броузеры сходятся в том, как следует располагать изображения относительно линии текста для значений baseline (которое устанавливается по умолчанию и соответствует отсутствию выравнивания по вертикали), middle (но не center), super (но не sub), text-top, text-bottom, top (то же самое, что text-top; но не bottom), а также для положительных и отрицательных значений относительного смещения.

А теперь обсудим различия. Броузер Firefox интерпретирует значение center так же, как Internet Explorer, причем иначе, чем значение middle, Netscape считает значение center идентичным значению middle, а Opera вообще не распознает его. Что касается значения
sub, Netscape соглашается с Firefox и выравнивает нижнюю сторону изображения по крайней строчке нижнего выносного элемента. При этом Opera помещает изображение явно ниже базовой линии, но не так низко, как Internet Explorer, у которого изображение оказывается чуть выше следующей строчки текста.

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

Свойство word-spacing
Используйте свойство word-spacing, чтобы увеличить расстояние между словами в теге. Вы можете присвоить word-spacing либо длину, либо ключевое слово normal, возвращающее обычное расстояние между словами. К примеру:

h3 {word-spacing: 25px}

помещает дополнительные 25 пикселов между словами в теге <h3>.

Все популярные броузеры поддерживают свойство word-spacing.

Свойства контейнеров
Модель CSS2 предполагает, что HTML- и XHTML-элементы всегда помещаются в прямоугольные контейнеры. Используя свойства, определяемые в этом разделе, можно управлять размером, положением и внешним видом контейнеров, содержащих элементы в документах.

CSS2-модель форматирования
Каждый элемент документа может быть помещен в прямоугольный контейнер. Авторы CSS2 называют этот контейнер «ядром» (core content area) и помещают его в еще три контейнера: подложку, рамку и поля.Верхний (top), нижний (bottom), левый внешний (left outer edge) и правый внешний (right outer edge) края ограничивают ядро элемента и связанные с ним области подложки (padding), рамки (border) и полей (margin space). Внутренний верхний (inner top), внутренний нижний (inner bottom), левый внутренний (left inner edge) и правый внутренний (right inner edge) края определяют границы ядра. Дополнительное пространство вокруг элемента – это область между внутренними и внешними краями, включающая подложку, рамку и поля. Броузер может опускать любое из этих дополнительных пространств, и для многих элементов внешние и внутренние края совпадают.

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

Поля смежных по горизонтали элементов не перекрываются. Вместо этого CSS2-модель складывает смежные горизонтальные поля. К примеру, если у абзаца левое поле один дюйм и он соседствует с изображением, правое поле которого 0,5 дюйма, тогда полное расстояние между ними будет равно полутора дюймам. Это правило относится и к вложенным элементам, так что абзац, содержащийся в разделе, будет иметь левое поле, равное сумме левых полей раздела и абзаца.

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

• Если ни для одного из этих свойств не установлено значение auto и полная ширина оказывается меньше ширины родительского элемента, свойству margin-right назначается auto и правое поле увеличивается, чтобы сделать полную ширину элемента равной ширине
родительского.

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

• Если width, margin-left и margin-right установлены в auto, поддерживающий стандарт CSS2 броузер определит левое и правое поля равными нулю и назначит width достаточно большим, чтобы сделать полную ширину равной ширине родительского элемента.

• Если левое и правое поля установлены в auto, они всегда будут равными, чтобы центрировать элемент относительно родительского.

Существуют специальные правила для плавающих элементов. Поля плавающего элемента (такого как изображение с выравниванием align=left), если только они не отрицательные, не схлопываются с полями охватывающего или предыдущего элемента. Вот как следующий
отрывок HTML может быть выведен:


<p>
<img align=left src="pics/img.gif">
Some sample text...


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

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

Свойство border-color
Используйте border-color для задания цвета рамки. Если он не определен, броузер рисует рамку, применяя значение свойства color для элемента. Свойство border-color принимает от одного до четырех цветовыхзначений. Количество значений определяет способ их применения к рамке. Если установить только одно значение, все четыре стороны рамки будут одного цвета. Два значения приводят к тому, что верх и низ рамки окрашиваются в первый цвет, а левая и правая сторона рамки – во второй. В случае трех значений первое будет цветом верха рамки, второе – левой и правой сторон, третье – нижней стороны
рамки. Четыре значения определяют цвет каждой из сторон: верха, правой стороны, низа, левой стороны.

Свойство border-width
Свойство border-width управляет толщиной рамки. Как и свойство border-color, оно принимает от одного до четырех значений, которые применяются к разным сторонам рамки в том же порядке.

Помимо длин для указания толщины рамки можно использовать три ключевых слова: thin (тонкая), medium (средняя) и thick (толстая). По умолчанию, если толщина не установлена явно, принимается значение medium. Типичные спецификации толщины рамки:

border: 1px
border: thin thick medium
border: thick 2mm

Первый пример устанавливает для всех четырех сторон рамки толщину в 1 пиксел. Второй пример делает верх рамки тонким, правую и левую стороны толстыми, а низ – средним. Последний пример делает верх и низ рамки толстыми, а для правой и левой сторон устанавливает толщину в 2 миллиметра.

Если неудобно определять толщину всех четырех сторон рамки при одном подходе, то можно использовать индивидуальные свойства: bordertop-width, border-bottom-width, border-left-width и border-right-width для определения толщины каждой стороны в отдельности. Любое свойство принимает ровно одно значение, по умолчанию устанавливается medium.
Все популярные броузеры поддерживают это свойство.

Свойство border-style
В соответствии с моделью CSS2 можно применить к рамкам HTML-элементов множество украшений. Свойство border-style принимает следующие значения: none (по умолчанию), dotted, dashed, double, groove, ridge, inset и outset. Броузер, разбирающийся в стилях рамок, применяет от одного до четырех значений этого свойства к каждой из сторон рамки в том порядке.

Броузер рисует dotted (точечная), dashed (штриховая), solid (сплошная) и double (двойная) рамки в виде плоских линий поверх фона тега. Значения groove, ridge, inset и outset создают «трехмерные» рамки:

groove – углубленную линию (паз), ridge – выпуклую линию (ребро), inset утапливает содержимое тега и outset приподнимает его над поверхностью документа. Воздействие трехмерной природы последних четырех стилей на фоновое изображение не определено и оставлено на усмотрение броузера. Netscape поддерживает трехмерные эффекты.

Все популярные броузеры поддерживают стили рамок.

Краткие описания рамок
Поскольку описание сложной рамки может наскучить, стандарт CSS2 предоставляет пять свойств, которые принимают любое или все сразу из значений толщины, цвета и стиля для одной или всех сторон рамки.

Свойства border-top, border-bottom, border-left и border-right действуют на соответствующие стороны рамки. Всеобъемлющее свойство border управляет всеми четырьмя сторонами рамки одновременно. Например:border-top: thick solid blue border-left:

1ex inset
border-bottom: blue dashed
border: red double 2px

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

По поводу последнего свойства border надо сказать две вещи. Во-первых, нельзя применять к нему множественные значения для избирательного воздействия на определенные стороны рамки, как это делается с использованием border-color, border-width и border-style. Свойство border всегда действует на все четыре стороны рамки. Во-вторых, секундное размышление подскажет, что создать двойную рамку толщиной всего два пиксела просто невозможно. В подобных случаях броузер имеет право подобрать толщину, чтобы вывести рамку надлежащим образом.

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

Все популярные броузеры поддерживают стили рамок.

Свойство clear
Как и родственный ему атрибут clear для тега
, свойство clear говорит броузеру, помещать ли содержимое тега рядом с «плавающим» элементом или на первой строке под ним. Текст обтекает плавающие элементы, такие как изображения и таблицы с атрибутами align=left и align=right, и HTML/XHTML-элементы, у которых свойство float отлично от none.

Значением свойства clear может быть none, left, right или both. Значение none, принятое по умолчанию, подразумевает, что броузер действует обычным образом и размещает содержимое тега рядом с плавающими элементами по обе стороны, если там есть место. Значение left запрещает располагать содержимое слева от плавающего элемента, right – справа, both не допускает размещения содержимого тега рядом с плавающим элементом вообще.

Результат применения этого свойства совпадает с тем, который достигается, когда перед тегом помещается тег
с атрибутом clear. Таким образом:

h1 {clear: left}

имеет тот же результат, как если бы перед каждым тегом <h1> стояло


.

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

p {overflow : hidden;
clip : rect(15px, -10px, 5px, 10px) }

Эти четыре значения определяют верхнюю, правую, нижнюю и левую стороны усекающего прямоугольника. Каждое значение является смещением относительно сторон прямоугольника, включающего в себя элемент. В нашем примере верхняя сторона усекающего прямоугольника расположена на 15 пикселов ниже верхней стороны прямоугольника, содержащего элемент, правая сторона – на 10 пикселов правее соответствующей правой стороны, нижняя – на 5 пикселов выше нижней стороны, а левая – на 10 пикселов правее левой стороны.

Обратите внимание, что свойство clip имеет силу только в том случае, когда свойство overflow данного элемента имеет значение, отличное от visible. Когда overflow равно visible, усечение не происходит и свойство clip игнорируется.

Популярные броузеры пока еще не поддерживают свойство clip.

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

Свойство float допускает одно из трех значений: left, right или none, принимаемое по умолчанию. Использование none выключает свойствоfloat. Другие значения действуют, как их аналоги для атрибута align, приказывая броузеру поместить содержимое тега у соответствующего края потока и позволить другому содержимому обтекать его. Таким образом, броузер разместит специфицированное при помощи float:left содержимое (включая все поля, заполнители и рамки) тега слева от левой границы потока текста, и последующее содержимое будет обтекать его справа, вниз и под содержимым тега. Пара float:right помещает содержимое тега напротив правого края потока, и другое содержимое будет обтекать его слева вниз и под содержимое тега.

Однако свойство float, чаще всего используемое с таблицами и изображениями, можно с успехом применять и к текстовым элементам. Например, следующее описание создает «встроенный» заголовок, который обтекается потоком текста.

h2 {float: left;
text-align: center;
margin-right: 10px }

Все популярные броузеры поддерживают это свойство.

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

img {height: 100px}

говорит броузеру, что нужно так масштабировать изображение из тега <img>, чтобы оно стало высотой 100 пикселов. Если применяется относительное значение, то базовая величина, от которой оно отсчитывается, зависит от броузера и от тега. При масштабировании элемента в соответствии с заданной высотой пропорции объекта могут быть защищены установкой свойства width этого тега в auto. Таким образом,

img {height: 100px; width: auto}

гарантирует, что изображение всегда будет 100 пикселов высотой с пропорционально измененной шириной.

Если вы хотите задать высоту элемента в форме диапазона, а не одного конкретного значения, пользуйтесь свойствами min-height и max-height.

Они принимают те же значения, что и height, и устанавливают допустимый диапазон для высоты элемента. Броузер затем отрегулирует высоту элемента в соответствии с указанным диапазоном.

Все популярные броузеры полностью поддерживают свойство height, но ни один из них не поддерживает свойства min-height и max-height.

Свойства полей
Подобно характеристикам границ, различ


Вернуться в раздел: HTML / 8. Каскадные таблицы стилей