Перейти на главную страничку сайта (список статей, файлы для скачивания)

ФОРУМ (здесь можно обсудить эту статью, а также любые проблемы программирования на различных макроязыках и в скриптовых средах)

Синтаксис и основные понятия языка CSS, отображение XML-документов в Web

Таблицы каскадных стилей

Язык CSS в настоящее время широко используется для отображения HTML-страниц, и с неменьшим успехом может быть использован для отображения XML-документов. Создание таблицы каскадных стилей и связывание её с вашим XML-документом - это один из способов сообщить браузеру, как отображать каждый из элементов XML-документа. XML-документ со связанной таблицей каскадных стилей может быть открыт непосредственно в Internet Explorer. Таблица каскадных стилей представляет собой текстовый файл с расширением .css, который содержит инструкции для форматирования элементов в XML-документе. Простейший пример отображения XML-документа с помощью таблицы каскадных стилей приведён в статье "Синтаксис и основные понятия языка XML, создание валидных документов".

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

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

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

PRODUCT
    {display:block;
    font-style:italic}

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

Таблица стилей может иметь комментарии, которые начинаются с символов /* и заканчиваются символами */. Вы можете использовать комментарии в процессе разработки таблицы стилей, чтобы временно отключить правило или его часть.

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

Набор свойств, который вы присвоили определённому элементу, действует на все дочерние элементы, вложенные в него. Следующие свойства, однако, являются исключениями и не наследуются дочерними элементами:

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

Вы можете применить одно правило к нескольким элементам, включив все имена элементов в селектор и отделив имена запятыми. Например:

PRODUCT, TITLE, PRICE
    {display:block;
    font-style:italic}

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

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

<MAPS>
     <CITY>
          <NAME> Santa Fe </NAME>
          <STATE> New Mexico </STATE>
     </CITY>
     <STATE> California </PRODUCT>
</MAPS>

можно применить такую таблицу каскадных стилей:

CITY STATE
    {font-style:italic}
STATE
    {font-style:normal}
Селектор CITY STATE является более конкретным, и следовательно, имеет приоритет.

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

<STATE STYLE='font-style:normal; font-size:14pt'> New Mexico </STATE>

Для валидных документов вам необходимо объявить атрибут STYLE в DTD, например:

<!ATTLIST STATE STYLE CDATA #IMPLIED>

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

@import url(ТаблСтил);

Здесь "ТаблСтил" - полный или относительный URL файла, содержащего таблицу каскадных стилей, которую вы хотите импортировать. Директива @import должна располагаться в начале таблицы стилей перед правилами. Вы можете поместить несколько директив @import. Основная таблица стилей (файл, в который осуществляется импорт) имеет приоритет перед импортируемыми таблицами стилей. Если директив @import несколько, приоритет имеют более "поздние" таблицы стилей.

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

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

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

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

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

  1. Значение свойства, заданное в атрибуте STYLE конкретного элемента XML-документа.
  2. Значение свойства, заданное в правиле CSS с контекстуальным селектором.
  3. Значение свойства, заданное в правиле CSS с родовым селектором.
  4. Значение свойства, заданное в правиле CSS для ближайшего элемента-предка (для ненаследуемого свойства браузер будет использовать значение по умолчанию).
  5. Значение свойства по умолчанию, либо значение, заданное пользователем браузера.

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

В Internet Explorer пользователь может присвоить установке свойств в браузере наивысший приоритет (приоритет перед установкой свойств в таблице стилей), выбрав соответствующие опции в меню "Сервис" - "Свойства обозревателя", вкладка "Общие", кнопка "Оформление".

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

Способы установки значений свойств

Для многих свойств CSS вы должны присваивать значение с использованием предопределённых ключевых слов CSS, например:

PRODUCT {color:fuchsia}

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

PRODUCT {font-size:75%}

Задание значений свойств в размерных единицах:



cminmmpcpt
cm10.3937102.362228.3465
in2.54125.4672
mm0.10.039310.23622.8346
pc0.42330.16664.2333112
pt0.03520.01380.35270.08331

