- •2.3.6. Связи между html-документами
- •2.3.8. Тело документа
- •2.4. Форматирование текста
- •2.4.1. Тэги уровня блока и последовательные тэги
- •2.4.2. Физические стили
- •2.4.3. Параметры шрифта
- •2.4.4. Разделение текста на абзацы
- •2.4.5. Логические стили
- •2.4.7. Комментарии
- •2.4.8. Специальные символы
- •2.5. Списки
- •2.5.1. Маркированные списки
- •2.5.2. Нумерованные списки
- •2.5.3. Списки определений
- •2.6. Организация гиперссылок
- •2.6.1. Относительные ссылки
- •2.6.2. Абсолютные ссылки
- •2.6.3. Внутренние ссылки (анкера)
- •2.6.4. Ссылки на другие виды ресурсов
- •2.7. Изображения
- •2.8. Цветовая гамма
- •2.9. Таблицы
- •2.10. Фреймы
- •2.11. Формы
- •2.11.1. Назначение форм
- •2.11.2. Синтаксис формы
- •2.11.3. Взаимодействие между браузером и web-сервером
- •2.11.4. Mime-типы
- •2.11.5. Url-кодирование
- •2.11.6. Методы передачи данных
- •2.11.7. Поля ввода формы
- •3.1. Таблицы стилей css
- •3.1.1. Логическое и физическое форматирование
- •3.1.2. Понятие стиля, таблицы стилей и css
- •3.1.3. Правила css
- •3.2. Связывание html с css
- •3.2.1. Встраивание css в html
- •3.2.2. Внедрение таблицы стилей
- •3.2.3. Связывание таблицы стилей
- •3.2.4. Импорт таблицы стилей
- •3.3. Приоритеты использования таблиц стилей
- •3.4. Группирование
- •3.5. Наследование
- •3.3. Селекторы
- •3.3.1. Селектор class
- •3.3.2. Селектор id
- •3.4. Функции таблиц стилей
- •3.5. Объектная модель документа
- •3.5.1. Структура документа
- •3.5.2. Функции объектной модели документа
- •3.6.1. Проблема http-соединения
- •3.6.2. Назначение cookie
- •3.6.3. Формат cookie
3.2.3. Связывание таблицы стилей
Связывание позволяет хранить таблицу стилей в отдельном файле и присоединять ее к документам с помощью тэга <link>, задаваемого в разделе <head>:
<link rel="stylesheet" type="text/css" href="mystyles.css"/>
В этой строке указывается, что связываемый файл является таблицей стилей (rel="stylesheet"), формат этого файла – .css1 (type="text/css") и находится он в той же директории, что и файл html, либо имеет другой URL-адрес (href="mystyles.css").
Эта строка может быть указана в любом html-файле. Таким образом, единое оформление будет использовано для нескольких страниц.
При этом вся таблица стилей хранится в одном файле (расширение файла должно быть стандартным – .css).
Пример CSS-файла:
body {
font-family: 'Times New Roman';
font-size: 12pt;
color: green;
}
h1 {
font-family: Arial;
font-size: 16pt;
color: blue;
font-weight: bold;
}
h2 {
font-family: Helvetica;
font-size: 14pt;
color: yellow;
font-weight: bold;
font-style: italic;
}
Тэги <style> и </style> внутри файла таблицы стилей не используются – расширение .css явно указывает браузеру на то, что файл является таблицей стилей. Один такой файл может быть связан сразу с несколькими страницами (или импортирован сразу в несколько страниц).
3.2.4. Импорт таблицы стилей
Для импортирования файла таблицы стилей (в том числе с другого сервера) необходимо указать в заголовке HTML-файла между тегами <head> и </head> внутри тега-контейнера <style> следующую строку:
<head>
...
<style>
...
@import: url (my.css);
...
</style>
...
</head>
Помимо адреса импортируемой таблицы стилей, в теге-контейнере <style> можно указать любые правила CSS, которые будут дополнять или корректировать правила, заданные в импортируемой таблице – внедренные правила.
3.3. Приоритеты использования таблиц стилей
Браузер расставляет приоритеты таблиц стилей следующим образом:
встроенные (inline-) стили (встроенные с помощью атрибута style непосредственно в теги документа) – наивысший приоритет. Будут применены браузером в любом случае, даже если возникает конфликт с внедренными или внешними стилями;
внедренные стили (перечисленные в теге-контейнере <style> в заголовке документа) – чуть меньший приоритет, будут применяться во всех случаях, кроме случаев возникновения конфликта с inline-стилями (при возникновении такого конфликта будут применены inline-стили);
импортированные стили (стили внешнего файла .css, связанные с документом с помощью свойства @import в теге-контейнере <style>) – будут применяться в тех случаях, когда отсутствуют аналогичные правила CSS среди встроенных и внедренных стилей;
связанные стили (стили, присоединенные к html-файлу посредством тега <link>) – наименьший приоритет, будут применены только после того, как браузер убедится в отсутствии аналогичных правил во всех остальных типах стилей.
3.4. Группирование
Правила каскадных таблиц стилей состоят из селектора и определения. Для уменьшения размеров таблиц стилей можно группировать разные селекторы в виде списка элементов страницы 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}
При задании таблицы стилей можно свободно комбинировать все три правила группирования для уменьшения ее размеров.