ГЛАВА 7 Таблицы каскадных стилей

В этой главе вы познакомитесь с первым из методов отображения XML-документов в браузере Microsoft Internet Explorer 5, рассматриваемых в этой книге: с таблицами каскадных стилей (CSS). Таблица каскадных стилей представляет собой файл, который содержит инструкции для форматирования элементов в XML-документе.

Поскольку в XML вы создаете свои собственные элементы, браузер не имеет встроенных средств, позволяющих определить, как их правильно отобразить. Создание таблицы каскадных стилей и связывание ее с вашим XML-документом - это один из способов сообщить браузеру, как отображать каждый из элементов документа. XML-документ со связанной таблицей каскадных стилей может быть открыт непосредственно в Internet Explorer 5. Вам нет необходимости использовать HTML-страницу для доступа и отображения данных (как это имеет место в других методах отображения XML, о которых будет говориться в двух следующих главах).

Хранение инструкций по отображению в таблице стилей отдельно от самого XML-документа повышает гибкость XML-документа и облегчает работу с ним. Вы можете, например, быстро адаптировать один XML-документ к различным условиям отображения (различным браузерам, приложениям, контекстным ситуациям, периферийным устройствам и т.д.) простым присоединением соответствующей таблицы стилей, без необходимости реструктурировать сам документ. Вы также можете быстро обновить формат для группы сходных XML-документов внеся изменения в присоединенную к этим документам таблицу стилей, не открывая и не редактируя каждый из документов.

Использование таблицы стилей, наверное, является самым простым методом отображения XML-документа. Язык CSS уже знаком многим Web-диуайнсрам, поскольку именно он в настоящее время используется для HTML-страниц. Кроме того, современные Web-браузеры обеспечивают высокий уровень поддержки таблиц каскадных стилей, в то время как другие методы отображения XML все еще находятся в стадии развития, и браузеры только начинают их поддерживать. Тем не менее, по сравнению с другими методами отображения XML, о которых вы узнаете в последующих главах, таблицы каскадных стилей имеют ряд ограничений. Хотя таблица каскадных стилей позволяет управлять способами форматирования содержимого элементов в XML-документах, она не дает возможности модифицировать или реорганизовывать само содержимое. Она также не прзволяет вам осуществлять доступ к атрибутам, примитивам, инструкциям по обработке и другим компонентам XML и не дает возможности обрабатывать информацию, которую эти компоненты содержат.

В последующих главах вы познакомитесь с более сложными - но и более гибкими - способами отображения XML-документов. В главе 8 вы узнаете, как связывать XML-документ с HTML-страницей и отображать XML-элементы путем сцепления с ними стандартных HTML-элементов. В главе 9 вы узнаете, как осуществлять доступ и отображать отдельные элементы, атрибуты и другие компоненты XML-документа путем написания кода сценария на HTML-странице. А в главе 10 вы откроете для себя, как применять еще более мощный язык таблиц стилей — расширяемый язык таблиц стилей (Extensible Stylesheet Language - XSL) - который позволяет вам не только форматировать содержимое XML-элемен-та, но и преобразовывать содержимое документа с высокой степенью гибкости.

Примечание. В этой главе раскрывается большинство свойств CSS, поддерживаемых Internet Explorer 5, которые являются частью оригинальной версии CSS, установленной консорциумом World Wide Web (W3C) и известной как Cascading Style Sheets Level 1, или CSS 1. Консорциум W3C также определил усовершенствованную версию CSS, которая значительно превосходит версию CSS1, известную как Cascading Style Sheets Level 2, или CSS2. CSS2 только частично поддерживается современными браузерами и не рассматривается в этой книге. Полную спецификацию W3C для CSS1 вы можете найти по адресу Шр://www.w3.arg/TR/REC-CSS1, а спецификацию для CSS2 - по адресу http://www.w3.org/TR/ REC-CSS2.

 

Основные этапы при использовании таблицы каскадных стилей

Вот два основных этапа при использовании таблицы каскадных стилей для отображения XML-документа.

  1. Создание файла таблицы стилей.
  2. Связывание таблицы стилей с XML-документом.

 

Шаг первый: создание файла таблицы стилей

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

Листинг 7-1 содержит пример простой таблицы каскадных стилей. (Копия этого листинга содержится на CD-ROM в файле InventoryOI .CSS.)

Листинг 7-1

InventoryOI .ess

/* Имя файла: InventoryOI .ess */

BOOK

{display:block; 

margin-top: 12pt; 

font-size: 10pt}

TITLE

{font-style:italic}

AUTHOR 

{font-weight:bold}

