Опубликован: 02.03.2009 | Уровень: для всех | Доступ: платный | ВУЗ: Волгоградский государственный университет
Лекция 3:

DHTML

< Лекция 2 || Лекция 3: 123 || Лекция 4 >

Приоритеты использования таблиц стилей

Браузер расставляет приоритеты таблиц стилей следующим образом:

  1. встроенные ( inline -) стили (встроенные с помощью атрибута style непосредственно в теги документа) – наивысший приоритет. Будут применены браузером в любом случае, даже если возникает конфликт с внедренными или внешними стилями;
  2. внедренные стили (перечисленные в теге-контейнере <style> в заголовке документа) – чуть меньший приоритет, будут применяться во всех случаях, кроме случаев возникновения конфликта с inline -стилями (при возникновении такого конфликта будут применены inline -стили);
  3. импортированные стили (стили внешнего файла .css, связанные с документом с помощью свойства @import в теге-контейнере <style> ) – будут применяться в тех случаях, когда отсутствуют аналогичные правила CSS среди встроенных и внедренных стилей;
  4. связанные стили (стили, присоединенные к 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 обеспечивает поддержку следующих функций таблиц стилей:

  1. Гибкое размещение информации о стиле. Помещение таблиц стилей в отдельные файлы упрощает их повторное использование. Иногда полезно включать инструкции по представлению в документ, к которому они применяются, в начало документа или в атрибуты элементов в теле документа.
  2. Независимость от языков таблиц стилей. HTML не привязан к конкретному языку таблиц стилей. Это позволяет использовать широкий диапазон таких языков, например, простые языки для большинства пользователей и более сложные для более специализированных случаев. Во всех примерах, приведенных ниже, используется язык CSS1 (Cascade Style Sheets), но можно использовать и другие языки.
  3. Каскады. Эта возможность обеспечивается некоторыми языками таблиц стилей, такими как CSS, для объединения информации о стиле из нескольких источников. Это может быть, например, корпоративные положения о стиле, стили, общие для группы документов, а также стили, специфичные для одного документа. С использованием раздельного хранения эти таблицы стилей могут использоваться повторно, что упрощает работу авторов и повышает эффективность сетевого кэширования. Каскад определяет упорядоченную последовательность таблиц стилей, в которой правила более поздних таблиц имеют приоритет над более ранними. Не все языки таблиц стилей поддерживают каскады.
  4. Зависимость от устройств. HTML позволяет авторам разрабатывать документы независимые от устройств. Это позволяет пользователям обращаться к Web-страницам с использованием различных устройств ,например, графических дисплеев для компьютеров под управлением различных ОС, телевизионных устройств, телефонов и портативных устройств на базе PDA, речевых браузеров и тактильных устройств на базе азбуки Бройля.

    Таблица стилей, напротив, применяются к конкретным устройствам или группам устройств. Языки таблиц стилей могут включать функции описания зависимости от устройств в одной таблице.

  5. Альтернативные стили. Авторы могут предлагать читателям несколько способов просмотра документа. Например, таблица стилей для представления компактных документов с мелким шрифтом, или таблица, задающая крупные шрифты для удобства чтения. Автор может указать предпочитаемую таблицу стилей, а также альтернативные таблицы для определенных пользователей или устройств. Агенты пользователей должны предоставлять пользователям возможность выбора одной из альтернативных таблиц или отключать все таблицы стилей.
  6. Вопросы производительности. Загрузка внешней таблицы стилей может привести к задержке общего представления материала для пользователя. Подобные ситуации возникают и в том случае, если в заголовок документа включен длинный набор правил относительно стиля. При использовании общей таблицы стилей для группы документов снижение производительности произойдет только для первого документа, а для остальных документов таблицы стилей уже будет находиться в локальном кэше.
< Лекция 2 || Лекция 3: 123 || Лекция 4 >
Борис Селезнёв
Борис Селезнёв
Россия, Санкт-Петербург
Alex James
Alex James
Соединенные Штаты