Статическое содержимое
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;
}
Листинг
3.3.
Примеры стилей границ в Mozilla
С помощью первого расширения мы получим скругление углов, но граница должна быть сплошного цвета. При этом поддерживаются некоторые стили границ из CSS 2 (например, double ), но не все. Второе расширение позволяет раскрашивать границы в разные цвета. В этом случае граница рисуется как несколько концентрических линий шириной в один пиксел. Каждая линия рисуется своим цветом, цвета берутся из заданного списка. Рисование начинается с внешнего края границы. Если список заканчивается, последний цвет из него используется для закрашивания оставшейся части границы. Попытки использовать для многоцветной границы скругление приведут к тому, что углы будут выглядеть обрезанными, а не скругленными. На рисунке 3.4 показаны результаты применения этих стилей.
Используя эти расширения, можно получить "зубчатые", неодинаковые углы границ, но это следствие плохого кода на XUL, а не фундаментальная ошибка в Mozilla.
Некоторые из этих стилей также применимы к контурам из CSS 2. Поддержка контуров в Mozilla описывается в "Формы и меню" , "Формы и меню".
Mozilla также содержит расширения стилей для изображений. Свойство list-style-image, упоминавшееся ранее, - не расширение, а стандартное свойство CSS 2. Список расширений приведен в таблице 3.2.
Помимо упомянутых выше расширений существуют и такие, которые могут применяться практически ко всем тегам, а не только к определяющим конкретное содержимое или особую разметку. Они перечислены в таблице 3.3.
| Свойство | Значение | Описание |
|---|---|---|
| Любое свойство | -moz-initial | Установить в качестве значения этого свойство то, которое использовалось бы по умолчанию, если бы не было наследования |
| Большинство свойств | inherit | То же, что и в HTML/XHTML |
| Любое свойство шрифта | Системные шрифты | См. раздел "Альтернатива: таблицы стилей" "Окна и панели" , "Окна и панели". |
| Любое свойство цвета | Системные цвета | См. раздел "Альтернатива: таблицы стилей" "Окна и панели" , "Окна и панели". |
| -moz-binding | none или url() | Использовать для тега указанную связь XBL. См. лекцию про XBL |
| -moz-opacity | От 0.0 до 1.0 | Сделать содержимое полупрозрачным - то же, что и альфа-канал. |
Обратите внимание, что XUL не поддерживает стиль CSS 2 text-decoration. С его помощью можно зачеркивать или подчеркивать текст.
На момент написания этого курса стандарт CSS 3 еще находился в стадии разработки, и в Mozilla реализована только частичная его поддержка. В CSS 3 будет включена модель границ блока из Internet Explorer 6.0. Вероятнее всего, Mozilla будет ее поддерживать, но пока этого нет.