Что такое динамический html
DHTML отличается от Ajax тем, что страница DHTML по-прежнему основана на запросах / перезагрузках. При использовании DHTML после загрузки страницы между клиентом и сервером может не быть никакого взаимодействия; вся обработка происходит в JavaScript на стороне клиента. Напротив, страница Ajax использует функции DHTML для инициирования запроса (или «подзапроса») к серверу для выполнения дополнительных действий. Например, если на странице есть несколько вкладок, чистый подход DHTML будет загружать содержимое всех вкладок, а затем динамически отображать только ту, которая активна, в то время как AJAX может загружать каждую вкладку только тогда, когда это действительно необходимо.
Содержание
Использование
DHTML позволяет авторам добавлять на свои страницы эффекты, которые иначе трудно достичь, путем изменения объектной модели документа (DOM ) и стиль страницы. Комбинация HTML, CSS и JavaScript предлагает способы:
Структура веб-страницы
Обычно веб-страница, использующая DHTML, настраивается следующим образом:
Пример: отображение дополнительного блока текста
Следующий код иллюстрирует часто используемую функцию. Дополнительная часть веб-страницы будет отображаться только по запросу пользователя.
Объектная модель документа
DOM также предоставляет доступ к действиям пользователя, таким как нажатие клавиши и щелчок мышью. Эти и другие события можно перехватывать и обрабатывать, создав функции и подпрограммы обработчиков событий. Обработчик событий получает управление каждый раз, когда происходит данное событие, и может выполнять любое соответствующее действие, в том числе использовать DOM для изменения документа.
Динамические стили
Объектная модель обеспечивает программный доступ к стилям. Это означает, что вы можете изменять встроенные стили для отдельных элементов и изменять правила стиля, используя простое программирование на JavaScript.
Динамический HTML и Объектная Модель Документа
Программный доступ к элементам
HTML-тэг элемента определяет тип сопоставленного ему объекта. Отдельные экземпляры объектов в документе могут идентифицироваться по их уникальному идентификатору (атрибуту/свойству id ), имени (атрибуту/свойству name ) или положению в дереве элементов DOM модели. Кроме этого есть ряд важнейших объектов, которые не имеют собственных тэгов. Это такие объекты как window (окно браузера), document (HTML-документ, загруженный в окно или фрейм), event (событие).
Объект window
Многие свойства объекта window сами являются объектами. Рассмотрим важнейшие из них.
Объект navigator
Объект navigator содержит информацию о браузере. Все его свойства доступны только по чтению и могут использоваться для программного определения свойств и методов, доступных в том или ином браузере.
Объект location
Свойство href является свойством по умолчанию. Две следующие инструкции идентичны.
Присвоение значения объекту location (как в приведенном примере) немедленно открывает заданный URL в текущем окне.
Объект history
Объект history (история) содержит информацию об адресах, посещенных пользователем с момента открытия браузера. Из соображений безопасности действительные адреса недоступны, имеются лишь три метода для перемещения по индексу на страницу относительно текущей.
Объект screen
Объект screen содержит информацию о мониторе: ширина ( width ), высота ( height ), глубина цвета ( colorDepth ), выраженная как число бит на пиксель, и другие. Если у пользователя несколько мониторов, отображаются данные того, в котором открыт браузер (или его большая часть).
Коллекция frames
Национальная библиотека им. Н. Э. Баумана
Bauman National Library
Персональные инструменты
Dynamic HTML
 | |
