• Включить стили непосредственно в HTML-дескрипторы.
При внедрении списка стилей на Web-страницу браузер будет применять оп — ределенные в списке правила только к элементам данной страницы. Поэтому, если правила списка стилей уникальны для данной конкретной страницы, спи —
сок можно внедрить в раздел заголовка Web-страницы. Если же правила одного
и того же списка стилей применяются для двух и большего количества страниц, каскадный список стилей лучше сохранить во внешнем файле (предпочтительно
с расширением. ess) и связывать или импортировать внешний список стилей, как будет показано в последующих разделах этой главы.
Внедрение каскадного списка стилей
При внедрении каскадного списка стилей его правила вставляются между на —
чальным и конечным дескрипторами стиля ( ) в разделе заго — ловка Web-страницы:
Атрибут type дескриптора указывает Web-браузеру тип приведенного
списка стилей.
Как правило, все браузеры, не поддерживающие каскадные списки стилей, игнорируют код, содержащийся между начальным и конечным дескрипторами
стиля, если значение атрибута type установлено равным «text/ess» . К сожале — нию, некоторые устаревшие браузеры не распознают дескрипторы стиля. Несмотря
на то что такие браузеры будут игнорировать HTML-дескрипторы, которых они не понимают, они будут выводить содержимое списков стилей на страницу в виде тек —
ста (вместо применения правил списка к элементам страниц). Чтобы предотвратить вывод на экран содержимого каскадных списков стилей в старых браузерах, необхо —
димо заключить правила списков стилей в блок HTML-комментариев (). Web-браузеры, поддерживающие списки стилей, будут игнорировать дескрипторы комментариев и применять содержащиеся в списках правила.
Связывание с внешним списком стилей
Внешние каскадные списки стилей идеальны для случаев, когда одни и те же правила применяются к элементам, находящимся на двух или большем количе- стве Web-страниц. Фактически при связывании всех страниц Web-сайта с вне —
18 2 Глава 4. Каскадные списки стилей
шним списком стилей внешний вид всех страниц сайта можно изменить путем
изменения правил, содержащихся в одном файле. Более того, большинство Web — браузеров кэшируют внешние списки стилей, что исключает задержку в выводе
на экран страниц при загрузке одного и того же файла каскадного списка стилей.
Как предполагает само имя метода, для связывания HTML-документа с вне —
шним списком стилей используется дескриптор . Вместо ввода правил списка стилей, в заголовок каждой Web-страницы вводится ссылка на файл спис —
ка стилей. После этого при изменении в файле списка стилей такого свойства, как, например, типа шрифта, его размера или цвета, все изменения будут сразу же отражаться на всех Web-страницах.
Для связывания Web-страницы с внешним каскадным списком стилей необхо —
димо поместить в заголовок страницы дескриптор следующего вида:
Обратите внимание, что дескриптор не нужно помещать между на-
чальным и конечным дескрипторами () . В приведенном приме —
ре дескриптор указывает Web-браузеру на необходимость использования
правил каскадного списка стилей, которые содержатся в файле styles. ess. Ат — рибут type говорит о том, что в тестовом файле содержатся данные списка сти — лей, а атрибут href указывает имя файла и, при необходимости, путь к файлу,
содержащему объявления каскадного списка стилей. Если Web-браузер не сможет найти файл внешнего списка стилей (указанный в атрибуте href дескриптора
), для вывода элементов страницы на экран будет использоваться правила, установленные в Web-браузере по умолчанию.
Помимо атрибута type, который может использоваться для предотвращения загрузки Web-браузером типов каскадных списков стилей, которые он не поддер — живает, можно указать атрибут media, задающий среду, к которой применяются содержащиеся в файле правила. Считывая значение атрибута media, Web-браузер может выборочно загружать только те файлы каскадных списков стилей, которые применимы к данной конкретной среде работы браузера. Например, при зада-
нии следующего дескриптора Web-браузер может не загружать файлы
списков стилей, применимых для «tv» (т. е. телевидения) при выводе на экран обычных HTML-документов:
type=»text/css media=»tv»>
Допустимые значения атрибута media перечислены ниже:
al l Для всех устройств.
aural Для синтезаторов речи.
braill e Для вывода на тактильных устройствах. embossed Для принтеров брайлевской печати.
handheld Для таких малых устройств, как, например, PDA (которые, как правило, имеют монохромные дисплеи, поддерживают растровые изображения и имеют достаточно ограниченную пропускную способность).
Глава 4. Каскадные списки стилей 18 3
prin t Для вывода на принтеры. projection Для вывода на проекторы.
scree n Для вывода на компьютерный экран без разбивки на страницы
(по умолчанию).
tt y Для телетайпных устройств (использующих шрифт с фиксирован — ным углом наклона).
tv Для телевизионных экранов.
Во внешнем файле списка стилей (например, style. ess ) правила должны определяться следующим образом:
hi {colorrblue; font-size:40px; font-familyiverdana}
p {color:white; background:green; font-family:helvetica;
text-indent:lem}
body {background:#ADD8E6; color:maroon)
Обратите внимание на отсутствие во внешнем каскадном списке стилей каких
бы то ни было HTML-дескрипторов. Во внешнем^ файле списка стилей должны содержаться только правила. Таким образом, внешний каскадный список стилей содержит те же правила, что и внутренний (т. е. внедренный) список. Тем не ме —
нее, в файле правила списка стилей не заключаются между начальным и конеч — ным дескрипторами стиля и не содержат HTML-дескрипторов.
Импортирование внешнего списка стилей
Импортирование внешнего каскадного списка стилей напоминает связывание, которое было рассмотрено в предыдущем разделе. Разница заключается в том,
что импортирование можно совмещать с другими методами, в то время как свя — зывание может использоваться только само по себе. Например, несмотря на то, что заголовок Web-страницы в предыдущем примере может содержать несколько
дескрипторов (для связывания с несколькими файлам каскадных списков стилей), он не может содержать внедренные правила. Как видно из следующего примера, заголовок Web-страницы содержит не только оператор import, но и внедренные правила списка стилей для заголовков уровня 2 и основного текста страницы:
В приведенном примере оператор @import указывает Web-браузеру использо —
вать правила списка стилей, извлекаемые из файла style. ess. Кроме того, до —
бавляются внедренные правила, которые описаны под оператором @import.
(Если заголовок страницы содержит и оператор @import, и внедренные правила,
1 8 4 . Глава 4. Каскадные списки стилей
оператор @import должен находиться перед внедренными правилами каскадного
списка стилей.) Если импортированные и внедренные правила списков стилей конфликтуют между собой, применяются внедренные правила. Например, файл
style. es s из приведенного выше примера включает следующее правило:
body {background:#ADD8E6; color:maroon}
В этом случае внедренное правило для элемента body заменяет объявление цвета текста и Web-браузер выведет на экран текст черного цвета, а не красно —
коричневого. I Я
В отличие от связанных внешних файлов каскадных списков стилей, которые браузер может загружать или не загружать на основании значений атрибутов
type или media дескриптора , Web-браузер должен загружать все импорти —
руемые файлы списков стилей. Тем не менее, оператор @import может использо — ваться для импорта одновременно нескольких файлов списков стилей и заменять их правила правилами, внедренными в заголовок Web-страницы.
Включение стилей в HTML-дескрипторы
Правила форматирования каскадных списков стилей можно применять как к одной отдельной Web-странице (путем внедрения правил на страницу), так и
для всех страниц Web-сайта (за счет связывания или импортирования файлов
списков стилей в HTML-документы). Тем не менее, в некоторых случаях инст — рукции форматирования могут применяться только для конкретного элемента Web-страницы (например, для одного абзаца или заголовка), что не требует со — здания общего правила списка стилей для всех элементов данного типа.
только на один элемент Web-страницы. Например, если на странице содержатся
три абзаца со встроенными стилями, для изменения цвета текста во всех трех абзацах с черного на зеленый необходимо внести соответствующие изменения в дескрипторы каждого абзаца.
Применение нескольких правил каскадных списков стилей
к одному селектору
Правила каскадных списков стилей позволяют легко форматировать текст Web-страниц сайта. С помощью списков стилей можно без труда изменить стиль любого HTML-дескриптора путем изменения одного правила списков стилей. Тем не менее, иногда требуется форматирование одного конкретного элемента Web-страницы (например, текста абзаца), которое отличается от форматирования такого же элемента в другой части страницы. Если для одного и того же селек —
тора (в данном случае селектора р) создать несколько правил, Web-браузер будет форматировать элемент в соответствии с последним правилом списка стилей. Например, второе правило в приведенном ниже наборе правил заменяет дей — ствие первого правила:
р {color:red; font-size:18pt}
p {color:black; font-size:12pt}
Как результат, текст всех абзацев будет выводиться шрифтом черного цвета
размером 12 пунктов.
Для применения к одному элементу Web-страницы нескольких правил спис — ков стилей необходимо для каждого правила определить класс с уникальным именем. После определения класса его форматирование можно применить к эле —
Таким образом, при определении класса каскадного списка стилей без селек —
тора, его можно будет использовать для форматирования любого элемента Web-
страницы. Если же класс будет определен с селектором, его форматирование можно будет применить только к указанному в определении типу HTML-деск — риптора.
18 8 Глава 4. Каскадные списки стилей
Выбор типа шрифта с помощью свойства font-family
Независимо от типа выбираемого шрифта, будь то Times New Roman, Century
Schoolbook или Matisse ITC, общий настрой Web-страницы определяется именно шрифтом, который Web-браузер использует для вывода на экран содержимого
страницы. Поэтому не оставляйте за посетителем выбор типа шрифта (за счет установки шрифта, используемого браузером по умолчанию), а выберите свой шрифт, который, по вашему мнению, будет наилучшим образом соответствовать содержимому страницы. К счастью, правила каскадных списков стилей позволя — ют очень легко устанавливать тип шрифта, используемого Web-браузером для
отображения содержимого страниц всего Web-сайта.
ПРАКТИКУМ
Для задания используемого Web-браузером типа шрифта добавьте в описание правила каскадного списка стилей свойство font-family. Предположим, напри — мер, что необходимо создать Web-страницу, на которой браузер будет отображать весь текст шрифтом Helvetica. Для описания правила списка стилей, которое присваивает тип шрифта Helvetica дескриптору , используется селектор абза —
ца (р) и свойство font-family, как показано в следующем коде:
Bbi6op семейства шрифтов (то есть начертания)
style type=»text/ess»>
p {font-family:helvetica}
—>
В приведенном примере правило каскадного списка стилей для селектора аб — заца (р) заставляет браузер выводить на экран весть текст, который находится после дескриптора , шрифтом Helvetica. Свойство font-family, значение ко — торого устанавливается в фигурных скобках ({}), является частью объявления
стиля каскадного списка стилей и указывает, какой тип шрифта должен исполь — зоваться.
Вместо указания одного типа шрифта можно создавать правила с нескольки —
ми типами шрифтов. Указывая несколько шрифтов, вы даете Web-браузеру воз — можность выбора, если основной указанный в правиле тип шрифта в системе по — сетителя не установлен. Следует иметь в виду, что если в системе посетителя не установлен шрифт, указанный в правиле каскадного списка стилей, Web-браузер будет использовать шрифт по умолчанию. Для снижения вероятности выбора шрифта, не установленного на компьютере посетителя (в результате чего содер — жимое Web-страницы будет выводиться шрифтом по умолчанию), создайте пра — вило списка стилей, с выбором альтернативного второго (например, Times New
Roman) или даже третьего (возможно, Courier) типа шрифта. (Теоретический предел для количества типов шрифтов, указываемых в правилах каскадных спис — ков стилей, не установлен.)
Глава 4. Каскадные списки стилей. 18 9
Для создания объявления каскадного списка стилей с альтернативными типа — ми шрифтов, из списка которых браузер будет иметь возможность выбирать, не- обходимо в правиле списка стилей перечислить все требуемые шрифты, как в приведенном ниже примере:
npHMep изменения начертания шрифта
type=»text/ess»>
—>
р {font-family:Helvetica;»times new roman»,courier}
Стандартый заголовок уровня K/hl>
Web-браузер выводит текст, заключенный между дескрипторами абзаца, шрифтом Helvetica. Если этот шрифт по ряду причин не доступен, CSS — правило заставляет Web-браузер искать шрифт Times New Roman, а затем Courier.
Бсли все три упомянутых шрифта оказываются недоступными, Web —
браузер игнорирует данное CSS-правило и использует шрифт, который установлен в браузере по умолчанию.
Здесь свойство font-family указывает, что браузер должен выводить на экран
текст, находящийся после дескриптора шрифтом Helvetica. Если шрифт Helvetica на компьютере посетителя не установлен, будет использоваться шрифт Times New Roman. Если же и Times New Roman отсутствует, браузер попытается
вывести содержимое Web-страницы шрифтом Courier. В случае если в системе посетителя не окажется ни одного перечисленного в свойстве font-family шрифта, Web-браузер воспользуется шрифтом, установленным в нем по умолчанию.
Задание размера текста с помощью свойства font-size
При установке определенного размера шрифта, как правило, преследуются
две цели. Во-первых, вы хотите гарантировать, что текст достаточно крупный для чтения. Во-вторых, вы хотите иметь возможность изменять размеры текста заго —
ловков или отдельных фраз или слов с целью их выделения. Поскольку по умол — чанию для различных типов браузеров (или даже различных версий одного и того же типа браузера) размер шрифта может отличаться, если вы хотите, чтобы текст Web-страницы выводился шрифтом определенного размера, его необходимо указать в коде Web-страницы.
Размер шрифта играет особенно важную роль, если на странице содержится большой объем текста. Если размер шрифта будет слишком маленьким, посети- тель вскоре устанет читать и покинет страницу, так и не прочитав всего ее содер — жимого. Если же размер шрифта слишком велик, он может отвлекать внимание посетителя и, как результат, посетитель может пропустить важную информацию, содержащуюся на Web-странице.
Свойство font-siz e каскадных списков стилей позволяет задавать размер вы — водимого на странице текста. Более того, написание правил списков стилей, уп —
равляющих размером шрифта, во внешних списках стилей дает возможность лег —
ко экспериментировать со значениями свойства font-siz e для определения оптимального размера шрифта. Помните, что изменение одного правила во внешнем каскадном списке стилей приводит к изменению размера шрифта на всех Web-страницах, связанных с этим списком стилей.
ПРАКТИКУМ
В то время как атрибут siz e дескриптора позволяет выбирать размер шрифта только из 14 имеющихся размеров (од 1 до 7 и от -1 до -7), выражае — мых в пунктах, пикселях и параметрах em, свойство font-siz e каскадных спис — ков стилей предоставляет в ваше распоряжение неограниченное количество раз — меров шрифтов. Специалисты, работающие с печатью, ближе всего знакомы с выражением размера шрифта в пунктах. При печати пункт представляет собой
х/п дюйма. Следовательно, символ размером 12 пунктов при печати будет иметь
размер Уб дюйма, а символ размером 72 пунктов — 1 дюйм. К сожалению, на мониторе текст одинакового размера в пунктах может быть разного размера, по — скольку браузеры могут работать в системах, в которых мониторы имеют различ- ное разрешение.