JavaScript. Подробное руководство, 6-е издание
вернуться

Флэнаган Дэвид
Шрифт:

При работе со свойствами CSS, которые в разных броузерах имеют отличающиеся имена, можно определять для таких свойств классы:

.radius10 {

border-radius: 10рх; /* для текущих броузеров */

– moz-border-radius: 10рх; /* для Firefox 3.x */

– webkit-border-radius: 10рх; /* для Safari 3.2 и 4 */

}

Определив такой класс, можно просто добавить значение «radius10* в атрибут class любого элемента, чтобы дать элементу рамку с закругленными углами.

16.1.5. Пример CSS-таблицы

Пример 16.1 представляет собой HTML-файл, определяющий и использующий таблицу стилей. Он иллюстрирует селекторы, базирующиеся на имени тега, атрибутах class и id, а также содержит встроенный стиль, определяемый атрибутом style. На рис. 16.1 показано, как этот пример отображается в броузере.

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

<head>

<style type="text/css">

/* Указывает, что заголовки отображаются курсивом синего цвета. */

h1, h2 { color: blue; font-style: italic }

/*

* Любой элемент с атрибутом class="WARNING" отображается крупными жирными

* символами, имеет большие поля и желтый фон с жирной красной рамкой.

*/

.WARNING {

font-weight: bold; font-size: 150%;

margin: 0 1in 0 1in; /* сверху справа, снизу слева */

background-color: yellow;

border: solid red 8px;

padding: 10px; /* 10 пикселов со всех 4 сторон */

}

/*

* Текст заголовков hi и h2 внутри элементов с атрибутом class="WARNING"

* должен быть выровнен по центру, в дополнение к выделению синим курсивом.

*/

.WARNING h1, .WARNING h2 { text-align: center }

/*

* Отдельный элемент с атрибутом id="special" отображается

* прописными буквами по центру.

*/

#special {

text-align: center;

text-transform: uppercase;

}

</style>

</head>

<body>

<h1 Демонстрация использования каскадных таблиц стилей</h1>

<div class="WARNING">

<h2>Предупреждение</h2>

Это предупреждение!

Обратите внимание, как оно привлекает внимание жирным шрифтом и яркими цветами. Также обратите внимание, что заголовок выровнен по центру и выделяется синим курсивом.

</div>

<p id="special">

Этот абзац выровнен по центру<br> и выводится прописными буквами.<br>

<span style="text-transform: none">

Здесь мы явно используем встроенный стиль для переопределения прописных букв.

</span>