- •4.2.1. Повторные и опущенные объявления
- •Типы данных
- •3.1.3. Литералы вещественных чисел
- •3.1.6. Специальные числовые значения
- •3.2.2. Управляющие последовательности в строковых литералах
- •3.3. Логические значения
- •3.4.1. Функциональные литералы
- •3.6. Массивы
- •7.6.1. Добавление новых элементов в массив
- •7.7.9. Методы toString() и toLocaleString()
- •7.7.10. Дополнительные методы массивов
- •11.1.2. Классы символов
- •11.1.3. Повторение
- •11.1.4. Альтернативы, группировка и ссылки
- •11.1.6. Флаги
- •1 Здесь функция alert() используется просто для отображения информации: она
- •13.2.2. Сценарии во внешних файлах
- •13.3. Обработчики событий в html
- •13.5.5. Объект Window как контекст исполнения
- •15.2. Свойства объекта Document
- •1 Модель dom может также использоваться для представления xmLдокументов,
- •15.4.2. Узлы
- •15.4.2.1. Типы узлов
- •1 Стандарт dom определяет интерфейсы, а не классы. Те, кто не знаком с термином
- •15.4.2.2. Атрибуты
- •15.5. Обход документа
- •1 Во многих сложных dhtmLэффектах используются также приемы обработки
- •16.1. Обзор css
- •1 Эрик Мейер «css – каскадные таблицы стилей. Подробное руководство», 3е из
- •16.1.1. Применение правил стиля к элементам документа
- •16.2.1. Ключ к dhtml: абсолютное позиционирование
- •16.2.3. Определение положения и размеров элемента
- •16.3.2. Работа со свойствами стилей
- •300 Пикселов:
- •17.1.1.1. Аппаратнозависимые и аппаратнонезависимые события
- •17.1.2. Обработчики событий как атрибуты
- •1 Подробное описание htmLформ, включая пример проверки правильности за
- •17.2.6.3. Интерфейс MouseEvent
- •17.5. События клавиатуры
- •17.5.1. Типы событий клавиатуры
- •17.5. События клавиатуры 441
16.1.1. Применение правил стиля к элементам документа
Атрибуты стиля применяются к элементам документа несколькими способами.
Один из способов состоит в том, чтобы указать их в атрибуте style HTMLтега.
Например, поля отдельного абзаца можно установить так:
<p style="marginleft: 1in; marginright: 1in;">
Одной из главных задач CSSстилей является отделение содержимого и структу
ры документа от его представления. Задание стилей с помощью атрибута style
в отдельных HTMLтегах не способствует решению этой задачи (хотя может
быть полезным приемом DHTMLпрограммирования). Чтобы добиться разделе
ния структуры и представления, применяются таблицы стилей (stylesheets),
объединяющие всю информацию о стилях в одном месте. Таблица CSSстилей
состоит из набора правил стиля. Каждое правило начинается с селектора, задаю
щего элемент или элементы документа, к которым применяется правило; за се
лектором следует набор атрибутов стиля и их значений, заключенный в фигур
ные скобки. Простейший вид правил определяет стиль для одного или несколь
ких конкретных тегов. Например, вот правило, устанавливающее поля и цвет
фона для тега <body>:
body { marginleft: 30px; marginright: 15px; backgroundcolor: #ffffff }
textindent length | percentage
texttransform capitalize | uppercase | lowercase | none
top length | percentage | auto
unicodebidi normal | embed | bidioverride
verticalalign baseline | sub | super | top | texttop | middle | bottom | textbottom
| percentage | length
visibility visible | hidden | collapse
whitespace normal | pre | nowrap | prewrap | preline
width length | percentage | auto
wordspacing normal | length
zindex auto | integer
Имя Значение366 Глава 16. CSS и DHTML
Следующее правило определяет, что текст внутри заголовков <h1> и <h2> должен
быть выровнен по центру:
h1, h2 { textalign: center; }
Обратите внимание на использование в примере запятой для разделения имен
тегов, к которым должны применяться стили. Если запятая отсутствует, селек
тор задает контекстное правило, применяемое только в том случае, если один тег
вложен в другой. Например, следующие правила указывают, что теги <block
quote> выводятся курсивом, но текст внутри тега <i>, находящегося внутри
<blockquote>, должен выводиться прямым шрифтом:
blockquote { fontstyle: italic; }
blockquote i { fontstyle: normal; }
Другой тип правил в таблице стилей задает классы элементов, к которым долж
ны применяться стили, и селектор в этом случае иной. Класс элемента определя
ется атрибутом class HTMLтега. Например, следующее правило указывает, что
любой тег с атрибутом class="attention" должен отображаться шрифтом полу
жирного начертания:
.attention { fontweight: bold; }
Селекторы классов могут объединяться с селекторами имен тегов. Следующее
правило указывает, что если в теге <p> есть атрибут class="attention", тег должен
отображаться красным цветом (помимо полужирного начертания, как определе
но предыдущим правилом):
p.attention { color: red; }
И наконец, таблицы стилей содержат правила, применяемые к отдельным эле
ментам, имеющим заданное значение атрибута id. Следующее правило указыва
ет, что элемент с атрибутом id, равным p1, не должен отображаться:
#p1 { visibility: hidden; }
Мы встречали атрибут id раньше: он применяется с DOMфункцией getElement
ById() для получения отдельных элементов документа. Как можно предполо
жить, этот вид правил в таблице стилей может с успехом использоваться для
управления стилем отдельного элемента. При наличии такого правила сценарий
может менять значение атрибута visibility со значения hidden (скрытый) на
visible (видимый), вызывая динамическое появление элемента. Как это делает
ся, показано в этой главе далее.
Стандарт CSS определяет еще целый ряд других селекторов, помимо тех, что бы
ли продемонстрированы здесь, и некоторые из них поддерживаются современ
ными броузерами. За дополнительной информацией обращайтесь к специфика
ции CSS или к справочным руководствам.
16.1.2. Связывание таблиц стилей с документами
Таблицу стилей можно внедрить в HTMLдокумент, поместив ее между тегами
<style> и </style> в заголовке документа, или сохранить в собственном файле, со
славшись на файл из HTMLдокумента с помощью тега <link>. Например:16.1. Обзор CSS 367
<html>
<head><title>Тестовый документ</title>
<style type="text/css">
body { marginleft: 30px; marginright: 15px; backgroundcolor: #ffffff }
p { fontsize: 24px; }
</style>
</head>
<body><p>Проверка, проверка и еще раз проверка</p></body>
</html>
Если таблица стилей используется более чем одним документом на вебсайте,
лучше хранить ее в виде отдельного файла без охватывающих HTMLтегов. Этот
CSSфайл может быть подключен к HTMLстранице. Однако в отличие от тега
<script>, тег <style> не имеет атрибута src. Поэтому, чтобы подключить таблицу
стилей к HTMLдокументу, необходимо воспользоваться тегом <link>:
<html>
<head><title>Тестовый документ</title>
<link rel="stylesheet" href="mystyles.css" type="text/css">
</head>
<body><p>Проверка, проверка и еще раз проверка</p></body>
</html>
Тег <link> может использоваться для задания альтернативной таблицы стилей.
Некоторые броузеры (такие как Firefox) позволяют выбирать из имеющихся
альтернатив (в меню с помощью пункта Вид>Стиль страницы). Например, вы могли
бы предусмотреть альтернативную таблицу стилей для посетителей сайта, кото
рые предпочитают крупный шрифт и высококонтрастное цветовое оформление:
<link rel="alternate stylesheet" href="largetype.css" type="text/css"
title="Крупный шрифт"> <! заголовок отображается в меню >
Если к вебстранице с помощью тега <style> подключается особенная таблица
стилей, то чтобы включить в эту таблицу общий CSSфайл, можно воспользо
ваться CSSдирективой @import:
<html>
<head><title>Тестовый документ</title>
<style type="text/css">
@import "mystyles.css"; /* импорт общей таблицы стилей */
p { fontsize: 48px; } /* переопределение импортированных стилей */
</style>
</head>
<body><p>Проверка, проверка и еще раз проверка</p></body>
</html>