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

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

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

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

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

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

a.plain:link, a.plain:active, a.plain:visited {color: blue}
a:link {color: blue}
a:visited {color: green}
a:active {color: red}
a.fancy:link {font-style: italic}
a.fancy:visited {font-style: normal}
a.fancy:active {font-weight: bold; font-size: 150%}

Простая (plain) версия <a> всегда синяя вне зависимости от состояния гиперссылки.Соответственно нормальная гиперссылка имеет сначала синий цвет, становится красной, когда активна, и превращается в зеленую после посещения. Затейливая (fancy) ссылка наследует цветовую схему нормальной, но ее текст до использования выводится курсивом, после посещения возвращается к обычному и вырастает в полтора раза и становится жирным, когда она активна.

Два слова в предупреждение по поводу класса fancy – указывая изменение размера шрифта для преходящего свойства, вы задаете броузеру работу по отображению окружающего содержимого. Поскольку некоторые броузеры работают на медленных машинах, этот эффект может остаться незамеченным определенной частью ваших пользователей. Кроме того, поскольку реализация такого сорта изменений в отображе
нии довольно хлопотна, маловероятно, что большинство броузеров будут поддерживать радикальную модификацию внешнего вида в псевдоклассах тега <a>.