| Семейство | HTML |
|---|---|
| Первый появившийся | 1997 |
| Язык физической реализации | HTML |
| Платформа | web-браузеры Microsoft и Netscape |
| OS | Windows, MAC |
| Формат файлов | .dhtml |
Динамическая веб-страница представляет собой широкую концепцию, которая может охватывать любую веб-страницу, сгенерированную персонально для каждого пользователя, вхождение загрузки или конкретных значений переменных. Эта концепция включает в себя страницы, созданные с помощью скриптов на стороне клиента и страницы, созданные с помощью скриптов на стороне сервера (PHP, Perl, JSP или ASP.NET), где веб сервер генерирует контент перед отправкой его клиенту.
DHTML отличается от Ajax тем, что DHTML основана на запросах и перегрузках. При использовании DHTML может вовсе отсутствовать взаимодействие между клиентом и сервером после загрузки страницы, так как вся обработка происходит в JavaScript на стороне клиента. Страница Ajax использует функции DHTML для инициации запроса (либо подзапроса) к серверу для выполнения дополнительных действий. Например, если на странице имеется несколько вкладок, DHTML будет подгружать содержимое всех вкладок и динамически отображать только ту, которую необходимо отобразить в данный момент. В то время как Ajax подгружает каждую из вкладок только тогда, когда это необходимо.
Содержание
Использование
DHTML позволяет авторам добавлять на страницы эффекты, которые трудно достичь с помощью объектной модели документа или каскадной таблицы стилей. Например, с помощью использования сочетания HTML, CSS и JavaScript возможно осуществить:
Структура веб-страницы
Пример настройки страницы на DHTML.
Отличия DHTML от HTML
Несмотря на то, что по своей сути DHTML является ответвлением семейства HTML, а в настоящее время он был заменен HTML5, который обладает тем же и большим функционалом, между HTML и непосредственно DHTML существует ряд значительных различий. [Источник 2]
Среди этих различий выделяют:
Объектная модель документа
Кроме того, DOM обеспечивает доступ к действиям пользователя, например, таким, как нажатие клавиши или щелчок мыши. Можно перехватывать и обрабатывать подобные события, создавая функции и процедуры обработчика событий. Обработчик событий, в свою очередь, будет получать управление каждый раз, когда происходит заданное событие и будет выполнять любые соответствующие действия, включая использование DOM для изменения документа.
Каскадные таблицы стилей
Динамические возможности DHTML
Возможности DHTML позволяют создавать полностью интерактивные сайты. Это полезно в практических целях. Например, на сайтах интернет-магазинов с помощью DHTML пользователь может выбирать товары, задавать вопросы и получать ответы, созвать заявки и оформлять заказы. И все это осуществляется при помощи запрограммированных на определенное реагирование скриптов.
С помощью DHTML можно создавать сайты-презентации, слайд-шоу, проводить рекламные промоакции, развлекать и увлекать потенциальных клиентов. Разумеется, DHTML придумывали не для игр, а именно для решения практических коммерческих задач, для которых в обычном сайте требовалось наличии живого менеджера для ответов на вопросы посетителей.
Однако DHTML сегодня уже прошлый век. В настоящее время для создания динамических сайтов реализуется новая версия HTML 5. Этот инновационный язык гипертекста представляет собой своего рода компиляцию наработок всех предыдущих версий HTML.
Сайты на основе HTML 5 одинаково выглядят как на стационарных, так и на мобильных компьютерах. А также и на любых операционных системах.
Для HTML 5 даже не предусмотрено использование Flash-плейера для просмотра видео. Все реализовано за счет тегов HTML 5. [Источник 3]
DHTML
DHTML (динамический HTML) – это набор средств, которые позволяют создавать более интерактивные Web-страницы без увеличения загрузки сервера. Другими словами, определенные действия посетителя ведут к изменениям внешнего вида и содержания страницы без обращения к серверу.
DHTML построен на объектной модели документа (Document Object Model, DOM), которая расширяет традиционный статический HTML-документ. DOM обеспечивает динамический доступ к содержимому документа, его структуре и стилям. В DOM каждый элемент Web-страницы является объектом, который можно изменять. DOM не определяет новых тегов и атрибутов, а просто обеспечивает возможность программного управления всеми тегами, атрибутами и каскадными листами стилей (CSS).
События динамичеcкого HTML
На WEB-страницах можно обеспечить реакцию на определенные действия посетителя или изменения состояния документа или окна, которые вызывают определенные события.
Посетитель генерирует события при передвижении мыши, нажатии кнопок мыши и клавиатуры. Изменения состояния документа генерируют события при загрузке документа, изображений или объектов, при появлении ошибки на странице или переходе фокуса от одного элемента к другому.
Модель событий DHTML связана с определенной иерархией HTML-контейнеров и основана на всплывании событий и действии по умолчанию.
Всплывание событий заключается в том, что на событие может быть получена реакция не только от элемента-источника события, но также и от всех его родительских элементов вплоть до тела документа и самого документа. Событие может быть обработано на любом уровне. В приведенном ниже примере обработчик щелчков мышью на ссылке будет также обрабатывать щелчки мышью на изображении.
Пример 1
Всплывание события
Для получения информации можно щелкнуть мышкой как на изображении, так и на тексте:
Связывание событий
Установление связи между определенным событием и сценарием называется связыванием событий. События можно связать с помощью специальных атрибутов любого элемента или с помощью тега script.
Связывание событий с атрибутами удобно, но требует расширения языка HTML каждый раз при изобретении нового события. А так как HTML развивается медленно, данный подход используется только для небольшого набора встроенных событий. Как атрибуты любого элемента в DHTML представлены события мыши и клавиатуры.
Пример 2
Смена графического объекта
Для смены графического объекта переместите на него мышку – Иоганн Себастьян Бах сменит Людвига ван Бетховена.
Уведите с него мышку – Людвиг ван Бетховен сменит Иоганна Себастьяна Баха.
Пример 3
Изменение вида данного элемента
Для изменения цвета и шрифта данного текста нажимайте и отпускайте кнопку мыши
Обратите внимание на то, что в примере 2 область действия обработчика события определена с помощью идентификатора B_B, а в примере 3 – с помощью указателя this.
Применение script является более общим механизмом связывания события со сценарием. Все события представлены как свойства в DOM. Используя это, перепишем наш пример в таком виде:
Пример 4
Можно также использовать метод addEventListener():
Пример 5
События мыши
События клавиатуры
Событие прокручивания
События фокуса
Пример 6
События формы
Пример 7
OnReset Возникает после щелчка на кнопке Reset. Назначение – вывод предупреждения о сбросе.
События документа
Пример 8
OnUnload Возникает при выгрузке страницы. Используется для освобождения каких-либо ресурсов и вывода дополнительных сообщений. OnAbort Возникает при срыве загрузки графического объекта. OnError Возникает лишь при неудачной загрузке графического элемента или всей WEB-страницы. Все остальные ошибки это событие не отлавливает. Если в примере 9 файл m.gif не будет найден, то на экране появится предусмотренное сообщение.
Пример 9
Событие помощи
Объект event
Для получения информации о событии служит объект event.
Свойства объекта event
Пример 10
type Определение события. Имя события возвращается в нижнем регистре без префикса on.
Пример 11
Пример 12
altKey Состояние клавиши (true/false). ctrlKey Состояние клавиши (true/false). shiftKey Состояние клавиши (true/false). keyCode ASCII-код нажатой клавиши.
Динамическое содержание
Содержание HTML-документа можно менять после загрузки страницы.
Свойства динамического содержания
Пример 13
Данные свойства динамического содержания могут обращаться к элементу или его содержанию только как к целому. Если, например, требуется изменить лишь один символ в параграфе, то придется заново переписать весь параграф. Однако, можно напрямую манипулировать любой частью HTML-документа. Такую возможность предоставляет объект TextRange, который будет рассмотрен чуть позже.
Методы Adjacent
Кроме перечисленных четырех свойств динамического содержания имеются еще два метода для вставки содержания:
insertAdjacentText Вставка текста. insertAdjacentHTML Вставка HTML.
Оба метода Adjacent имеют по два аргумента: место вставки и содержание. Место вставки определяется ключами:
Пример 14
Методы Adjacent удобно использовать для вставки новых параграфов или элементов списков.
Объект TextRange
Используя объект TextRange можно редактировать любой текст, а также менять текст, выделенный посетителем на экране.
Свойства доступа к тексту
Метод вставки HTML
Методы позиционирования объекта TextRange
Методы move, moveStart и moveEnd возвращают число, равное расстоянию перемещения. Если будет задано перемещение на 100 слов в документе, содержащим 50 слов, то объект TextRange будет помещен в последнее слово, а метод возвратит расстояние перемещения. Для проверки успешности проведения перемещения возвращаемое значение сравнивается с заданным расстоянием перемещения.
Пример 15
moveToPoint(prm1, prm2) Определяет элемент, который выведен в точке, координаты которой заданы параметрами prm1, prm2. Работает не совсем корректно. В чем можно убедиться на примере.
Пример 16
Динамический HTML
Динамический HTML (Dynamic HTML или DHTML) не является каким-то особым языком разметки страниц. Это всего лишь термин, применяемый для обозначения HTML-страниц с динамически изменяемым содержимым.
Реализация DHTML покоится на трех «китах»: непосредственно HTML, каскадных таблицах стилей (Cascade Style Sheets — CSS) и языке сценариев (JavaScript или VBScript). Эти три компонента DHTML связаны между собой объектной моделью документа (Document Object Model — DOM), являющейся, по сути, интерфейсом прикладного программирования (API). DOM связывает воедино три перечисленных компонента, придавая простому документу HTML новое качество, — возможность динамического изменения своего содержимого без перезагрузки страницы. Символически подобное единство показано на рис. 10.1.
Рис. 10.1. Компоненты динамического HTML
Каскадные таблицы стилей можно сравнить со стилевыми файлами любого текстового редактора. С их помощью определяется внешний вид отображаемого HTML-документа: цвет шрифта и фона документа, сам шрифт, разбивка текста и многое другое. Для каждого элемента, задаваемого определенным тэгом HTML, можно определить свой стиль отображения в окне браузера. Например, заголовки первого уровня будут отображаться шрифтом Arial I6pt синего цвета, заголовки второго уровня — Arial 14pt красного цвета, основной текст — Times New Roman 10pt черного цвета с одинарным интервалом между строками. Можно создать таблицу стилей и использовать ее для всех документов, расположенных на сервере, что придаст стройность и строгость всему Web-сайту.
Объектная модель документа делает все элементы страницы программируемыми объектами. С ее помощью через языки сценариев можно получить доступ и управлять всем, что есть в документе. Каждый элемент HTML доступен как индивидуальный объект, а это означает, что можно изменять значение любого параметра любого тега HTML-страницы, и, как следствие, документ действительно становится динамическим. Любое действие пользователя (щелчок кнопкой мыши, перемещение мыши в окне браузера или нажатие клавиши клавиатуры) объектной моделью документа трактуется как событие, которое может быть перехвачено и обработано процедурой сценария.
DHTML достаточно новая технология, и не все браузеры поддерживают объектную модель документа и каскадные таблицы стилей. Однако DHTML использует стандартные теги HTML, и поэтому пользователи браузеров, не поддерживающих DOM, практически увидят все, что задумано разработчиком динамической страницы, но только в статическом виде.
Есть еще одна «неприятность», связанная с тем, что разные фирмы-разработчики браузеров могут реализовывать собственную объектную модель документов, как это произошло с двумя популярными браузерами Internet Explorer и Netscape Navigator. Поэтому разработчикам динамических страниц приходится, в конечном счете, писать два варианта своих приложений, чтобы пользователи указанных браузеров могли правильно просматривать их страницы.
В данной главе описываются каскадные таблицы стилей, объектные модели документов браузеров Internet Explorer и Netscape Navigator и приемы создания динамических HTML-страниц.
Каскадные таблицы стилей впервые были реализованы в Internet Explorer 3.0, но информация о них в то время была большей частью противоречивой. При реализации Internet Explorer 4.0 были приняты во внимание рекомендации REC-CSS1 Консорциума W3 относительно каскадных таблиц стилей, датированные 17 декабря 1996 года. К настоящему времени они пересмотрены и известны как рекомендации по каскадным таблицам стилей, уровень 1, документ REC-CSS1-19990111 от 11 января 1999 года. В мае 1998 года Консорциум издал рекомендации по каскадным таблицам стилей, уровень 2, документ REC-CSS2-19980512, часть из которых реализована в Internet Explorer 4.01. В соответствии с этими рекомендациями и будет вестись описание каскадных таблиц стилей.
Каскадные таблицы стилей, уровень 1, представляют собой простую технологию определения и присоединения стилей к документам HTML. Стиль, говоря житейским языком, — это все то, что определяет внешний вид документа HTML при его отображении в окне браузера: шрифты и цвета заголовков разных уровней, шрифт и разрядка основного текста, задаваемого в тэге абзаца
, и т. д. Стиль задается по определенным правилам, о которых, собственно говоря, и пойдет речь в данном разделе, а таблица стилей — набор правил отображения, применяемых в документе, к которому присоединена соответствующая таблица стилей.
Таблица стилей — это шаблон, который управляет форматированием тегов HTML в Web-документе. Если читатель работал с текстовым редактором Microsoft Word, то концепция таблицы стилей напомнит ему концепцию стилевых файлов этого редактора: изменить внешний вид документа Word можно простым изменением присоединенных к нему стилей. Точно также изменить внешний вид документа HTML можно простым изменением присоединенной к нему таблицы стилей.
Почему в название таблиц стилей включено определение «каскадные»? Дело в том, что рекомендации Консорциума W3 позволяют использовать несколько таблиц стилей для управления форматированием одного документа HTML, а браузер по определенным правилам выстраивает приоритетность применения этих таблиц. Они выстраиваются неким «каскадом», по которому и «прокатывается» документ. Правила приоритетности и разрешения возникающих конфликтов описаны ниже в данном разделе.
Для разработки таблицы стилей достаточно немного ориентироваться в языке HTML и быть знакомым с базовой терминологией настольных издательских систем. Как отмечалось выше, таблица стилей представляет собой набор правил форматирования элементов HTML. Эти правила достаточно просты и легко запоминаемы. Например, если необходимо, чтобы в документе все заголовки первого уровня отображались синим цветом и шрифтом с кеглем (размером) 16 пунктов, то в таблице следует задать правило:
Любое правило каскадных таблиц стилей состоит из двух частей: селектора и определения. Селектором может быть любой тег HTML, для которого определение задает, каким образом необходимо его форматировать. Само определение, в свою очередь, также состоит из двух частей: свойства и его значения, разделенных знаком двоеточия (:). Назначение свойства очевидно из его названия. В приведенном правиле селектором является элемент HI, а определение, записанное в фигурных скобках, задает значения двух свойств заголовка первого уровня: цвет шрифта (свойство color) определен как синий
(значение blue) и размер шрифта (свойство font-size) определен в 16 пунктов (значение I6pt). В одном правиле можно задать несколько определений, разделенных символом точка с запятой (;), как это демонстрируется в приведенном примере.
Созданная только что таблица стилей влияет на форматирование элемента определенного типа: заголовок первого уровня. Ее комбинация с другими таблицами стилей определяет окончательное представление документа при его просмотре в окне браузера.
Синтаксис правил каскадных таблиц стилей не чувствителен к регистру. Селекторы, свойства и их значения можно задавать как строчными, так и прописными буквами, или в смешанном порядке. Однако каскадные таблицы стилей чувствительны к синтаксису задания правил и правильности названий свойств, значений и селекторов. Любая грамматическая ошибка приводит к тому, что правило пропускается анализатором браузера, и никакого предупреждающего сообщения не появляется.
Авторы страниц HTML должны писать свои таблицы стилей, только если они хотят придать документу вид, отличный от вида, предоставляемого умалчиваемой таблицей стилей браузера.
Чтобы таблица стилей могла воздействовать на внешнее представление документа, браузер должен знать о ее существовании. Для этого ее необходимо связать с HTML-документом.
Существует четыре способа связывания документа и таблицы стилей:
1. Связывание — позволяет использовать одну таблицу стилей для форматирования многих страниц HTML.
2. Внедрение — позволяет задавать все правила таблицы стилей непосредственно в самом документе.
3. импортирование — позволяет встраивать в документ таблицу стилей, расположенную на сервере.
4. Встраивание в теги документа — позволяет изменять форматирование конкретных элементов страницы.
Связываемый файл содержит набор правил каскадных таблицей стилей, определяющих форматирование документа, и должен иметь расширение CSS.
Связывание позволяет разработчику применить одинаковый набор правил форматирования к группе HTML-документов, что приводит к единообразному отображению различных документов и придает некоторую системность серверу разработчика.
В приведенном выше примере встроенная таблица стилей определяет отображение всех абзацев в документе (элемент P) на сером фоне с центрированными строками. Полужирный текст, определяемый любым элементом в (тэг ) документа, будет отображаться прописными буквами, даже если в документе он задан строчными.
А что делать, если необходимо некоторые ссылки отобразить по-другому? Можно задать для них правило форматирования непосредственно в тэге, а можно применить параметр CLASS, добавленный в HTML 4.0 в качестве стандарта для всех тэгов. Значением параметра CLASS является ссылка на класс, задаваемый в таблице стилей.
Класс позволяет задать разные правила форматирования для одного элемента определенного типа или всех элементов документа. имя класса указывается в селекторе правила после имени тега и отделяется от него точкой. Можно определить несколько правил форматирования для одного элемента и с помощью параметра CLASS соответствующего тега применять разные правила форматирования в документе. Например, можно определить два класса отображения заголовка первого уровня:
В тексте документа ссылка на соответствующий класс задается в параметре CLASS :
Kpac ный шрифт на синем фоне
И мя класса в параметре CLASS задается без лидирующей точки. Оно может быть заключено в двойные или одинарные кавычки, или задаваться вообще без кавычек, например >
В приведенном примере классы задавались для разного отображения элементов одного типа. Если класс должен применяться ко всем элементам документа, то в селекторе задается имя класса с лидирующей точкой без указания конкретного элемента:
Теперь два класса red и blueBgrd можно применять к любым элементам документа:
Первый абзац отобразится красным шрифтом, а второй — красным шрифтом на синем фоне.
Параметр ID, как и параметр CLASS, не влияет на отображение браузером элемента HTML, но он задает уникальное имя элемента, которое используется для ссылок на него в сценариях и таблицах стилей. Параметр ID можно применять к любому элементу документа.
Правила таблиц стилей регламентируют использование уникального идентификационного имени элемента в качестве селектора, предваряя его символом #:
Разреженные слова в абзаце
В этом примере абзац идентифицирован именем раг24 в параметре ID, поэтому к нему применимо правило с селектором #раг24. Второе правило в таблице стилей должно применяться к заголовку первого уровня с идентификатором form3. Такого элемента в нашем фрагменте нет, и поэтому заголовок form2 отображается с применением правила по умолчанию.
Для организации связи с правилами форматирования следует избегать использования идентификаторов конкретных элементов страницы, задаваемых в параметре ID. Если действительно необходимо отформатировать конкретный элемент, лучше использовать технику встраивания правил форматирования в тэг.
При разработке страниц HTML часто приходится одни элементы вкладывать в другие, например, выделять слова тэгом в каком-нибудь абзаце, задаваемом тэгом
. В этом случае говорят, что элемент P порождает элемент ЕМ и является его предком, а сам элемент ЕМ является потомком элемента P. Некоторые свойства предка наследуются потомком, например, цвет шрифта (свойство color). Чтобы вложенные элементы отображались со своими значениями свойств, можно определить для них правила форматирования, как показано ниже:
Однако это приведет к тому, что все выделяемые в документе элементы будут отображаться шрифтом желтого цвета. А если необходимо, чтобы выделяемые только в абзаце элементы отображались желтым цветом, а в других частях документа каким-то другим цветом? Здесь помогут контекстные селекторы. Поставленную задачу решит следующее правило:
Контекстный селектор состоит из нескольких простых, разделенных пробелами. интерпретатор браузера просматривает в стеке все открытые элементы, находит элементы ЕМ, порожденные элементом p, и применяет к ним указанное правило форматирования.
Таким образом, правила с контекстными селекторами задают исключения из общих правил форматирования элементов документа, определенных с простыми селекторами.
Обычно правила форматирования присоединяются к элементу страницы, имеющему определенное положение в структуре документа. Концепция псевдоклассов и псевдоэлементов расширяет адресацию правил форматирования, позволяя внешней информации влиять на процесс форматирования.
Псевдоклассы и псевдоэлементы можно использовать в селекторах правил форматирования, однако реально в исходном тексте документа HTML они не существуют. Вернее, они как бы вставляются браузером при определенных условиях в документ, и на них можно ссылаться в таблицах стилей. их называют классами и элементами, так как это удобный способ описания их поведения. Говоря точнее, их поведение определяется фиктивной последовательностью тэгов.
Псевдоэлементы применяются для адресации некоторых частей элементов, тогда как псевдоклассы позволяют таблицам стилей для элементов разных типов применять разные процедуры форматирования.
В браузерах Internet Explorer и Netscape Navigator реализованы только псевдоклассы для элементов связей А. Псевдоэлементы в них не используются вообще.
Связь в документе HTML определяется тэгом с параметром HREF. Обычно браузеры отображают посещенные связи отлично от непосещенных (например, разными цветами). Уровень 1 каскадных таблиц стилей регламентирует правила для отображения связей через псевдоклассы элемента А:
A:link < color: red >/* непосещенная связь */
A:visited < color: blue >/* посещенная связь */
A:active < color: green >/* активная связь */
A:hover < color: lime >/* связь, на которой расположен курсор мыши */
Любую связь в документе можно отнести к одному из перечисленных классов. Активная связь — это связь, которая выбрана в данный момент.
Комментарии в каскадных таблицах стилей задаются аналогично комментариям в языке С: текст, заключенный между символами /* и */, является комментарием.
Псевдокласс hover включен в каскадные таблицы стилей, уровень 2, который частично реализован в Internet Explorer 4.01.
В приведенном примере задается отображение непосещенных связей красным цветом, посещенных — синим, активных — зеленым. Если курсор мыши будет расположен над связью, то ее цвет изменится на ярко-зеленый.
Браузер Internet Explorer 4.01 правильно реализует псевдоклассы связей, тогда как Netscape Navigator 4.0 не воспринимает псевдоклассы active и hover.
Так как псевдоклассы применяются к единственному типу элементов А, то при задании их в селекторе правил этот элемент можно опустить. Следующие два правила равносильны:
A:link < color: red >/* непосещенная связь */
:link < color: red >/* непосещенная связь */
К одному документу можно присоединить несколько таблиц стилей, которые одновременно будут влиять на представление документа в окне браузера. Этот принцип является основополагающим принципом применения каскадных таблиц стилей, и можно указать на две причины, по которым он рекомендован группой разработчиков Консорциума W3:
1. Реализация модульности — разработчики таблиц стилей могут комбинировать таблицы стилей, каждая из которых отвечает за определенный этап форматирования документа. Например, в одной таблице можно определить все правила форматирования шрифтов, во второй — правила позиционирования элементов и т. д.
2. Соблюдение равновесия между авторской разработкой и пристрастиями читателя — и авторы страниц, и читатели могут влиять на представление страницы через таблицы стилей. Пользователь может определить собственные правила отображения элементов документа в своих личных таблицах стилей, а браузер, на основании механизма приоритетности, будет использовать те или иные правила из таблиц пользователя или автора страницы.
Но как взаимодействуют правила, определяющие форматирование одинаковых элементов и заданные в разных таблицах? Может, например, оказаться, что в связанной таблице цвет шрифта определен как черный, в импортируемой как красный, а во встроенной как синий, — какой цвет шрифта будет иметь документ, отображаемый в браузере? Подобные конфликты разрешаются с использованием принципа приоритетности разных таблиц стилей. Таблицы выстраиваются в цепочку приоритетности (от низшего к наивысшему), образуют каскад, по которому документ «прокатывается» и постепенно форматируется на основе правил таблиц стилей, образующих каскад.
Говорят, что правила, определенные в таблице с большим приоритетом, имеют больший вес. По умолчанию веса правил читателя всегда меньше весов правил, определенных в таблицах разработчика документа. То есть, если возникает конфликт между правилами, определенными в документе, и правилами, определенными в личных таблицах стилей пользователя, применяться будут первые. Правила читателя и автора всегда перекрывают установки по умолчанию значений свойств используемого браузера.
Приоритетность импортируемых таблиц стилей зависит от порядка их импортирования в документ. В таблице стилей можно использовать несколько операторов @import. Каждый последующий оператор импортирует таблицу стилей с более высоким приоритетом по отношению к предыдущим, и поэтому ее правила имеют больший вес. импортируемые таблицы стилей сами могут импортировать и перекрывать другие таблицы.
Любые правила, определенные непосредственно в самом документе, перекрывают правила импортируемых таблиц стилей. Обычно все операторы @import задаются в таблице стилей до определений правил, а это как раз и показывает, что правила самой таблицы перекрывают правила импортируемых таблиц.
Можно увеличить вес правила с помощью значения important, которое задается после значения свойства, вес которого необходимо увеличить:
В приведенном примере оба свойства имеют увеличенный вес.
Правило читателя со значением important перекрывает аналогичное правило автора, заданное без увеличения веса. Авторское правило со значением important перекрывает аналогичное правило читателя с увеличенным весом.
Разрешение конфликтов осуществляется на основе внутреннего механизма, реализованного в каскадных таблицах стилей. Для определения значения комбинации элемент-свойство используется следующий механизм:
1. ищутся все определения, применяемые к рассматриваемой комбинации элемент-свойство. Определения применяются, только если селектор соответствует рассматриваемому элементу. Если невозможно применить ни одно определение, используется наследуемое значение свойства. Если не определено наследуемое значение (это справедливо в случае элементов HTML и свойств, которые не могут наследоваться), используется начальное значение.
2. Определения сортируются по явно заданным весам: определения со значением important имеют больший вес по сравнению с нормальным (без увеличения веса) определением.
3. Определения сортируются по своему происхождению: авторские таблицы стилей перекрывают таблицы стилей читателя, которые, в свою очередь, перекрывают установки значений свойств по умолчанию браузера. импортируемая таблица стилей имеет одинаковое происхождение с таблицей, из которой она импортирована.
4. Определения сортируются по специфичности селектора: селектор с большим числом специфичности перекрывает селектор с меньшим числом специфичности. Для определения числа специфичности селектора определения подсчитывают количество параметров ID (а), параметров CLASS (b) и названий тегов (с) в селекторе. Составляется число abc, которое и определяет специфичность данного определения. Несколько примеров, взятых из рекомендаций REC-CSS1-19990111, приведено ниже:
Псевдоклассы и псевдоэлементы считаются как нормальные элементы и классы, соответственно.
5. Определения сортируются по порядку их задания в таблице стилей: если два правила имеют одинаковый вес, заданное позже правило имеет приоритет. Правила в импортированных таблицах стилей считаются задаваемыми до любого правила в таблице стилей, из которой она импортируется.
При определенном навыке применение алгоритма приоритетности правил не представляет труда. Для новичков можно просто запомнить следующую приоритетность правил (от низшего к высшему): связанная таблица стилей, импортируемая таблица стилей, правило с элементом HTML в качестве селектора, правило с параметром CLASS в качестве селектора, правило с параметром ID в качестве селектора, встроенное в тег HTML правило. Для начальных разработок таблиц стилей этих правил вполне достаточно.
Для правильного применения правил форматирования следует представлять, как в каскадных таблицах стилей происходит форматирование элементов, т. е. на что можно влиять и что можно изменять в отображении элемента.
Модель форматирования каскадных таблиц стилей ориентирована на представление любого элемента HTML в окружении вложенными прямоугольными блоками, как показано на рис. 10.2.
Рис. 10.2. Блоковая модель форматирования абзаца
Блок содержимого элемента (самый внутренний блок) отделен от границы отступами. Самым внешним блоком является поле. Свойства таблиц стилей позволяют устанавливать размеры и цвета всех блоков, составляющих в сумме отображаемый элемент. Поле всегда является прозрачным прямоугольником, поэтому его цвет наследует цвет родителя элемента (для абзаца это элемент BODY). Отступ всегда имеет цвет фона самого элемента.
Все перечисленные блоки в совокупности составляют блок форматирования, или отображения элемента, т. е. видимое в окне браузера изображение элемента. Размеры блока форматирования элемента складываются из размеров самого элемента и размеров отступов, границы и полей.
С точки зрения процесса форматирования документа существуют два типа элементов: блоковые и встроенные.
Каждый элемент в модели форматирования имеет свойство display, значение которого определяет, отображается или не отображается (none) элемент, является ли он блоком (block), списком (list-item) или встроенным элементом (inline).
Элементы co значением свойства display ра вным block или list-item, а также элементы со значением свойства float, отличным от none (не «плавающие» элементы), являются блоковыми элементами. их форматирование связано с установкой значений соответствующих параметров вложенных блоков, составляющих элемент в целом. На рис. 10.3 показаны все параметры, доступные в модели форматирования каскадных таблиц стилей для блоковых элементов.
Рис. 10.3. Параметры форматирования блоковых элементов
Параметры «верх» (top) и «низ» (bottom) не применяются к блоковым элементам, они существуют только для встроенных (inline) элементов, речь о которых пойдет ниже.
Ширина (width) элемента — это ширина блока содержимого, и определяется как расстояние между левым и правым внутренними краями. Высота (height) элемента — расстояние между внутренним верхом и низом.
При вертикальном форматировании блоковых, не «плавающих» элементов значения параметров «верхнее поле» и «нижнее поле» определяют минимальное расстояние до границ блоков окружающих их элементов. Если у двух примыкающих элементов определены не нулевые значения параметров полей, то при вертикальном форматировании поля двух элементов сливаются в одно со значением, равным максимальной высоте поля одного из двух элементов. Подобное слияние можно наблюдать для элементов LI списка UL или OL.
Горизонтальное форматирование элемента определяется значениями семи свойств: левое поле (margin-left), левая граница (border-left), левый отступ (padding-left), ширина (width), правый отступ (padding-right), правая граница (border-right) и правое поле (margin-right). Сумма значений этих семи параметров всегда равняется ширине элемента-родителя или ширине окна браузера, если элемент не вложен в другой элемент.
По умолчание параметр width имеет значение auto. Если элемент не является замещаемым (в тэге элемента задан параметр SRC), то браузер вычисляет ширину элемента из условия равенства суммы значений семи указанных выше параметров ширине элемента-родителя. Для замещаемого элемента значение ширины автоматически заменяется шириной замещаемого элемента, если только значение ширины установлено в auto. В противном случае размер замещаемого элемента подгоняется под заданную в параметре ширину (процедура подгонки зависит от браузера).
Чтобы удовлетворить условию равенства суммы значений семи параметров ширине элемента-родителя или окна браузера, в рекомендациях Консорциума W3 определено, в каких случаях значения каких параметров устанавливаются браузером в auto.
Свойство float может переводить любой элемент в разряд «плавающих». Это приводит к тому, что указанный элемент выводится из нормального потока отображения и форматируется как блоковый элемент. Например, установка свойства float элемента равным left позволяет создать буквицу при выводе абзаца текста, как показано на рис. 10.4.
Рис. 10.4. Плавающий элемент IMG, представляющий букву Ж
При значении свойства float равным left, элемент сдвигается влево до поля, отступа или границы другого блокового элемента, а нормальный поток отображения будет обтекать его с правой стороны. Текст файла HTML для приведенного примера представлен ниже.
Пример 10.1. Буквица в тексте
или-были в далекие времена далеко на Севере большие и сильные люди. При одном только их виде дрожали все, обитавшие в округе племена.
Таблица стилей определяет все элементы IMG как плавающие элементы со смещением влево. Встроенная в абзац картинка, смещаясь влево, образует буквицу абзаца.
Элементы, которые не форматируются как блоковые, являются встроенными (inline) элементами. Они совместно с другими элементами используют область строки. Обычно, выделяемые в строке элементы (ЕМ, STRONG, B и т. д.) классифицируются как встроенные.
Рассмотрим пример задания встроенных элементов в блоковый элемент абзац P:
В абзац можно помещать
Если ширина абзаца достаточна для отображения всех встроенных элементов в строке, то они отобразятся в одной строке. Если ширина недостаточна, то некоторые элементы могут быть разбиты на два и отображены в двух строках (рис. 10.5).
Рис. 10.5. Отображение встраиваемых элементов
В каскадных таблицах стилей, уровень 1 и 2 (CSS1 и CSS2), все доступные свойства форматирования элементов в документе HTML разбиты на 9 категорий, представленных в табл. 10.1. Категории или свойства, появившиеся во втором уровне каскадных таблиц стилей, отмечены верхним индексом 2.
Таблица 10.1. Категории свойств элементов
Типографские свойства шрифтов
Цвет текста и фона, а также картинки в качестве фона
Выравнивание, форматирование и разрядку текста
Свойства форматирования блоковых элементов
Свойства, связанные с блоками отображения элементов, их позиционированием и отображением списков
Спецификацию разрыва страницы
Фильтры и переходы 2
Мультимедийные эффекты и преобразования графических изображений
Псевдоклассы и другие свойства
Свойства @ import, cursor 2 и important
Прежде чем переходить к описанию свойств форматирования, остановимся на единицах измерения, используемых для задания значений свойств.
Для задания значений свойств, определяющих некоторые размеры, в каскадных таблицах стилей применяются относительные и абсолютные единицы измерения длины. Относительные единицы задают длину относительно значения другого свойства, определяющего длину. Документы, в которых таблицы стилей используют относительные единицы измерения, более приспособлены для отображения на разных устройствах (например, дисплей или лазерный принтер). Абсолютные единицы измерения полезны только тогда, когда известны физические характеристики устройства отображения. В табл. 10.2 отображены единицы измерения, используемые в таблицах стилей.
Таблица 10.2. Единицы измерения в таблицах стилей
Относительные единицы измерения em и ех во всех свойствах вычисляются относительно высоты шрифта элемента. Единственное исключение — свойство font-size, в котором эти единицы относятся к высоте шрифта элемента-родителя.
Пикселы являются единицами измерения, относящимися к разрешению дисплея компьютера. Если плотность пикселов на устройстве вывода сильно отличается от типового дисплея, браузер должен переопределить эту единицу. Новая единица, ссылочный пиксел, — это угол, под которым виден один пиксел монитора с плотностью 90dpi с расстояния вытянутой руки пользователя (28 дюймов).
В качестве значений цветов можно использовать зарезервированные ключевые слова HTML для определения наиболее употребительных цветовых оттенков (например, aqua, black, white и т. п.) или использовать цветовую модель RGB. Примеры способов задания цветовых оттенков приведены ниже:
Для задания URL-адреса ресурса используется функциональная запись url(. ):
Скобки, запятые, пробелы, одинарные и двойные кавычки в URL-адресе задаются с предшествующей обратной косой чертой (\), \ (, \,).
В каскадных таблицах стилей частичный URL-адрес интерпретируется относительно месторасположения таблицы стилей, а не относительно расположения документа.
Выбор подходящего шрифта для отдельных частей документа является од ним из наиболее часто выполняемых действий в процессе разработка HTML-документа. Шрифты различаются по своему внешнему виду (начертанию), по размеру, по стилю (прямой, курсив или наклонный) и п о «жирности» отображения (нормальный, полужирный). Каскадные табл ицы стилей предоставляют в распоряжение разработчика набор свойств для установки всех перечисленных параметров шрифтов. Кроме того, уровень 2 каскадных таблиц стилей позволяет загружать отсутствующие на компьютер! читателя шрифты непосредственно с сервера, на котором расположен документ.
Свойство font-family задает приоритетный список семейств шрифтов и/ ил и типовых семейств шрифтов. Если использовать для отображения страниц ы один определенный шрифт, то может оказаться, что этот шрифт не поддерживает некоторые символы, содержащиеся на странице, или на компьютере пользователя нет вообще этого шрифта. Для разрешения подобных проблем это свойство позволяет разработчику страницы задать список шрифтов одного стиля и размера, среди которых браузер может искать необходимы й символ. В отличие от других свойств каскадных таблиц стилей назван ия семейств в списке отделяются запятыми, чтобы показать их альтернативность:
При интерпретации HTML-страницы браузер сначала ищет на компьютере пользователя шрифт TimesDL. Если такой шрифт отсутствует, то браузер пытается применить шрифт Times New, а если и он не найден, то используется любой шрифт из семейства шрифтов serif— одного из типовых семейств шрифтов компьютера.
Понятие типовых семейств шрифтов введено в каскадные таблицы стилей с целью реализации наихудшего варианта отображения страницы, если не найдены специально использованные автором шрифты. В любой реализации каскадных таблиц стилей должны существовать пять типовых семейств шрифтов, которые соответствуют реальным шрифтам, обычно устанавливаемым на большинстве компьютеров:
имена шрифтов, состоящих из нескольких слов, должны заключаться в кавычки:
Следует использовать кавычки разных типов при задании последовательности всех определяемых свойств в параметре STYLE и при задании имени шрифта в свойстве font-family.
Свойство font-style определяет стиль шрифта из выбранного семейства: нормальный (normal), курсивный (italic) или наклонный (oblique).
Нормальный шрифт — это обычный прямой шрифт, используемый для печати документов. Курсивный стиль шрифта напоминает каллиграфические этюды в прописях первоклассников и близок к рукописному. Наклонные шрифты генерируются из обычных прямых шрифтов небольшим наклоном символов.
Обычно в базе шрифтов браузера все шрифты, в именах которых встречаются слова Oblique, Slanted или Incline отмечены как наклонные (oblique) шрифты. Шрифты, в названиях которых присутствуют слова Italic, Cursive или Kursiv, отождествляются браузером с курсивными (italic).
Следующие правила определяют курсивный стиль шрифта заголовка первого уровня и нормальный, прямой шрифт выделенных частей заголовка:
Каскадные таблицы стилей реализуют еще одну вариацию шрифта выбранного семейства — капитель (small-caps). В шрифте этого стиля все строчные буквы выглядят как прописные, но меньшего размера и с немного измененными пропорциями.
Значение normal свойства font-variant не изменяет вида шрифта, а значение small-caps выбирает вариант капитель шрифта. Рекомендации по каскадным таблицам стилей допускают создание шрифта капитель простой заменой строчных букв масштабированными символами верхнего регистра.
Следующие правила задают отображение заголовка четвертого уровня капителью с наклонной капителью в выделенных частях:
Свойство font-variant наследуется элементом ЕМ от своего родителя — поэтому в приведенном примере выделенные части заголовка будут отображаться наклонной капителью.
Это свойство выбирает из заданного семейства шрифт определенной жирности. В рекомендациях регламентируется 9 градаций жирности шрифта, задаваемых числами 100, 200 и так далее до 900. Значение 100 соответствует самому «бледному» шрифту, тогда как 900 — самому «жирному».
Для задания нормального шрифта используется ключевое слово normal, что соответствует цифровому значению 400. Значение bold применяется для выбора общепринятого полужирного начертания шрифта и его цифровым эквивалентом является 700.
Выбор определенной градации жирности шрифта не означает, что в семействе существует шрифт с заданной жирностью. Единственное, что гарантируется, — это то, что шрифт с большим значением жирности не светлее предыдущего значения. Некоторые семейства имеют только две градации жирности: нормальную и полужирную.
Это свойство определяет размер шрифта. Его значение может быть абсолютным или относительным.
Абсолютное значение можно задать одним из следующих ключевых слов: xx-small, x-small, small, medium, large, x-large, xx-large, к оторые являются индексами в таблице размеров шрифтов, поддерживаемой браузером. Масштабирующий множитель соседних значений в уровне 1 каскадных таблицах стилей определялся как 1.5, а в уровне 2 его значение рекомендовано равным 1.2. Это означает, что шрифт размера large в 1.2 раза выше шрифта medium и в 1.2 ниже шрифта x-large. По умолчанию браузер использует значение medium.
Абсолютное значение можно задать и в виде абсолютного значения длины, например 10pt, но в этом случае высота шрифта не зависит от хранимой таблицы размеров шрифтов браузера.
Ключевые слова для задания относительного размера шрифта интерпретируются относительно таблицы размеров шрифтов и размера шрифта элемента-родителя. Возможными значениями могут быть: larger и smaller. Например, если родитель имеет размер шрифта medium, то значение larger сделает шрифт текущего элемента равным large.
Относительный размер шрифта можно задать также в процентах к размеру шрифта родителя или в относительных единицах длины:
Два последние правила для выделенного в абзаце элемента ЕМ определяют одинаковую высоту шрифта 12pt.
Основное назначение свойства font — установить в одном определении значения свойств font-style, font-variant, font-weight, font-size, line-height и font-family. Все значения перечисленных свойств задаются через пробелы в том порядке, как они перечислены выше. Первые три свойства могут не задаваться, что соответствует установке их значений в normal. Размер шрифта и высота строки (свойство line-height) задаются через косую черту. Элементы списка семейств шрифтов свойства font-family задаются через запятую:
В этом примере для абзаца задается наклонный шрифт Times Cyr высотой 12 пунктов. Высота строк — 14 пунктов. Если не найден шрифт Times Cyr, то применяется любой шрифт типового семейства serif.
Это свойство введено в каскадные таблицы стилей в рекомендациях уровня 2. Оно предназначено для задания семейства шрифта. Если указанный шрифт отсутствует на компьютере пользователя, то он загружается из сети по заданному вторым параметром URL-адресу:
Все свойства шрифтов являются наследуемыми и применяются ко всем элементам документа HTML.
Свойства этой категории определяют цвет и фон элемента. Фон можно задать в виде цвета или изображения. В случае изображения указывается его положение, как оно повторяется и фиксировано ли оно или прокручивается вместе с прокруткой содержимого окна браузера.
Для установки цвета текста элемента существует единственное свойство color. Его значением является цвет, задаваемый с помощью ключевых слов или rgb-функции:
Оба правила в примере устанавливают синий цвет текста соответствующих элементов.
Для установки параметров фона элемента существует несколько свойств, задающих значения индивидуальных параметров фона, и свойство background, в котором можно установить одновременно все значения параметров фона.
Цвет фона определяется значением свойства background-color, а изображение, используемое в качестве фона, задается свойством background-image. Начальным значением свойства background-color является transparent, которое определяет фон элемента как прозрачный. Значением свойства background-image является абсолютный или относительный адрес файла изображения, используемого в качестве фона. Если это свойство определено, то рекомендуется задать также и цвет фона, который будет использоваться в случае недоступности файла изображения.
В приведенном примере задается адрес файла изображения для фона тела документа и явно указывается отсутствие фона для абзацев документа.
Если фон задан в виде изображения, то свойство background-repeat определяет его повторяемость и способы повторяемости. Допустимыми значениями являются repeat (повторяемость и по вертикали, и по горизонтали), repeat-x и repeat-y (повторяемость соответственно по горизонтали или вертикали) и no-repeat (изображение не повторяется). В следующем примере
задается повторяемость изображения фона по вертикали.
Свойство background-attachment определяет, будет ли фон, на котором отображается документ, оставаться неподвижным при прокрутке содержимого окна браузера или он будет прокручиваться вместе с документом. В первом случае реализуется эффект перемещения содержимого окна над неподвижным рисунком. Значение fixed оставляет фон неподвижным, а значение scroll заставляет его перемещаться вместе с содержимым документа при прокрутке. Пример закрепленного в окне браузера изображения фона представлен ниже:
Свойство background-position определяет начальное положение изображения, используемого в качестве фона, в блоке содержимого элемента. Значением этого свойства являются координаты привязки определенных точек изображения и блока содержимого. их можно задавать в процентах, в абсолютных единицах длины, а также с использованием комбинаций ключевых значений.
Пара 0% 0% означает, что верхний левый угол изображения помещается в верхний левый угол блока содержимого элемента (это значение является значением по умолчанию). Пара 100% 100% размещает нижний правый угол изображения в нижний правый угол блока содержимого. Пара значений, отличных от указанных, например10% 80%, помещает точку изображения, расположенную на расстоянии в 10% ширины от левого края и в 80% высоты от верхнего края, в точно такую же точку блока содержимого элемента.
Пара абсолютных значений, например 10mm 10mm, размещает верхний левый угол изображения на 10 мм правее и на 10 мм ниже левого верхнего угла блока содержимого.
Ключевые значения и их допустимые комбинации вместе с эквивалентными числовыми значениями представлены в табл. 10.3.
Таблица 10.3. Допустимые комбинации ключевых значений