HTML верстка, HTML коды, Каскадные таблицы стилей, Форматированные списки, Гиперссылки и Сети, Мультимедийные елементы Каскадные таблицы стилей, Форматированные списки, Гиперссылки и Сети, Мультимедийные елементы

По умолчанию поддерживающие стили броузеры выводят фоновое изображение, начиная с левого верхнего угла выделенного пространства. С помощью свойства 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%

смещает изображение на один сантиметр вправо и к середине области тега по вертикали.

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

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

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

</pre>
<p>
This background image is not offset:
<pre>
</pre>

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

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

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

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

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

<h2>Here’s what’s for dinner tonight:</h2>
<ul>
<li>Liver with Onions</li>
<li>Mashed Potatoes and Gravy</li>
<li>Green Beans</li>
<li>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-color управляет цветом фона элемента. Присваивайте этому свойству в качестве значения цвет или ключевое слово transparent. Значение по умолчанию – transparent (прозрачный). Результат будет естественным.

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

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

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

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

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

em {background-color: red}

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

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

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

В дополнение к базовым дескрипторам шрифта в 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.

Базовые дескрипторы шрифта, указываемые в специальной директиве @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. Для этого загружаемого шрифта доступны обычная версия и курсив. Поскольку другие дескрипторы не указаны, броузер будет предполагать, что остальные свойства шрифта (жирность, вариант и т. д.) определяются в самом шрифте.

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

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

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

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

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

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

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

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

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

p {fon-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».