Инспектор
Спонсор: Microsoft
Вы можете этот курс.
Опубликован: 02.03.2009 | Уровень: для всех | Доступ: платный | ВУЗ: Волгоградский государственный университет
Лекция 3:
DHTML
Приоритеты использования таблиц стилей
Браузер расставляет приоритеты таблиц стилей следующим образом:
- встроенные ( inline -) стили (встроенные с помощью атрибута style непосредственно в теги документа) – наивысший приоритет. Будут применены браузером в любом случае, даже если возникает конфликт с внедренными или внешними стилями;
- внедренные стили (перечисленные в теге-контейнере <style> в заголовке документа) – чуть меньший приоритет, будут применяться во всех случаях, кроме случаев возникновения конфликта с inline -стилями (при возникновении такого конфликта будут применены inline -стили);
- импортированные стили (стили внешнего файла .css, связанные с документом с помощью свойства @import в теге-контейнере <style> ) – будут применяться в тех случаях, когда отсутствуют аналогичные правила CSS среди встроенных и внедренных стилей;
- связанные стили (стили, присоединенные к html-файлу посредством тега <link> ) – наименьший приоритет, будут применены только после того, как браузер убедится в отсутствии аналогичных правил во всех остальных типах стилей.
Группирование
Правила каскадных таблиц стилей состоят из селектора и определения. Для уменьшения размеров таблиц стилей можно группировать разные селекторы в виде списка элементов страницы HTML, разделенных запятыми, если для них задается одно правило. Например, следующие правила:
h1 {font-family: Arial}
h2 {font-family: Arial}
h3 {font-family: Arial}можно сгруппировать и задать в виде одного правила со списком селекторов:
h1,h2,h3 {font-family: Arial}Аналогично группируются определения, только в списке они разделяются точками с запятой ( ; ). Следующие правила форматирования заголовка первого уровня:
h1 {font-weight: bold}
h1 {font-size: 14pt}
h1 {font-family: Arial}можно задать в виде одного правила, сгруппировав определения:
h1 {font-weight: bold; font-size: 14pt; font-family: Arial}Некоторые свойства имеют собственный синтаксис группирования, связанный с заданием значений нескольких свойств в одном. Например, предыдущий пример при использовании свойства font запишется так:
h1 {font: bold 14pt Arial}При задании таблицы стилей можно свободно комбинировать все три правила группирования для уменьшения ее размеров.
Наследование
В HTML некоторые элементы могут содержать другие. Рассмотрим элемент, расположенный внутри другого элемента страницы, если для последнего задано правило форматирования, а для вложенного элемента нет.
Например, пусть цвет шрифта абзаца определен как синий ( p {color:blue} ). Рассмотрим выделенный элемент текста, задаваемый тэгом <em>, если для него не определено правило форматирования.
В подобных случаях вложенный элемент наследует правила форматирования элемента-родителя.
Наследование полезно при задании значений свойств, применяемых к документу по умолчанию. Для этого достаточно задать все свойства для элемента, порождающего все остальные элементы страницы HTML. Таким элементом является тело документа, определяемое тэгом <body>:
body {
color: black;
font-family: "Times New Roman";
background: url(texture.gif) white;
}Селекторы
Правила каскадных таблиц стилей, в которых в качестве селектора используются тэги HTML, влияют на отображение всех элементов заданного типа в документе. Следующее правило отображает без подчеркивания все ссылки (тэг <a> ) в документе:
<style type="text/css">
<!- a { text-decoration: none; }
-->
</style>Если необходимо некоторые ссылки отобразить по-другому, то можно задать для них правило форматирования непосредственно в тэге, а можно применить параметр class, добавленный в HTML 4.0 в качестве стандарта для всех тэгов. Значением параметра class является ссылка на класс, задаваемый в таблице стилей.
Селектор class
В одной таблице стилей можно создать два и более различных класса одинаковых элементов с помощью селектора класса. К этим классам элементов можно затем будет применить различные таблицы стилей.
Пример. Необходимо создать страницу, на которой будет два вида абзацев <p>, причем оба вида будут постоянно чередоваться и часто повторяться. Типичный пример такой страницы – интервью, в котором чередуются вопросы журналиста и ответы интервьюируемого. При создании такой страницы необходимо визуально отделить вопросы и ответы друг от друга.
<head>
<title>Интервью</title>
<style>
p.ask {
font-style: italic;
font-weight: bold;
font-family: Arial, sans-serif;
font-size: 10pt;
color: gray;
margin-left: 15px
}
p.answer {
font-family: 'Times New Roman', serif;
font-size: 12 pt; color: black;
}
</style>
</head>
<body>
<p class="ask">Вопрос</p>
<p class="answer">Ответ</p>
</body>Селектор id
Параметр id, как и параметр class, не влияет на отображение браузером элемента HTML, но он задает уникальное имя элемента, которое используется для ссылок на него в сценариях и таблицах стилей. Параметр id можно применять к любому элементу документа.
Правила таблиц стилей регламентируют использование уникального идентификационного имени элемента в качестве селектора, предваряя его символом #:
<head>
<title>Демо</title>
<style type="text/css">
<!- #par24 { letter-spacing: lem; }
h1#form3 { color: red; background-color: blue}
-->
</style>
</head>
<body>
<p id="par24">Разреженные слова в абзаце</p>
<h1 id="form2">Черный шрифт</h1>
</body>В этом примере абзац идентифицирован именем par24 в параметре id, поэтому к нему применимо правило с селектором #par24. Второе правило в таблице стилей должно применяться к заголовку первого уровня с идентификатором form3. Такого элемента в нашем фрагменте нет, и поэтому заголовок form2 отображается с применением правила по умолчанию.
Функции таблиц стилей
Таблицы стилей предназначены, в первую очередь, для того, чтобы отделить содержимое web-страницы от ее оформления.
HTML 4.0 обеспечивает поддержку следующих функций таблиц стилей:
- Гибкое размещение информации о стиле. Помещение таблиц стилей в отдельные файлы упрощает их повторное использование. Иногда полезно включать инструкции по представлению в документ, к которому они применяются, в начало документа или в атрибуты элементов в теле документа.
- Независимость от языков таблиц стилей. HTML не привязан к конкретному языку таблиц стилей. Это позволяет использовать широкий диапазон таких языков, например, простые языки для большинства пользователей и более сложные для более специализированных случаев. Во всех примерах, приведенных ниже, используется язык CSS1 (Cascade Style Sheets), но можно использовать и другие языки.
- Каскады. Эта возможность обеспечивается некоторыми языками таблиц стилей, такими как CSS, для объединения информации о стиле из нескольких источников. Это может быть, например, корпоративные положения о стиле, стили, общие для группы документов, а также стили, специфичные для одного документа. С использованием раздельного хранения эти таблицы стилей могут использоваться повторно, что упрощает работу авторов и повышает эффективность сетевого кэширования. Каскад определяет упорядоченную последовательность таблиц стилей, в которой правила более поздних таблиц имеют приоритет над более ранними. Не все языки таблиц стилей поддерживают каскады.
- Зависимость от устройств. HTML позволяет авторам разрабатывать документы независимые от устройств. Это позволяет пользователям обращаться к Web-страницам с использованием различных устройств ,например, графических дисплеев для компьютеров под управлением различных ОС, телевизионных устройств, телефонов и портативных устройств на базе PDA, речевых браузеров и тактильных устройств на базе азбуки Бройля.
Таблица стилей, напротив, применяются к конкретным устройствам или группам устройств. Языки таблиц стилей могут включать функции описания зависимости от устройств в одной таблице.
- Альтернативные стили. Авторы могут предлагать читателям несколько способов просмотра документа. Например, таблица стилей для представления компактных документов с мелким шрифтом, или таблица, задающая крупные шрифты для удобства чтения. Автор может указать предпочитаемую таблицу стилей, а также альтернативные таблицы для определенных пользователей или устройств. Агенты пользователей должны предоставлять пользователям возможность выбора одной из альтернативных таблиц или отключать все таблицы стилей.
- Вопросы производительности. Загрузка внешней таблицы стилей может привести к задержке общего представления материала для пользователя. Подобные ситуации возникают и в том случае, если в заголовок документа включен длинный набор правил относительно стиля. При использовании общей таблицы стилей для группы документов снижение производительности произойдет только для первого документа, а для остальных документов таблицы стилей уже будет находиться в локальном кэше.
