Статическое содержимое

3.4. Альтернатива: таблицы стилей

Основные расширения для оформления в Mozilla относятся к модели представления документа в виде блоков из CSS 2. Эта модель описывает, как блоку с содержимым можно присвоить прямоугольную границу. К этой границе уже можно применить простые стили линий. Mozilla поддерживает границы ,принятые в CSS 2, однако некоторые стили для них не работают.

Расширения Mozilla позволяют создавать даже еще более интересные границы. У границ могут быть не только прямые углы, и они бывают разных цветов. Границы вдоль длины блока могут быть прозрачными. В таблице 3.1 перечислены эти расширения.

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

#box1 {
  border:solid thick;
  border-width:20px; margin:20px; padding:20px;
  border-color:gray;
  -moz-border-radius-topright: 20px;
  -moz-border-radius-bottomright: 40px;
}
#box2 {
  border:solid thick;
  border-width:20px; margin:20px; padding:20px;
  border-top-color : gray;
  -moz-border-right-colors :
  #000000 #101010 #202020 #303030
  #404040 #505050 #606060 #707070
  #808080 #909090 #A0A0A0 #B0B0B0
  #C0C0C0 #D0D0D0 transparent #000000;
  -moz-border-bottom-colors :
  #000000 #101010 #202020 #303030
  #404040 #505050 #606060 #707070
  #808080 #909090 #A0A0A0 #B0B0B0
  #C0C0C0 #D0D0D0 transparent #000000;
}

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

Используя эти расширения, можно получить "зубчатые", неодинаковые углы границ, но это следствие плохого кода на XUL, а не фундаментальная ошибка в Mozilla.

Некоторые из этих стилей также применимы к контурам из CSS 2. Поддержка контуров в Mozilla описывается в "Формы и меню" , "Формы и меню".

Mozilla также содержит расширения стилей для изображений. Свойство list-style-image, упоминавшееся ранее, - не расширение, а стандартное свойство CSS 2. Список расширений приведен в таблице 3.2.

Рис. 3.4. Пример собственных стилей Mozilla.

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

Обратите внимание, что XUL не поддерживает стиль CSS 2 text-decoration. С его помощью можно зачеркивать или подчеркивать текст.

На момент написания этого курса стандарт CSS 3 еще находился в стадии разработки, и в Mozilla реализована только частичная его поддержка. В CSS 3 будет включена модель границ блока из Internet Explorer 6.0. Вероятнее всего, Mozilla будет ее поддерживать, но пока этого нет.