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

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

div {text-align: right}

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

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

Используйте свойство 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.

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

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

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

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

blockquote {letter-spacing: 2px}

вставляет дополнительные два пиксела между соседними буквами в теге <blockquote>. А так выглядят 5 пикселов между символами. Все популярные броузеры поддерживают это свойство.

Обычно броузер, чтобы заполнить выделенное пространство, размножает фоновое изображение и по горизонтали, и по вертикали. Используйте свойство 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-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.

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