Пример задания значения свойства в размерных единицах:

PRODUCT {font-size:12pt}

Значение какого-либо свойства можно задавать в относительных размерных единицах:

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

PRODUCT {margin-top:1em}

Значения цветов можно задавать с использованием четырёх форматов:

PRODUCT {color:red}
PRODUCT {color:rgb(255,0,0)}
PRODUCT {color:#FF0000}
PRODUCT {color:rgb(100%,0%,0%)}

Последние три формата задают цвет путём установки относительной интенсивности компонентов красного, зелёного и синего в составе цвета (именно в таком порядке). Таблица соответствия способов задания цвета:

красныйredrgb(255,0,0)#FF0000rgb(100%,0%,0%)
коричневыйmaroonrgb(128,0,0)#800000rgb(50%,0%,0%)
светло-зелёныйlimergb(0,255,0)#00FF00rgb(0%,100%,0%)
зелёныйgreenrgb(0,128,0)#008000rgb(0%,50%,0%)
голубойbluergb(0,0,255)#0000FFrgb(0%,0%,100%)
тёмно-синийnavyrgb(0,0,128)#000080rgb(0%,0%,50%)
светло-жёлтыйyellowrgb(255,255,0)#FFFF00rgb(100%,100%,0%)
тёмно-жёлтыйolivergb(128,128,0)#808000rgb(50%,50%,0%)
светло-голубойaquargb(0,255,255)#00FFFFrgb(0%,100%,100%)
тёмно-голубойtealrgb(0,128,128)#008080rgb(0%,50%,50%)
светло-фиолетовыйfuchsiargb(255,0,255)#FF00FFrgb(100%,0%,100%)
тёмно-фиолетовыйpurplergb(128,0,128)#800080rgb(50%,0%,50%)
белыйwhitergb(255,255,255)#FFFFFFrgb(100%,100%,100%)
чёрныйblackrgb(0,0,0)#000000rgb(0%,0%,0%)
светло-серыйsilverrgb(192,192,192)#C0C0C0rgb(75%,75%,75%)
тёмно-серыйgrayrgb(128,128,128)#808080rgb(50%,50%,50%)

Описание свойств

СвойствоОписание
display Устанавливает способ отображения элемента. Не наследуется дочерними элементами, кроме установки "none". Возможные значения:
  • block - перед и после текста элемента помещается пустая строка (похоже на абзац).
  • inline (по умолчанию) - текст элемента может быть размещён в той же строке, что и предыдущий или последующий текст.
  • none - элемент не отображается.
font-family Определяет имя шрифта (гарнитуру). Если браузер не сможет найти требуемый шрифт, он заменит его на похожий. Если имя шрифта содержит пробелы, заключите его в кавычки:

PRODUCT {font-family:"Times New Roman"}

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

PRODUCT {font-family:Arial, Helvetica}

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

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

Перечень родовых семейств шрифтов:

SerifTimes New Roman
sans-serifArial
CursiveZapfChancery
FantasyCutout
monospaceCourier New
font-size Устанавливает высоту шрифта. Возможные способы задания значения:
  • Относительно текущего размера шрифта браузера: xx-small, x-small, small (текущий размер шрифта браузера), medium, large, x-large, xx-large.
  • Относительно размера шрифта родительского элемента: smaller, larger.
  • В процентах от размера шрифта родительского элемента.
  • Численное значение размера в (относительных) размерных единицах.
font-style Управляет стилем начертания символов - обычный или курсив. Возможные значения:
  • italic - курсив
  • oblique - наклонное начертание, если это возможно (путём наклона символов обычного шрифта)
  • normal - обычный (романский) шрифт
font-weight Определяет, насколько жирными будут символы. Возможные значения:
  • normal - обычный текст
  • bold - полужирный
  • bolder - жирнее, чем в родительком элементе
  • lighter - светлее, чем в родительском элементе
  • 100
  • 200
  • 300
  • 400 - эквивалентно normal
  • 500
  • 600
  • 700 - эквивалентно bold
  • 800
  • 900
font-variant Для преобразования всех символов текста в прописные буквы. Возможные значения:
  • normal - текст не преобразуется
  • small-caps - прописные
font В одном свойстве font можно указать несколько параметров шрифта. Во избежание проблем указывайте значения свойств в следующем порядке: font-style, font-weight, font-variant, font-size, font-family. Значения свойств можно пропускать. Пример:

PRODUCT {font:italic bold small-caps 35pt Fantasy}
colorУстанавливает цвет текста.
background-color Устанавливает цвет фона (заливку). Если задано "transparent", будет виден фон родительского элемента (или браузера).
background-image Вы можете добавить элементу фоновый рисунок, назначив этому свойству URL файла с рисунком:

PRODUCT {background-image:url(Picture.bmp)}

Рисунок повторяется, заполняя всю область элемента. Любая часть изображения, выступающая за пределы элемента, обрезается. Установка свойства в none приведёт к тому, что будет виден фон родительского элемента (или браузера). Если одновременно используется свойство background-color, рисунок будет располагаться поверх заливки.
background-repeat Если свойству background-image назначен файл рисунка, можно управлять повторами изображения, назначив свойству background-repeat одно из следующих ключевых слов:
  • repeat (по умолчанию) - повторяет изображение.
  • repeat-x - повторяет изображение только в горизонтальном направлении.
  • repeat-y - повторяет изображение только в вертикальном направлении.
  • no-repeat - приводит к однократному отображению рисунка.
background-position Если свойству background-image назначен файл рисунка, по умолчанию верхний левый угол фонового изображения совмещается с верхним левым углом элемента. Можно изменить такое совмещение, назначив свойству background-position значение одним из следующих способов:
  • Значения горизонтальной и вертикальной позиции в единицах размеров. Первое значение определяет горизонтальную позицию изображения внутри элемента, второе - вертикальную. Можно использовать любой тип численного значения размера. Пример:

    PRODUCT {background-position:.5in .25in}

  • Значения горизонтальной и вертикальной позиции в процентах. Пример:

    PRODUCT {background-position:50% 50%}

  • Значения в виде одного или двух ключевых слов: left, right, center, top, bottom. Порядок ключевых слов не имеет значения. Пример:

    PRODUCT {background-position:right bottom}
background Позволяет задать несколько свойств фона сразу. Пример:

PRODUCT {background:url(pict.gif) no-repeat 70%}
letter-spacing Позволяет увеличить или уменьшить просвет между символами в тексте элемента. Для увеличения просвета следует присвоить свойству положительное значение в размерных единицах, для уменьшения - отрицательное. Значение normal обеспечивает обычную величину просвета. Пример:

PRODUCT {letter-spacing:-.5pt}
vertical-align Служит для создания верхних или нижних индексов. Оказывает действие только на элементы inline. Дочерние элементы не наследуют это свойство. Возможные значения:
  • baseline (по умолчанию) - совмещает базовую линию текста элемента с базовой линией текста родительского элемента
  • sub - нижний индекс
  • super - верхний индекс
text-align Служит для управления горизонтальным выравниванием текста элемента. Работает только для элементов block и воздействует на дочерние элементы, причём уже независимо от того, относятся ли они к типу block или inline. Возможные значения: left, right, center.
text-indent Позволяет задать отступ для первой строки текста элемента. Может задаваться в любых размерных единицах или процентах от полной ширины текста элемента. Отрицательное значение обеспечивает "выступ" первой строки. В случае с "выступом" может потребоваться установить для элемента левое поле с помощью свойства margin-left для того, чтобы строка была видна полностью.
line-height Служит для задания междустрочного интервала (разбивки строк по вертикали). Может получать значение в любых размерных единицах или в процентах от высоты текста элемента.
text-transform Служит для управления стилем прописных букв текста элемента. Возможные значения:
  • capitalize - превращает все первые буквы слов в прописные
  • uppercase - превращает в прописные все буквы
  • lowercase - отображает все буквы строчными
  • none - отображает текст без изменения стиля прописных букв
text-decoration Служит для рисования линий внутри текста элемента. Возможные значения:
  • underline - рисует линию под текстом
  • overline - рисует линию над текстом
  • line-through - рисует линию, перечёркивающую текст
  • none - отображает текст без линий
Вы можете применить более одного типа линий:

PRODUCT {text-decoration:underline overline}
Группы свойств текстовых областей: margin, border, padding, height, width, float и clear. Три группы свойств margin, border и padding наиболее предсказуемо работают с элементами типа block. В некоторых версиях браузеров данные свойства могут не работать с элементами типа inline.
margin Эта группа свойств служит для добавления полей с одной или нескольких сторон элемента. Для свойств margin-left, margin-right, margin-top и margin-bottom может быть задано значение в любых размерных единицах или в процентах от ширины родительского элемента. Зона полей всегда прозрачна, т.е. через неё видна фоновая заливка или фоновый рисунок родительского элемента или браузера. Вы можете назначить одинаковые величины полей по всем четырём сторонам элемента путём присвоения одного значения в размерных единицах или процентах свойству margin. Два значения будут интерпретированы как верхнее и нижнее поля. Четыре значения будут интерпретированы как верхнее, правое, нижнее и левое поля. Пример:

PRODUCT {margin:10mm 0mm 5mm 30mm}
border-style Служит для добавления видимого обрамления с одной или нескольких сторон элемента, а также для установки стиля рамки. Возможные значения:
  • solid - такое обрамление


  • dotted - такое обрамление (только в Internet Explorer)


  • dashed - такое обрамление (только в Internet Explorer)


  • double - такое обрамление


  • groove - такое обрамление


  • ridge - такое обрамление


  • inset - такое обрамление


  • outset - такое обрамление


  • none - без обрамления
Вы можете использовать различные рамки с каждой стороны элемента, назначая несколько ключевых слов свойству border-style. Порядок значений соответствует рамкам сверху, справа, снизу и слева. Пример:

PRODUCT {border-style:solid none solid none}
border-width Если вы установили видимые линии рамки с одной или нескольких сторон элемента с помощью свойства border-style, вы можете изменить толщину рамки путём задания свойства border-width. Можно задавать значение в размерных единицах или с помощью ключевых слов:
  • thin - такое обрамление


  • medium - такое обрамление


  • thick - такое обрамление


Вы можете использовать различные рамки с каждой стороны элемента, назначая несколько значений свойству border-width. Порядок значений соответствует рамкам сверху, справа, снизу и слева. Пример:

PRODUCT {border-style:solid; border-width:1px thick 1px thick}
border-color По умолчанию рамки, которые созданы с помощью свойства border-style, имеют тот же цвет, что и цвет, установленный для свойства color элемента. Вы можете менять этот цвет для рамки путём присвоения свойству border-color любого допустимого значения цвета. Кроме того, вы можете задавать различный цвет для каждой из границ рамки, присваивая четыре различных значения свойству border-color:

PRODUCT {border-style:solid; border-color:red green red green}
padding Свойства просвета (padding-top, padding-right, padding-bottom и padding-left) добавляют пространство непосредственно вокруг содержимого элемента внутри имеющейся вокруг элемента рамки. Добавление просвета может улучшить восприятие рамки. По умолчанию ширина просвета устанавливается близкой к нулю. Для свойств просвета вы можете устанавливать значения в любых размерных единицах или в процентах относительно ширины родительского элемента. Вы можете добавить просвет одинаковой ширины со всех сторон элемента, присвоив единственное значение в размерных единицах или в процентах свойству padding. Пример:

PRODUCT {padding:2em}

Для просвета отображается любой фон в виде заливки или рисунков, которые назначены для элемента. (В отличие от области полей, для которой отображается фон родительского элемента.)
width
height		 Эти свойства управляют размерами зоны содержимого элемента плюс областями, занимаемыми просветом и обрамлением. Этим свойствам могут быть заданы следующие типы значений:
  • Любые значения в размерных единицах.
  • Значение в процентах от ширины или высоты родительского элемента.
  • Ключевое слово auto (по умолчанию).
Если текст не помещается в зону содержимого по вертикали вследствие недостаточно большого значения, установленного для свойства height, браузер увеличит значение для height автоматически, как если бы вы установили для свойства height значение auto.
float Позволяет отобразить содержимое элемента типа block слева или справа от следующего за элементом текста. Возможные значения:
  • left - слева от последующего текста
  • right - справа от последующего текста
  • none (по умолчанию) - отключает обтекание
clear Влияет на обтекание элемента текстом. Возможные значения:
  • left - элемент будет отображён ниже (а не рядом) относительно предшествующего обтекаемого элемента, для которого установлено свойство float:left
  • right - элемент будет отображён ниже (а не рядом) относительно предшествующего обтекаемого элемента, для которого установлено свойство float:right
  • both - элемент будет отображён ниже (а не рядом) относительно предшествующего обтекаемого элемента, для которого установлено свойство float:left или float:right
  • none (по умолчанию) - элемент будет отображён рядом c предшествующим обтекаемым элементом
first-letter
first-line		 Только для Internet Explorer. Вы можете создать правило, которое применяется только в первой букве элемента типа block с помощью добавления указателя first-letter к имени элемента в селекторе. Аналогично для первой строки элемента - с помощью добавления указателя first-line. Подобные выражения создают так называемый "псевдо-элемент" - правило применяется к фрагменту текста, который на самом деле не является отдельным элементом. Примеры:

PRODUCT:first-letter {font-size:large}
PRODUCT:first-line {font-size:large}
cursor Задаёт форму курсора при его наведении на элемент. Возможные значения: default, wait, ne-resize, sw-resize, se-resize, nw-resize, n-resize, e-resize, s-resize, w-resize, text, help, hand, move, crosshair.

Вставка элементов HTML в XML-документ

Когда вы отображаете XML-документ с помощью присоединённой таблицы стилей, вы можете вставить в него любой стандартный элемент HTML и заставить браузер отобразить его.

Язык XML позволяет использовать пространства имён. Два разных типа элемента могут иметь одно и то же имя, если они принадлежат разным пространствам имён. Пространство имён объявляется следующим образом:

<my-namespace:MY-ELEMENT xmlns:my-namespace='http://my_domain.com'>
    content
</my-namespace:MY-ELEMENT>

Элемент с именем "my-namespace:MY-ELEMENT" и элемент с именем "MY-ELEMENT" могут существовать в одном и том же XML-документе и считаются элементами различных типов, т.к. элемент "my-namespace:MY-ELEMENT" принадлежит к пространству имён "my-namespace", а элемент "MY-ELEMENT" по умолчанию принадлежит к пространству имён документа.

Если имя XML-элемента совпадает с именем стандартного HTML-элемента (например, IMG, A или HR) и если он принадлежит пространству имён "html", Internet Explorer интерпретирует и отобразит его как HTML-элемент. В любом другом случае Internet Explorer интерпретирует его как обычный XML-элемент. Пространство имён "html" является специальным зарезервированным пространством имён, которое объявляется следующим образом:

xmlns:html='http://www.w3c.org/TR/REC-html40/'

Вот пример XML-элемента, который указывает Internet Explorer вставить HTML-элемент IMG:

<html:IMG xmlns:html='http://www.w3c.org/TR/REC-html40/' src='pict.bmp' />

Это корректно сформированный пустой XML-элемент. Его имя включает указание пространства имён, и он имеет два атрибута. Первый атрибут объявляет пространство имён, а второй атрибут является стандартным HTML-атрибутом.

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

Людоговский Александр

Перейти на главную страничку сайта (список статей, файлы для скачивания)

© 2007 http://www.script-coding.com При любом использовании материалов сайта обязательна ссылка на него как на источник информации, а также сохранение целостности и авторства материалов.