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

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

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

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

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

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

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

h2 {font-style: italic}

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

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

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

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

s = (n/a) * fs

где s – это новый размер, используемый для вывода замещающего шрифта, вычисленный как частное от деления значения n свойства font-size-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-stretch для выбора более сжатых или более растянутых символов вашего шрифта.

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

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

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

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

Названия шрифтов соответствуют конкретным начертаниям, скажем, 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»>

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

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

Таблицы стилей, конечно, меняют дело. Стандарт CSS2 предоставляет семь свойств шрифта, изменяющих вид текста, содержащегося в тегах, к которым они применяются: font-family, font-size, font-size-adjust, font-style, font-variant, font-stretch и font-weight. Вдобавок существует универсальное свойство font, которое позволяет объявить все модификации шрифта.

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

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

body {color: blue}

вместо того чтобы создавать правило для любого используемого в нем тега.

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

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

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

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

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