
- •1. Общие сведения
- •Структура html-документа и элементы разметки заголовка документа
- •Назначение заголовка
- •Отображение содержания элемента title
- •Основные контейнеры заголовка
- •Элемент разметки head
- •Элемент разметки title
- •Элемент разметки base
- •Элемент разметки isindex
- •Применение элемента isindex
- •Применение атрибута prompt
- •Элемент разметки meta
- •Элемент разметки link
- •Элемент разметки style
- •Элемент разметки script
- •Контейнеры тела документа Теги тела документа
- •Тело документа – контейнер body
- •Теги управления разметкой Заголовки
- •Атрибут аlign
- •Теги управления отображением символов
- •Теги, управляющие формой отображения
- •Верхние и нижние индексы
- •Атрибут sizе
- •Атрибут соlоr
- •Создание списков в html
- •Атрибуты маркеров в ненумерованном списке
- •Комментарии в языке html
- •Гипертекстовые ссылки
- •Графика Использование графики в html
- •Атрибуты и их аргументы
- •Атрибут src
- •Атрибут alt
- •Атрибут аlign
- •Атрибут usemap
- •Средства описания таблиц в html
- •Создание таблиц в html
- •Атрибут nowrap
- •Атрибут соlspan
- •Атрибут rowspan
- •Атрибут widтн
- •Применение пустых ячеек
- •Атрибут сеllраdding
- •Атрибуты аlign и valign
- •Атрибут border
- •Атрибут cellspacing
- •Атрибут bgcolor
- •Атрибут background
- •Использование таблиц в дизайне страницы
- •Создание разноцветных таблиц
- •Html-формы
- •Задание формы — элемент form
- •Атрибут cols
- •Как работают фреймы
- •Создание простой страницы с фреймами
- •Задание фреймовой структуры
- •Подготовка содержимого фрейма
- •Подготовка фрейма main
- •Списки Definition: элементы dl, dt и dd
- •Визуальное представление списков
- •Элементы dir и menu
- •Гиперссылки Гиперссылки и якоря. Введение
- •"Посещение" связанного ресурса
- •Другие соотношения гиперссылок
- •Спецификация якорей и гиперссылок
- •Заголовки гиперссылок
- •Интернационализация и гиперссылки
- •Синтаксис имён якорей
- •Вложение ссылок не допускается
- •Якоря с атрибутом id
- •Недоступные и неидентифицируемые ресурсы
- •Взаимосвязи документов: элемент link
- •Гиперссылки вперёд и назад
- •Гиперссылки и внешние таблицы стилей
- •Гиперссылки и машины поиска
- •Информация пути: элемент base
- •Добавление стиля в html
- •Установка языка по умолчанию для таблиц стилей
- •Инлайн-стиль (внедрённый)
- •Информация о стиле в заголовках: элемент style
- •Типы носителя
- •Внешние таблицы стилей
- •Основные и альтернативные таблицы стилей
- •Спецификация внешней таблицы стилей
- •Каскадные таблицы стилей
- •Media-зависимые каскады
- •Наследование и каскадирование
- •Скрытие данных стиля от пользовательских агентов (па)
- •Ссылки на таблицы стилей в заголовках http
- •Выравнивание, стили шрифта и горизонтальные линии Форматирование Цвет фона
- •Выравнивание
- •Плавающие объекты
- •"Всплывание" объекта
- •Обтекание текста вокруг объекта
- •Элементы стиля шрифта: tt, I, b, big, small, strike, s и u
- •Элементы модификатора шрифта: font и basefont
- •Сценарии (скрипты) Введение
- •Дизайн документов для па, поддерживающих скрипты
- •Элемент script
- •Установка языка скриптов
- •Язык сценариев по умолчанию
- •Локальное объявление языка скриптов
- •Ссылки на элементы html из скрипта
- •Динамическое изменение документов
- •Дизайн документов для па, не поддерживающих сценарии
- •Элемент noscript
- •Скрытие данных скрипта от па
- •Дополнительные возможности html Компоновка документа в html
- •Компоновка html - использование таблиц
- •Использование стилей в html
- •Как использовать стили
- •Внешняя таблица стилей
- •Внутренняя таблица стилей
- •Встроенные стили
- •Раздел заголовка html
- •Элемент head
- •Универсальные указатели ресурсов в html Ссылки в html
- •Универсальные указатели ресурсов
- •Схемы обращения к ресурсу url
- •Сценарии в html
- •Добавление сценария на страницу html
- •Как работать со старыми браузерами
- •Стандартные атрибуты html 4.0
- •Атрибуты событий клавиатуры
- •Атрибуты событий мыши
- •Вы изучили html, что дальше? Краткое заключение
- •Теперь вы знаете html, что дальше?
- •Каскадные таблицы стилей (css)
Media-зависимые каскады
Каскад может включать таблицы стилей, применяемые для разных типов носителя. И LINK, и STYLE могут использоваться с атрибутом media. ПА в этом случае отвечает за фильтрацию тех таблиц, которые не применяются для текущего носителя.
В следующем примере мы определяем каскад, где таблица "corporate" даётся в нескольких версиях: одна для печати, другая для экрана и третья для речевых браузеров (используемая, как говорят, при чтении email в автомобиле). Таблица "techreport" применима ко всем носителям.
Правило цвета, определённое элементом STYLE, используется для печати и экрана, но не для речевого представления.
<LINK rel="stylesheet" media="aural" href="corporate-aural.css" type="text/css">
<LINK rel="stylesheet" media="screen" href="corporate-screen.css" type="text/css">
<LINK rel="stylesheet" media="print" href="corporate-print.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE media="screen, print" type="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
Наследование и каскадирование
Если ПА хочет отобразить документ, ему нужно найти значения для свойств стиля, например, семейство шрифтов, стиль шрифта, размер, высота строки, цвет текста и так далее. Точный механизм зависит от языка таблиц стилей, но следующее описание в целом применимо:
Механизм каскадирования применяется, если несколько правил стиля применяются непосредственно к элементу. Этот механизм позволяет ПА сортировать правила по специфике, чтобы определить, какое правило применить. Если не найдено ни одного правила, следующий шаг зависит от того, может или нет наследоваться это свойство стиля. Не все свойства могут наследоваться. Для этих свойств язык таблиц стиля предоставляет значения по умолчанию для того, чтобы использовать их при отсутствии явных правил для конкретного элемента.
Если свойство может наследоваться, ПА проверяет непосредственно включаемые элементы, чтобы убедиться, применимо ли к ним правило. Этот процесс продолжается до тех пор, пока ПА находит применимые правила. Этот механизм позволяет компактно специфицировать таблицы стилей. К примеру, авторы могут определить семейство шрифтов для всех элементов внутри BODY одним правилом, которое применяется к элементу BODY.
Скрытие данных стиля от пользовательских агентов (па)
Некоторые языки таблиц стилей поддерживают синтаксис, позволяющий авторам прятать содержимое элементов STYLE от несоответствующих ПА.
Этот пример иллюстрирует, как в CSS закомментировать содержимое элементов STYLE так, чтобы быть уверенным наверняка, что несоответствующие ПА не будут рассматривать его как текст.
<STYLE type="text/css">
<!--
H1 { color: red }
P { color: blue}
-->
</STYLE>
Ссылки на таблицы стилей в заголовках http
Этот раздел относится только к тем ПА, которые соответствуют версиям HTTP, определяющим поле заголовка Link. Обратите внимание, что HTTP 1.1, как определено в [RFC2616],не содержит поле заголовка Link (см. раздел 19.6.3).
Менеджеры Web-сервера могут найти удобным сконфигурировать сервер так, чтобы таблица стилей применялась к группе страниц. Заголовок HTTP Link имеет то же действие, что и элемент LINK с теми же атрибутами и значениями. Множественные заголовки Link соответствуют множественным элемента LINK, появляющимся в том же порядке. Например:
Link: <http://www.acme.com/corporate.css>; REL=stylesheet
соответствует:
<LINK rel="stylesheet" href="http://www.acme.com/corporate.css">
Можно определить несколько альтернативных стилей, используя множественные заголовки Link, и использовать затем атрибут rel для определения стиля по умолчанию.
В этом примере "compact" применяется по умолчанию, поскольку опущено ключевое слово "alternate" для атрибута rel.
Link: <compact.css>; rel="stylesheet"; title="compact"
Link: <bigprint.css>; rel="alternate stylesheet"; title="big print"
Это должно также работать, если документы HTML пересылаются по email. Некоторые агенты email могут изменять порядок заголовков [RFC822]. Чтобы защитить каскадный порядок таблиц стилей, определённый заголовками Link, авторы могут использовать конкатенацию заголовков для сращивания нескольких объектов одного поля заголовка. Знак кавычек нужен только тогда, когда значения атрибутов содержат пробелы. Используйте мнемоники SGML для ссылки на символы, которые недопустимы в заголовках HTTP или email или могут быть изменены при прохождении через шлюзы.
Элементы LINK и META, ожидаемые заголовками HTTP, определены как появляющиеся явно перед каким-либо элементом LINK или META в HEAD документа.