Эта таблица стилей предназначена для присоединения к XML-документу, представленному в Листинге 7-2. (Копия этого листинга содержится на (' I )-ROM и файле InventoryOI .xml.) Листинг 7-2 используется и в других примерах в дянний главо, поэтому вам придется не раз к нему обращаться.

Листинг 7-2

Inventory01.xml

<?xmlversion="1.0"?>

<!-- Имя файла: Inventory01.xml -->

<?xml-stylesheettype="text/css" href="lnventory01.css"?>

<INVENTORY> 

<BOOK>

<TITLE>The Adventures of Huckleberry Finn</TITLE>

<AUTHOR>Mark Twain</AUTHOR>

<BINDING>mass market paperback</BINDING>

<PAGES>298</PAGES>

<PRICE>$5.49</PRICE> 

</BOOK> 

<BOOK>

<TITLE>Leaves of Glass</TITLE>

<AUTHOR>Walt Whitman</AUTHOR>

<BINDING>hardcover</BINDING>

<PAGES>462</PAGES>

<PRICE>$7.75</PRICE> 

</BOOK> 

<BOOK>

<TITLE>The Legend of Sleepy Ноllоw</TITLE>

<AUTHOR>Washington lrving</AUTHOR>

<BINDING>mass market paperback</BINDING>

<PAGES>98</PAGES>

<PRICE>$2.95</PRICE> 

</BOOK> 

<BOOK>

<TITLE>The Marble Faun</TITLE>

<AUTHOR>NathanielHawthorne</AUTHOR>

<BINDING>tradepaperback</BINDING>

<PAGES>473</PAGES>

<PRICE>$10.95</PRICE> 

</BOOK> 

<BOOK>

<TITLE>Моbу-Dick</TITLE>

<AUTHOR>Herman Melville</AUTHOR>

<BINDING>hardcover</BINDING>

<PAGES>724</PAGES>

<PRICE>$9.95</PRICE> 

</BOOK> 

<BOOK>

<TITLE>The Portrait of Lady</TITLE>

<AUTHOR>Henry James</AUTHOR>

<BINDING>mass market paperback</BINDING>

<PAGES>256</PAGES>

<PRICE>$4.95</PRICE> 

</BOOK> 

<BOOK>

<TITLE>The Scarlet Letter</TITLE>

<AUTHOR>NathanielHawthorne</AUTHOR>

<BINDING>trade paperback</BINDING>

<PAGES>253</PAGES>

<PRICE>$4.25</PRICE> 

</BOOK> 

<BOOK>

<TITLE>The Turn of the Screw</TITLE>

<AUTHOR>Henry James</AUTHOR>

<BINDING>trade paperback</BINDING>

<PAGES>384</PAGES>

<PRICE>$3.35</PRICE> 

</BOOK>

<INVENTORY>

Примечание. Пример таблицы стилей в Листинге 7-1 и пример XML-до-кумента в Листинге 7-2 являются копиями файлов, которые вы создали в упражнении «Отобразите XML-документ с использованием таблицы каскадных стилей» в главе 2.

Таблица стилей состоит из одного или нескольких правил (иногда их называют набором правил). Правило содержит информацию по отображению определенного типа элемента в XML-документе. На рисунке на следующей странице представлено правило для элементов BOOK с указанием его составных частей.

Селектор представляет собой имя типа элемента, к которому относится информация по отображению.

За селектором следует блок объявлений, который ограничивается фигурными скобками ({}) и содержит одно или несколько объявлений, разделяемых точкой с запятой.

Каждое объявление задает установку определенного свойства, такого как размер шрифта, который будет использован для отображения элемента. Объявление состоит из свойства, вслед за которым идет двоеточие, после которого следует значение для данного свойства. Например, следующее объявление устанавливает для свойства font-Size (размер шрифта) значение 10pt(10 пунктов) (см. следующий рисунок).

Таблица стилей может также содержать комментарии. Комментарии в таблице стилей начинаются с символов косой черты и звездочки (/*) и заканчиваются символами звездочки и косой черты (*/). Между этими парами символов-ограничителей вы можете поместить любой текст по вашему желанию. Когда браузер прочитывает таблицу стилей для форматирования документа, он игнорирует этот текст. Вы можете использовать комментарий для пояснений, указания назначения и действия таблицы стилей. В качестве примера можно привести комментарий в начале таблицы стилей из Листинга 7-1:

/* Имя файла: Inventory01 .ess */

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

BOOK

{display:block;

/* margin-top: 12pt;*/ 

font-size: 10pt}

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

Пример таблицы стилей, представленной в Листинге 7-1, содержит следующие объявления:

  • display;block. Помещает пустую строку перед и после текста элемента; (Эта установка имеет и другие назначения, о чем вы узнаете далее в этой главе.)
  • margin-top:12pt. Добавляет верхнее поле (отбивку) высотой в 12 пт к тексту элемента;
  • font-size:10pt. Устанавливает размер шрифта, используемого для отображения текста элемента, в 10 пунктов;
  • ton t-style:italic. Отображает текст элемента курсивом;
  • font-weight:bold. Отображает текст элемента полужирным.

На рисунке на следующей странице показано как Internet Explorer 5 отображает XML-документ, который использует данную таблицу стилей в соответствии с инструкциями, содержащимися в этих объявлениях.

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

 

Нечувствительность к регистру в CSS

В Internet Explorer 5 таблицы каскадных стилей являются нечувствительными к регистру, в котором набраны символы. То есть, когда Internet Explorer 5 обрабатывает таблицу стилей, он игнорирует регистр букв (строчные или прописные). Например, вы можете набрать следующее правило любым из трех приведенных ниже способов:

TITLE

{font-style:italic} 

Title

{FONT-STYLE:ltalic} 

title

{Font-Style:ITAUC}

Нечувствительность к регистру в таблицах каскадных стилей имеет важное значение. Поскольку XML-документы являются чувствительными к регистру, вы вполне можете иметь два различных типа элемента, имена которых отличаются лишь регистром букв, например, Book и BOOK. В таблице каскадных стилей, однако, эти два имени будут отнесены к одно-му и тому же типу элемента, и вы не сможете назначить им различную установку свойств. Следовательно, если вы предполагаете отображать наш XML-документ с использованием таблицы каскадных стилей, у вас не должно быть типов элементов, имена которых отличаются только регистром одной или нескольких букв.

 

Наследование установок свойств

Набор свойств, которые вы присвоили определенному элементу (например, BOOK), действует на все дочерние элементы, прямо или косвенно вложенные в него, если только они не переустанавливаются впоследствии для определенного дочернего элемента.

Следующие свойства, однако, являются исключениями и не наследуются дочерними элементами:

  • свойство display, о котором пойдет речь в разделе «Установка свойства display» далее в этой главе;
  • свойства, относящиеся к фону (background-color, background-image, background-repeat и background-position), «Установка свойств фона» далее в этой главе;
  • свойство vertical-align, описанное в разделе «Установка свойств разбивки текста и выравнивания» далее в этой главе;
  • свойства размещения текста, о которых вы узнаете в разделе «Установка свойств текстовых областей» далее в этой главе.

Например, таблица стиля в Листинге 7-1 форматирует элемент BOOK (документ приведен в Листинге 7-2) следующим образом:

BOOK

{display:block; 

margin-top: 12pt; 

font-size: 10pt}

Каждый элемент BOOK имеет пять дочерних элементов. Поскольку свойство font-size является наследуемым, все дочерние элементы внутри элемента BOOK отображаются с размером шрифта в 10 пунктов. Дочерние элементы, однако, не наследуют установку свойств display и margin-top (свойство margin-top относится к группе свойств размещения текста).

Для не наследуемых свойств, если вы не задали значение свойства для конкретного элемента, браузер использует значение свойства по умолчанию. Например, значением по умолчанию для свойства display будет inline. В этой главе приведены значения свойств по умолчанию для всех не наследуемых свойств.

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

Подробнее о наследовании и о его роли в механизме каскадного присвоения значения вы узнаете в разделе «Присвоение значений в таблицах каскадных стилей» далее в этой главе.

 

Использование множественных элементов и множественных правил

Вы можете применить одно правило к нескольким элементам, включив все имена элементов в селектор и отделив имена запятыми. Например, следующее правило применяется к типам элементов РОЕМ, TITLE, AUTHOR, DATE и STANZA:

РОЕМ, TITLE, AUTHOR, DATE, STANZA 

{display: block; 

margin-bottom: 12pt}

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

Вы также можете включить определенный тип элемента в более чем одно правило внутри той же самой таблицы стилей. Например, следующие правила оба включают элемент DATE:

РОЕМ, TITLE, AUTHOR, DATE, STANZA

{display:block;

margin-bottom: 12pt} 

DATE

{font-style:italic}

Первое правило содержит объявление, которое элемент DATE разделяет с другими элементами в списке, в то время как второе правило осуществляет дополнительную настройку для элемента DATE - а именно, задает установку свойства, применимого только к этому элементу.

 

Использование контекстуальных селекторов

В селекторе вы можете предварить имя элемента именами одного или нескольких элементов-предков (родительский, родительский плюс родительский родителя и т.д.), и правило будет применено только к элементам с этим именем, которые являются вложенными подобным образом. Селектор, который включает один или несколько элементов-предков, называется контекстуалгмым (contextual) селектором. Селектор, который не включает имен элементов-предков (подобно тем, с которыми вы имели дело в предыдущем разделе), называется родовым (generic) селектором.

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

Предположим, что следующий элемент является корневым элементом XML-документа:

<MAPS> 

<CITY>

<NAME>Santa Fe</NAME> 

<STATE>New Mexico</STATE> 

</CITY>

<STATE>California</STATE> 

</MAPS>

Следующие правила в присоединяемой таблице стилей заставят браузер отформатировать «New Mexico» обычным шрифтом, a «California» - курсивом:

CITY STATE

{font-styte:normal}

STATE

{font-style: italic}

Хотя содержимое New Mexico элемента STATE отвечает обоим коШек-стуальным селекторам в правиле CITY STATE и родовому селектору в правиле STATE, селектор CITY STATE является бтолее конкретным и, следовательно, имеет приоритет. (Подробнее о приоритетах и конфликтах правил вы узнаете в разделе «Присвоение значений в таблицах каскадных стилей» далее в этой главе.)

Примечание. Имейте в виду, что не следует помещать запятые между именами элементов в контекстном селекторе. В противном случае правило будет применено ко всем элементам (как было описано в предыдущем разделе), но не к последнему дочернему элементу в списке.

 

Использование атрибута STYLE

Вы можете использовать специальный атрибут STYLE в вашем XML-документе вместо того, чтобы устанавливать одно или несколько свойств отдельного элемента в таблице стилей. Если значение свойства, установленного с помощью атрибута STYLE, конфликтует со значением свойства, установленного в таблице стилей, установка с помощью атрибута STYLE имеет приоритет. Таким образом, атрибут STYLE является удобным средством, чтобы переустановить для определенного элемента значение свойства, присвоенное для типа элемента в присоединенной таблице стилей. Тем не менее, использование атрибута STYLE нарушает принцип CSS -хранения информации о форматировании отдельно от определения содержимого документа и структуры XML-файла.

Чтобы установить одно или несколько значений свойств, включите объявления в значение атрибута STYLE в виде строки, заключенной в кавычки, отделяя индивидуальные объявления точкой с запятой, как вы это делаете в объявлении блока в CSS. Например, таблица стилей в Листинге 7-1 задает для элементов TITLE курсивное начертание с размером шрифта в 10 пунктов. Однако если вы включите следующий атрибут STYLE в начальный тег определенного элемента TITLE в документе, этот элемент будет отображен шрифтом roman (не курсивом), а размер шрифта составит 14 пунктов:

<TITLE STYLE='font-style:normal; font-size: 14pt'>

The Adventures of Huckleberry Finn

</TITLE>

В Internet Explorer 5 ваш документ будет выглядеть, как показано на следующем рисунке.

Совет. Для валидных документов вам необходимо объявить атрибут STYLE в DTD перед его использованием. Вы можете сделать это, например, следующим образом:

<!ATTUST TITLE STYLE CDATA#IMPLJED>

 

Импорт других таблиц стилей

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

Вот обобщенная форма записи директивы @import, где иКЬТаблСтил есть полный или относительный URL (Uniform Resource Locator) файла, содержащего таблицу каскадных стилей, которую вы хотите импортировать:

@import \x\(URLТаблСтил);

Сведения о задании значений URL приведены далее на врезке «Задание значений URL». Например, следующая директива (использующая относительный URL), помещенная в начале таблицы стилей в Листинге 7-1, импортирует таблицу стилей, содержащуюся в файле Book.css (который должен находиться в той же папке, что и основная таблица стилей):

/* Имя файла: Inventory01.ess */ 

@tmport url(Book.css); 

BOOK

{display:block;

margin-top: 12pt;

font-size:10pt} 

/* продолжение таблицы стилей... */

Директива @import должна располагаться в начале таблицы стилей перед правилами. Вы можете поместить в начале таблицы стилей несколько директив @import.

Если вы импортируете одну или несколько таблиц стилей, браузер объединяет правила, содержащиеся в основной и импортируемых таблицах стилей. Однако в случае возникновения конфликта правил основная таблица стилей (из файла, в который осуществляется импорт) имеет приоритет над импортируемыми таблицами стилей. Если же вы импортируете несколько таблиц стилей, правила из таблицы стилей, импортированной последней, имеют приоритет над правилами из ранее импортированных таблиц стилей. Подробнее о приоритетах вы узнаете в разделе «Каскадирование в таблицах каскадных стилей» далее в этой главе.

 

Задание значений URL

URL представляет собой стандартный Internet-адрес, такой как http://mspress.microsoft.com/. Директива &import и свойство background image требуют указания значения URL для задания местонахождения соответствующего ресурса (таблицы стилей или файла изображения). URL задается так, как указано ниже. Обратите внимание, что нельзя помещать пробелы между url и символом открывающей скобки (.

url(URL)

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

@import url(http://www.my_domain.com/stylesheets/MyStyles.css);

INVENTORY

{background-image:url(file:///E:\Exarnple Code\Background.gif)}

Вы такжеможете использовать частичный URL, который задает местонахождение относительно местонахождения файла таблицы стилей, содержащего URL. Относительные URL в таблицах стилей работают - подобно URL в HTML-страницах. Например, если файл таблицы сти-; лей находится в папке Example Code, следующий относительный URL будет эквивалентен полному URL из предыдущего примера (а имен-i но, file:///E:\Example Code\Background.gif):

INVENTORY {background-image:url(Background.gif)}

 

Шаг второй: связывание таблицы стилей с X ML-документом

Чтобы связать таблицу каскадных стилей с XML-документом, вы должны вставить в документ зарезервированную инструкцию по обработке xrnl-stylesheet. Эта инструкция по обработке имеет следующую обобщенную форму записи, где CSSFilePath есть, .задающий местонахождение файла таблицы стилей:

<?xml-stylesheet type="text/css" href=CSSFilePath?>

Вы можете использовать полный URL, например:

<?xrnl-stylesrieet type="text/css"

href="http://www.my_domain.com/lnventory01.css"?>

Чаще используется частичный URL, который задает местонахождение относительно местонахождения XML-документа, содержащего инструкцию по обработке xml-stylesheet, например:

<?xml-stylesheet type="text/css" href="lnventory01.css"?>

(Относительный URL используется чаще, поскольку обычно вы храните файл таблицы стилей в той же папке, что и XML-документ, либо в одной из вложенных папок.)

Обычно вы добавляете инструкцию по обработке xml-stylesheet в пролог XML-документа, вслед за объявлением XML, как вы видели в примере XML-документа в Листинге 7-2. (Подробнее об инструкциях по обработке и описании корректных мест для их помещения рассказано в разделе «Использование инструкций по обработке» в главе 4.)

Возможность присоединять к XML-документу внешнюю таблицу стилей увеличивает гибкость форматирования документа. Вы можете полностью изменить вид документа, просто присоединив к нему другую таблицу стилей. Чтобы сделать это, достаточно всего лишь отредактировать URL в инструкции по обработке xml-stylesheet, не внося никаких других изменений в XML-документ.

Если вы связали таблицу стилей с XML-документом, вы можете открыть этот документ непосредственно в Internet Explorer 5 - например, вы можете ввести URL документа или путь к файлу в поле Address (Адрес), как показано на следующем рисунке, и нажать клавишу Enter.

Или, предполагая, что Internet Explorer 5 есть ваш браузер, используемый по умолчанию, вы можете просто дважды щелкнуть на имени файла XML-документа в окне Windows Explorer (Проводник) или в окне папки.

Internet Explorer 5 откроет XML-документ и отобразит его с использованием инструкций из связанной таблицы стилей.

Примечание. Если браузер не может найти файл таблицы стилей, заданный в инструкции по обработке xml-stylesheet, он отобразит текст документа с использованием своего собственного набора свойств (например, с текущими значениями гарнитуры и размера шрифта). Если XML-документ не связан с таблицей стилей (т.е. документ не содержит инструкции по обработке xml-stylesheet), то Internet Explorer 5 отобразит исходный XML-код для документа, но не содержимое документа.

Вы можете включить в XML-документ более одной таблицы стилей, вставив для каждой из них инструкцию по обработке xrnl-stylesheet в начале XML-документа, например:

<?xml version="1.0"?>

<?xml-stylesheet type="text/css" href="Book01.css"?>

<?xml-stylesheet type="text/css" href="Book02.css"?>

<INVENTORY>

<!-- содержимое элемента Документ --> 

</INVENTORY>

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

Если вы устанавливаете связи с несколькими таблицами стилей, Internet Kxplorer 5 объединяет правила из различных таблиц. Если отдельные таблицы стилей содержат конфликтующие правила, правила из последней связываемой с документом таблицы стилей имеют приоритет над правилами, содержащимися в предшествующих таблицах стилей. (Так, в просмотренном примере правила из Book02.css имеют приоритет над конфликтующими с ними правилами из Book01 .CSS.) Подробнее о приоритете в случае конфликта правил вы узнаете в следующем разделе.

 

Присвоение значений в таблицах каскадных стилей

В таблицах каскадных стилей вы можете присваивать значения свойствам па нескольких различных уровнях (подобно каскаду водопада, в котором поток падает, проходя по нескольким ступеням). Ниже дано описание основных уровней, на которых вы можете присваивать значение свойству. Уровни представлены в порядке их приоритетов - от высшего к низшему, Когда браузер готовится отобразить элемент, и значение его определенного свойства, например, font-size, конфликтует со значением, присвоенным этому элементу на других уровнях, браузер использует значение, присвоенное на наивысшем уровне приоритета.

  1. Если вы присвоили значение свойству в атрибуте STYLE для определенного элемента в XML-документе, браузер использует это значение при отображении элемента. Например, он отобразит следующий элемент полужирным:

<TITLE STYLE="font-weight:bold">Leaves of Glass</TITLE>

  1. Если вы не установили свойство в атрибуте STYLE, браузер использует значение свойства, объявленного в правиле CSS с контекстуальным селектором (т.е. селектором, который определяет элемент с одним или несколькими его элементами-предками, о чем говорилось ранее в разделе «Использование контекстуальных селекторов»). Предположим, что следующий элемент является элементом Документ XML-документа:

<MAPS> 

<CITY>

<NAME>Santa Fe</NAME> 

<STATE>New Mexico</STATE> 

</CITY>

<STATE>California</STATE> 

</MAPS>

Допустим также, что присоединенная таблица стилей содержит следующие правила:

CITY STATE

{font-style:normal} 

STATE

{font-style:itaiic}

Браузер использует правило CITY STATE для форматирования элемента "New Mexico" STATE, поскольку оно имеет контекстуальный селектор, и, следовательно, имеет приоритет над правилом STATE, имеющим родовой селектор. Надпись «New Mexico» в результате будет отображена обычным шрифтом.

  1. Если вы не объявили значение определенного свойства в правиле, имеющем соответствующий контекстуальный селектор, браузер использует значение, объявленное в правиле с родовым селектором (т.е. селектором, который включает только имя элемента). Например, для второго компонента рассматриваемой таблицы стилей браузер не найдет соответствующего контекстуального правила для элемента "California" STATE, поэтому использует родовое правило STATE, в результате чего надпись «California» будет отображена курсивом.
  2. Если вы не объявили значение для определенного свойства для элемента в родовом правиле, браузер использует установку свойства, объявленную для ближайшего элемента-предка (родителя, родителя родителя и т.д.). Например, в таблице стилей из Листинга 7-1 правило для элемента TITLE не присваивает значение для свойства font-size:

TITLE

(font-style:italic)

Следовательно, браузер будет использовать установку свойства font-size для родительского элемента BOOK (элемент BOOK является родителем для элемента TITLE в XML-документе, использующем таблицу стилей):

BOOK

(display:block; 

margin-top: 12pt; 

font-size: 10pt}

В результате текст элемента TITLE будет отображен с размером шрифта 10 пунктов.

Этот процесс имеет место только для наследуемого свойства. Для ненаследуемого свойства браузер будет использовать значение свойства по умолчанию (см. раздел «Наследование установок свойств» ранее в этой главе).

  1. Если таблица стилей не содержит установку свойства для какого-либо родительского элемента, браузер использует свою собственную установку. Такой установкой может быть значение по умолчанию, встроенное в браузер, либо значение, заданное пользователем браузера. Например, поскольку в рассматриваемой таблице стилей из Листинга 7-1 не установлено значение для свойства font-family, браузер использует свое собственное значение этого свойства для отображения всех элементов. В Internet Explorer 5 это шрифт Times New Roman, если только пользователь браузера не выберет другое семейство шрифтов, воспользовавшись командой Internet Options (Свойства обозревателя) из меню Tools (Сервис).

Этот процесс имеет место только для наследуемых свойств. Для ненаследуемых свойств браузер использует значение свойства по умолчанию.

Основной принцип здесь следующий: если вы присвоили свойству значения, конфликтующие на различных уровнях, браузер отдает предпочтение более конкретизированному правилу. Например, установленное для элемента свойство является само по себе более конкретизированным, чем установка для родителя элемента, поэтому имеет приоритет. Вы можете воспользоваться этим принципом и в более сложных случаях. (Например, если дочерний элемент элемента-родителя имеет и контекстуальное, и родовое правило, как вы думаете, какое из них браузер использует для дочернего элемента? Правильно: браузер использует контекстуальное правило!)

Примечание. Порядок приоритетов не является незыблемым. Можно сделать так, что установка свойства в браузере будет иметь приоритет над установкой свойства в таблице стилей, присоединенной к вашему XML-документу. Это дает возможность пользователям управлять форматированием (например, пользователь с ослабленным зрением может использовать увеличенный шрифт). В Internet Explorer 5, например, пользователь может присвоить установке свойств в браузере наивысший приоритет по отношению к установкам свойств в таблице стилей, выбрав команду Options (Свойства обозревателя) из меню Tools (Сервис), щелкнув на кнопке Accessibility (Оформление) на вкладке General (Общие) в диалоговом окне Internet Options (Свойства обозревателя) и выбрав соответствующие опции.

Что произойдет, если для определенного свойства установлены конфликтующие значения на одном и том же уровне? В таком случае браузер использует последнюю установку, которую он обработал. Например, если два родовых правила для одного элемента имеют конфликтующие установки для свойства font-style, как в следующем примере, браузер использует второе из них, поскольку оно обрабатывается последним:

TITLE, AUTHOR, BINDING, PRICE

(display: block;

font-size: 12pt;

font-weight:bold;

font-style:italic} 

AUTHOR

{font-style:normal}

В этом примере элементы AUTHOR будут отформатированы обычным шрифтом, а не курсивом.

Ниже приведен порядок, в котором браузер обрабатывает правила таблицы стилей:

  • если вы связываете несколько таблиц стилей с документом, использующим инструкцию по обработке xml-stylesheet, браузер обрабатывает таблицы стилей в последовательности, в которой они приведены в инструкции по обработке;
  • если вы импортируете одну или несколько таблиц стилей в другую таблицу стилей с использованием директивы @import (см. раздел «Импорт других таблиц стилей»), браузер обрабатывает импортированные таблицы стилей перед таблицей, в которую они импортируются. Порядок обработки при этом определяется порядком импорта;
  • в таблице стилей правила обрабатываются в том порядке, в котором они записаны.

Примечание. Правило, согласно которому браузер использует последнюю установку свойства, противоположно правилу, применяемому XML-npo-цессором в случае наличия множественных объявлений атрибутов или примитивов. XML-процессор использует первое объявление атрибута или примитива и игнорирует все последующие.

 

Установка свойства display

Свойство display управляет основным способом отображения текста элемента браузером. Вы можете назначить ему три ключевых слова CSS:

  • block. Браузер всегда помещает пустую строку перед и после текста элемента (который включает и текст, принадлежащий любым дочерним элементам). В результате текст элемента отображается в отдельном «блоке» с предшествующим текстом выше и последующим текстом ниже. Присвоение значения block позволяет вам форматировать текст, с применением различных свойств обрамления к блоку текста, таких как поля, рамки и отступы. Элемент block похож на абзац в программе текстового процессора, который отделен пробелами от предшествующего и последующего текста, и для которого можно задавать отступы, рамки и т.д.;
  • inline (по умолчанию). Браузер не вставляет пустую строку перед или nocflf текста элемента (если только предшествующий текст достиг правой границы окна, и браузер должен перенести текст на следующую строку). Он будет вставлять пустые строки внутри текста элемента только с целью уместить текст в окне. Текст элемента, таким образом, может быть размещен в той же строке, что и предыдущий или последующий текст. Элемент inline аналогичен группе символов внутри абзаца в программе текстового процессора;
  • none. Браузер не отображает элемент. Вы можете использовать эту установку для элементов, несущих информацию, которую вы не хотели бы помещать на экране.

Примечание. В спецификации CSS указано, что свойство display не наследуется дочерними элементами. Это так, если вы назначаете установку block для свойства display элемента. Однако элементы вполне эффективно наследуют установку попе, поскольку, когда вы назначаете эту установку свойству display элемента-родителя, вы тем самым скрываете и дочерние элементы. Дочерние элементы элемента inline также будут элементами inline, если для них не установлено свойство display, поскольку inline является значением по умолчанию.

Информация относительно назначения ключевых слов CSS свойствам приведена далее на вставке «Задание ключевых слов CSS в качестве значений».

Предположим, вы используете следующую таблицу стилей для отображения XML-документа, представленного в Листинге 7-2 (напомним, что для изменения таблицы стилей, используемой для отображения XML-документа, вам следует отредактировать инструкцию по обработке xml-stylesheet в документе):

BOOK

{display:block;

margin-top:12pt;

font-size:10pt} 

TITLE

{font-style:italic} 

AUTHOR

{font-weight:bold} 

PAGES

{display:none}

Поскольку свойству display элемента BOOK присвоено значение block, браузер всегда будет помещать пустую строку перед и после текста элемента. (Элемент BOOK имеет содержимое. Его текст состоит из текста, принадлежащего всем дочерним элементам.)

Поскольку таблица стилей не присваивает значения свойству display для элементов TITLE, AUTHOR, BINDING и PRICE (и эти элементы не наследуют значение свойства display от их родительских элементов), браузер воспримет их как элементы inline, что является установкой по умолчанию. Следовательно, браузер не будет помещать пустые строки между: Этими элементами, и — если допустить, что окно браузера имеет достаточную ширину - отобразит их все на одной строке.

Поскольку для свойства display элемента PAGES установлено значение попе, браузер не отобразит этот элемент.

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

 

Задание ключевых слов CSS в качестве значений

Для многих свойств CSS вы можете — или должны - присваивать значение с использованием предопределенных ключевых слов CSS. Спцифические ключевые слова, которые вы можете использовать, определяются особенностью свойства. Например, вы можете назначить свойству display одно из трех ключевых слов: block, inline или попе. Свойству color вы можете назначить одно из 16 ключевых слов, которые описывают основные цвета, такие как red (красный), green (зеленый), yellow (желтый) или fuchsia (фуксия), как в следующем примере:

PARA {colonfuchsia}

Свойству border-style вы можете назначить одно из девяти ключевых слов: solid, dotted, dashed, double, groove, ridge, inset, outset или none. Пример:

SECTION (border-style:solid)

 

Установка свойств шрифта

В стандартной CSS-таблице предусмотрены следующие свойства, определяющие вид шрифта, используемого для отображения текста элемента:

  • font-family;
  • font-size;
  • font-style;
  • font-weight;
  • font-variant.

Все эти свойства наследуются дочерними элементами.

 

Установка свойства font-family

Свойство font-family определяет имя шрифта (гарнитуру), используемого для отображения текста элемента. Например:

BOOK {font-family:Arial}

Вы можете задавать любое имя шрифта по вашему желанию. (Имена шрифтов не являются ключевыми словами CSS.) Если браузер не может найти требуемый шрифт, он заменит его на другой доступный шрифт.

Совет. Если имя шрифта содержит пробелы, заключите название в кавычки, как в следующем примере: BOOK {font-family:"Times New Roman"}.

Вы можете расширить возможность выбора и привести несколько вариантов допустимых к использованию шрифтов в порядке приоритета, разделяя их запятыми. Например:

BOOK (font-family:Arial, Helvetica}

Если шрифт Arial недоступен, браузер использует шрифт Helvetica. Если шрифт Helvetica также недоступен, он заменит его на какой-либо другой имеющийся шрифт.

Вы можете еще больше расширить возможность выбора нужного шрифта, включив в описание ключевое слово CSS - обычно в конце списка -указывающее на общий тип шрифта, который вы хотите использовать. Например:

BOOK {font-family:Arial, Helvetica, sans-serif}

В этом случае, если браузер не найдет шрифтов Arial или Helvetica, он использует какой-либо другой шрифт без засечек (sans-serif).

В следующей таблице приведен перечень ключевых слов, которые вы можете использовать для указания общего типа нужного вам шрифта. В спецификации CSS они носят название имен родовых семейств. Для каждого имени родового семейства в таблице также приведено имя определенного шрифта, принадлежащего к этому семейству, а также образцы отображения текста для указанного семейства. (Конкретные типы шрифта в, которые будет использовать Internet Explorer 5 при отображении текста, зависят от набора шрифтов, которые установлены в Microsoft Windows, поэтому ваши шрифты могут отличаться от представленных в таблице 7.1.)

Таблица 7.1

Ключевое слово имени родового семейства для свойства font-family Пример соответствующего шрифта Образец текста
Serif Times New Roman The Adventures of Huckleberry Finn
.ins-serif Arial The Adventures of Huckleberry Finn
i 'ursive ZapfChancery The Adventures of МисИ&bггу Jinn
Fantasy Cutout THt AbVtrfTWRtS ОГ

НШСКШШУ nrirt

monospace Courier New The Adventures of Huckleberry Finn

Например, если вы присоединили следующую таблицу стилей к XML-документу из Листинга 7-2, Internet Explorer 5 отобразит документ, как показано на следующем рисунке.

BOOK

{display:block;

margin-top:12pt;

font-family:Arial, sans-serif;

font-size:12pt} 

TITLE

{font-style:italic} 

AUTHOR

{font-family:"Times New Roman", serif}

Шрифт Arial, назначенный свойству font-family элемента BOOK, наследуется всеми дочерними элементами, за исключением элемента AUTHOR, для которого задано свое значение свойства font-family ("Times New Roman", serif).

 

Установка свойства font-size

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

  • Значение, задающее размер относительно размера шрифта браузера. Вы можете задать размер шрифта относительно текущего размера шрифта браузера, присвоив свойству font-size одно из значений в виде ключевых слов, представленных в таблице 7.2. Для Internet Explorer 5 значение small заставит браузер использовать текущий выбранный размер шрифта; другие значения масштабируются с увеличением или уменьшением относительно этого размера.

Габлица 7.2

Слючевое слово для font-size: 

Пример правила CSS: 

Описание

xx-small 

TITLE {font-size:xx-small} 

Наименьший размер шрифта, который может задаваться с помощью ключевого слова

Образец текста: The Adventures of HucWebeny Film
Слючевое слово для font-size: 

Пример правила CSS: 

Описание:

x-small 

TITLE {font-size:x-small} 

Приблизительно в 1,5 раза больше, чем xx-small

Образец текста: The Adventures of Huckleberry Finn
Слючевое слово для font-size:

Пример правила CSS: 

Описание:

small TITLE 

{font-size:small} 

Приблизительно в 1,5 раза больше, чем x-small. Это значение предписывает Internet Explorer 5 использовать его текущий размер шрифта

Образец текста: The Adventures of Huckleberry Finn
Слючевое слово для font-size: 

Пример правила CSS: 

Описание:

medium TITLE 

{font-size:medium} 

Приблизительно в 1,5 раза больше, чем small

Образец текста: The Adventures of Huckleberry Firm
Слю'нчше слово для font-size: 

Пример правила CSS: 

Описание:

large TITLE 

{font-size:large} 

Приблизительно в 1,5 раза больше, чем medium

Образец текста The Adventures of Huckleberry Finn
Ключевое слово для font-size: 

Пример правила CSS: 

Описание:

Образец текста:

 

Ключевое слово для font-size: 

Пример правила CSS: Описание: 

Образец текста:

x-large

TITLE {font-size:x-large} 

Приблизительно в 1,5 раза больше, чем large

The Adventures of Huckleberry Finn

xx-large

 

TITLE {font-size:xx-large} 

Приблизительно в 1,5 раза больше, чем x-large

The Adventures of Huckleberry Finn

Примечание. Спецификация CSS рекомендует использовать масштабный коэффициент 1,5. Однако в Internet Explorer 5 реальное соотношение меж-"ду различными значениями размера отличается в меньшей степени. Например, medium в действительности составляет примерно 1,15 от small.

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

Таблица 7.3

Ключевое слово для font-size: 

Пример правила CSS: 

Описание:

smaller TITLE 

{font-size:smal!er}

Размер шрифта, приблизительно на 33 % меньше размера шрифта для родительского элемента (или, для корневого элемента, на 33 % меньше размера шрифта браузера)

Текст: The Adventures of Huckleberry Firm
Ключевое слово для font-size:

Пример правила CSS: 

Описание:

larger TITLE {

font-size:larger} 

Размер шрифта, приблизительно на 50 % больше размера шрифта для родительского элемента (или, для корневого элемента, на 50 % больше размера шрифта браузера)

Текст: The Adventures of Huckleberry Finn

Примечание. Значения 33 % и 50 %, приведенные в таблице, основаны на масштабном коэффициенте 1,5, рекомендованном спецификацией CSS. В действительности результат может оказаться иным.

  • Задание размера в процентах от размера родительского шрифта.Вместо того, чтобы использовать ключевые слова smaller или larger, вы можете задать размер шрифта в процентах относительно текущего размера шрифта родительского элемента с большей степенью точности, задав свойству font-size значение в процентах. Например, следующее правило устанавливает размер шрифта, в полтора раза больше, чем размер шрифта родительского элемента:

TITLE {font-size: 150%}

(Если браузер использует рекомендуемый масштабный коэффициент 1,5, это правило будет эквивалентно правилу TITLE {font-size:larger}.)

Следующее правило устанавливает размер шрифта немного больше, чем установленный предыдущим правилом:

TITLE {font-size:160%}

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

  • Задание численных значений размера. Вы также можете задать размер шрифта для элемента, присвоив свойству font-size абсолютное значение. (См. вставку «Задание значений в размерных единицах» далее в этой главе.) Например, следующее правило устанавливает размер шрифта в 12 пунктов:

TITLE {font-size:12pt}

А это правило устанавливает размер шрифта в два раза больше, чем размер шрифта родительского элемента:

TITLE (font-size:2 em}

 (Этот пример эквивалентен записи TITLE {font-size:200%}.)

 

Задание значений в процентах

Вы можете задавать для определённых свойств значения в процентах. Это необходимо если вы имеете дело с относительными размерами, ;i но г действительными абсолютными размерами.

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

SECTION {line-height:200%}

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

PARAGRAPH {font-size:75%}

Заметим, что если элемент наследует значение свойства в процентах. Наследуется вычисленный результат, но не сама величина в процентах. (Другими словами, если ряд нисходящих элементов наследует значение в процентах, то размер для каждого последующего уровня будет уменьшаться или увеличиваться.) 

 

Задание значений в размерных единицах

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

Абсолютное значение размера определяет точный размер с использованием стандартных единиц измерения, таких как дюймы, пункты или миллиметры. В таблице 7.4 приведен список различных единиц измерения, которыми вы можете пользоваться. Для каждой единицы представлена аббревиатура, которую вы должны применить для указания единиц измерения в правиле. Здесь же даны эквивалентные значения в других единицах измерения.

Таблица 7.4

Аббревиатура* Сантиметры Дюймы Миллиметры Пики Пункты
cm 1 0,3937 10,0 2,3622 28,3465
in 2,54 1 25,4 6 72
mm 0,1 0,0393 1 0,2362 2,8346
pc 0,4233 0,1666 4,2333 1 12
pt 0,0352 0,0138 0,3527 0,0833 1

* cm = сантиметры; in — дюймы; mm = миллиметры; рс = пики; pt = пункты

Например, следующие два правила присваивают абсолютные значения размеров:

STANZA (font-size:12pt} 

PARAGRAPH {margin-top:25in}

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

Таблица 7.5

Единица Размерность единицы
em Высота текущего шрифта элемента
ex Высота строчной буквы х текущего шрифта элемента
px Размер пикселя на мониторе

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

Например, следующее правило Добавляет к элементу отступ сверху.  Высота поля отступа будет равна высоте шрифта элемента:

BOOK (margin-top:1em}

Следующее правило создает верхнее поле высотой 15 пикселей: 

SECTION {margin-top:15px}

А это правило устанавливает высоту шрифта элемента в три четверти от высоты шрифта его родительского элемента:

PARAGRAPH {font-size:.75em}

(Это последнее правило эквивалентно правилу PARAGRAPH {font-size:75%}.)

Заметим, что если дочерний элемент наследует относительное значение, наследуется результат вычисления, а не само относительное значение.

 

Установка свойства font-style

Свойство font-style управляет стилем начертания символов - обычно или курсивным. Вы можете присвоить этому свойству одно из следую щих значений в виде ключевых слов, приведенных в таблице 7.6.

Таблица 7.6

Ключевое слово в font-style: 

Пример правила CSS: Эффект:

italic TITLE {font-styte:rtalic} 

Назначает курсивное начертание для шрифта, если это возможно, в противном случае назначает наклонное начертание

Образец текста: The Adventures of Huckleberry Finn
Ключевое слово в font -style: Пример правила CSS: Эффект: oblique TITLE {font-style: oblique} 

Назначает наклонное начертание шрифта, если это возможно (начертание образуется путем наклона символов обычного шрифта)

Образец текста: The Adventures of Huckleberry Finn.
Ключевое слово в font-style: 

Пример правила CSS: Эффект:

normal TITLE {font-style:normal} 

Назначает обычный (романский) шрифт

Образец текста: The Adventures of Huckleberry Finn

 

Установка свойства font-weight

Свойство font-weight определяет, насколько плотными (т.е. насколько темными и жирными) будут символы элемента. Вы можете присвоить этому свойству одно из следующих значений в виде ключевых слов, приведенных в таблице 7.7.

Таблица 7.7

Ключевое слово в font-weight: 

Пример правила CSS: 

Эффект:

normal 

TITLE {font-weight:normal} 

Отображает текст с нормальной степенью плотности

Образец текста: The Adventures of Huckleberry Finn
Ключевое слово в font-weight 

Пример правила CSS: 

ффект:

bold 

TITLE {font-weight:bold} 

Отображает символы стандартным полужирным начертанием

Образец текста: The Adventures of Huckleberry Finn
Ключевое слово в font-weight. 

Пример правила CSS:

Эффект:

bolder 

TITLE (font-weight: bolder} 

Отображает текст более жирным шрифтом, чем шрифт родительского элемента (или, для корневого элемента, чем шрифт браузера)

Образец текста: The Adventures of Huckleberry Finn
Ключевое слово в font-weight

Пример правила CSS: 

Эффект:

lighter 

TITLE {font-weight:lighter} 

Отображает текст более светлым шрифтом, чем шрифт родительского элемента (или, для корневого элемента, чем шрифт браузера)

Образец текста: The Adventures of Huckleberry Finn
Ключевое слово в font-weight 1

Пример правила CSS: 

Эффект:

100 

TITLE {font-weight: 100} 

Отображает текст с самой малой плотностью, доступной для данного шрифта. Последующие значения, приведенные в таблице (200-900) отображают текст с возрастающей степенью плотности

Образец текст: The Adventures of Huckleberry Finn
Ключевое слоно в font-weight 

Пример правила CSS: 

Образец текста:

200 

TITLE {font-weight:200} 

The Adventures of Huckleberry Finn

Ключевое слово в font-weight 

Пример правила CSS: 

Образец текста:

300 

TITLE {font-weight:300} 

The Adventures of Huckleberry Finn

Ключевое слово в font-weight 

Пример правила CSS: 

Эффект:

400 

TITLE {font-weight:400} 

Эквивалентно присвоению ключевого слова normal

Образец текста: The Adventures of Huckleberry Finn
Ключевое слово в font-weight 

Пример правила CSS: 

Образец текста:

500 

TITLE {font-weight:500} 

The Adventures of Huckleberry Finn

Ключевое слово в font-weight 

Пример правила CSS: 

Образец текста:

600 

TITLE {font-weight:600} 

The Adventures of Huckleberry Finn

Ключевое слово в font-weight 

Пример правила CSS: 

Эффект:

700 

TITLE {font-weight:700}

Эквивалентно присвоению ключевого слова bold

Образец текста: The Adventures of Huckleberry Finn
Ключевое слово в font-weight 

Пример правила CSS: 

Образец текста:

800 TITLE {font-weight:800} The Adventures of Huckleberry Finn
Ключевое слово в font-weight Пример правила CSS: 

Эффект: 

Образец текста:

900 

TITLE {font-weight:900} 

Самое жирное начертание шрифта 

The Adventures of Huckleberry Finn

Возможно, браузер будет не способен отобразить все эти степени плотности. Образцы в правом столбце представляют собой реальный текст, который Internet Explorer 5 отображает в соответствии с установленными значениями свойства font-weight.

 

Установка свойства font-variant

Вы можете использовать свойство font-variant для преобразования всех символов текста в прописные буквы. Назначьте этому свойству одно из ключевых слов, указанных в таблице 7.8.

Таблица 7.8

Ключевое слово в font-variant 

Пример правила CSS: 

Эффект:

small-caps 

TITLE {font-variant:small-caps} 

Преобразует символы текста в прописные

Образец текста: TOE ADVENTURES OF 

HUCKLEBERRY FINN

Ключевое слово в font-variant 

Пример правила CSS: 

Эффект:

normal 

TITLE {font-variant:normal} 

Оставляет оригинальный вид текста с сочетанием строчных и прописных букв (т.е. текст не преобразуется)

Образец текста: The Adventures of Huckleberry Finn

 



Опубликовал admin
14 Авг, Суббота 2004г.



Программирование для чайников.