- •1. Структура web-документа. Вставка комментария.
- •2. Текст - логика и физика..
- •3. Форматирование Web-документа
- •Теги физического форматирования текста.
- •Логическая разметка текста.
- •Теги логического форматирования текста.
- •Полезные советы:
- •4. Организация ссылок. Правила записи ссылок Организация ссылок
- •Правила записи ссылок
- •Ссылки на документы различных типов
- •Ссылки на другие ресурсы Интернета
- •5. Списки нумерованные и маркированные. Списки определений Создание списков html страницы
- •Нумерованный список html страницы
- •Маркированный список html страницы
- •Многоуровненвый список html страницы
- •Списки определений html страницы
- •7. Встраивание изображений в web-документ. Выравнивание изображений. Задание размеров выводимого изображения. Отделение изображения от текста. Альтернативный текст
- •Выравнивание изображений.
- •Задание размеров выводимого изображения.
- •Отделение изображений от текста.
- •Рамки вокруг изображений.
- •Альтернативный текст.
- •8. . Использование изображения в качестве ссылки. Баннеры.
- •9. Графические форматы для web-документа
- •10. Таблицы. Создание простейших таблиц. Представление таблиц на странице.
- •11.Форматирование данных внутри таблицы.
- •12. Вложенные таблицы.
- •13. Объединение ячеек таблицы по горизонтали и по вертикали.
- •Объединение ячеек html таблицы по вертикали
- •14. Особенности построения таблицы. Отображение пустых ячеек в таблице. Выравнивание данных в столбцах таблицы Особенности построения html таблиц
- •Выравнивание данных в столбцах html таблицы
- •15. Фреймы. Сферы применения фреймов.
- •Сферы применения фреймов
- •16. Правила описания фреймов.
- •17. Особенности навигации при использовании фреймов. Взаимодействие между фреймами. Различие между фреймами и окнами браузера.
- •Взаимодействие между фреймами в html
- •18. Плавающие фреймы. Варианты их использования.
- •19. Карты-изображения. Графическое представление карты-изображения. Описание конфигурации карты-изображения. Средства создания карты-изображения.
- •20. Каскадные таблицы стилей. Встраивание таблицы стилей в документ.
- •21. Группирование и наследование.
- •22. Селекторы. Селектор class и Селектор id.
- •Пример 2. Использование классов c тегами
- •Пример 3. Использование классов c тегами
- •Теги Span и Div
- •Пример 2. Использование тега div
- •Селекторы id Параметр id задает уникальное имя элемента, которое используется для обращения к нему скриптов. Это позволяет управлять стилем элемента динамически. Синтаксис id селектора следующий.
- •Пример 3. Использование идентификатора id
- •23. Примеры применения контекстных селекторов.
- •24. Псевдоклассы. Псевдоклассы связей.
- •25. Модель форматирования. Блоковые элементы. Встроенные элементы.
- •26. Стилевые свойства форматирования текста.
- •27. Стилевые свойства для цвета и фона.
- •28. Блоки. Визуальное форматирование
- •2 9. Абсолютное, относительное и статическое форматирование.
- •30. Отображение списков.
21. Группирование и наследование.
При создании стиля для сайта, когда одновременно используется множество селекторов, возможно появление повторяющихся стилевых правил. Чтобы не повторять дважды одни и те же элементы, их можно сгруппировать для удобства представления и сокращения кода. В примере 17.1 показана обычная запись, здесь для каждого селектора приводится свой набор стилевых свойств. Пример 17.1. Стиль для каждого селектора
H1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 160%;
color: #003;
}
H2 { font-family: Arial, Helvetica, sans-serif;
font-size: 135%;
color: #333; }
H3 { font-family: Arial, Helvetica, sans-serif;
font-size: 120%;
color: #900;}
P { font-family: Times, serif;}
Из данного примера видно, что стиль для тегов заголовков содержит одинаковое значение font-family. Группирование как раз и позволяет установить одно свойство сразу для нескольких селекторов, как показано в примере 17.2.
Пример 17.2. Сгруппированные селекторы
H1, H2, H3 {
font-family: Arial, Helvetica, sans-serif;
}
H1 {
font-size: 160%;
color: #003;
}
H2 { font-size: 135%;
color: #333;}
H3 { font-size: 120%;
color: #900;}
В данном примере font-family единое для всех селекторов применяется сразу к нескольким тегам, а индивидуальные свойства уже добавляются к каждому селектору отдельно.
Селекторы группируются в виде списка тегов, разделенных между собой запятыми. В группу могут входить не только селекторы тегов, но также идентификаторы и классы. Общий синтаксис следующий.
Селектор 1, Селектор 2, ... Селектор N { Описание правил стиля }
При такой записи правила стиля применяются ко всем селекторам, перечисленным в одной группе.
Наследованием называется перенос правил форматирования для элементов, находящихся внутри других. Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются.
Разберем наследование на примере таблицы. Особенностью таблиц можно считать строгую иерархическую структуру тегов. Вначале следует контейнер <table> внутри которого добавляются теги <tr>, а затем идет тег <td>. Если в стилях для селектора TABLE задать цвет текста, то он автоматически устанавливается для содержимого ячеек, как показано в примере 18.1.
Пример 18.1. Наследование параметров цвета
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Наследование</title>
<style type="text/css">
TABLE {
color: red; /* Цвет текста */
background: #333; /* Цвет фона таблицы */
border: 2px solid red; /* Красная рамка вокруг таблицы */
}
</style>
</head>
<body>
<table cellpadding="4" cellspacing="0">
<tr>
<td>Ячейка 1</td><td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td><td>Ячейка 4</td>
</tr>
</table>
</body>
</html>
В данном примере для всей таблицы установлен красный цвет текста, поэтому в ячейках он также применяется, поскольку тег <td> наследует свойства тега <table>. При этом следует понимать, что не все стилевые свойства наследуются. Так, border задает рамку вокруг таблицы в целом, но никак не вокруг ячеек. Аналогично не наследуется значение свойства background. Тогда почему цвет фона у ячеек в данном примере темный, раз он не наследуется? Дело в том, что у свойства background в качестве значения по умолчанию выступает transparent, т.е. прозрачность. Таким образом цвет фона родительского элемента «проглядывает» сквозь дочерний элемент.
Чтобы определить, наследуется значение стилевого свойства или нет, требуется заглянуть в справочник по свойствам CSS и посмотреть там. Подключать свою интуицию в подобном случае бесполезно, может и подвести.
Наследование позволяет задавать значения некоторых свойств единожды, определяя их для родителей верхнего уровня. Допустим, требуется установить цвет и шрифт для основного текста. Достаточно воспользоваться селектором BODY, добавить для него желаемые свойства, и цвет текста внутри абзацев и других текстовых элементов поменяется автоматически (пример 18.2).
Пример 18.2. Параметры текста для всей веб-страницы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Наследование</title>
<style type="text/css">
BODY {
font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта */
color: navy; /* Синий цвет текста */
}
</style>
</head>
<body>
<p>Цвет текста этого абзаца синий.</p>
</body>
</html>
В данном примере рубленый шрифт и цвет текста абзацев устанавливается с помощью селектора BODY. Благодаря наследованию уже нет нужды задавать цвет для каждого элемента документа в отдельности. Однако бывают варианты, когда требуется все-таки изменить цвет для отдельного контейнера. В этом случае придется переопределять нужные параметры явно, как показано в примере 18.3.
Пример 18.3. Изменение свойств наследуемого элемента
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Наследование</title>
<style type="text/css">
BODY {
font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта */
color: navy; /* Синий цвет текста */
}
P.red {
color: maroon; /* Темно-красный цвет текста */
}
</style>
</head>
<body>
<p>Цвет текста этого абзаца синий.</p>
<p class="red">А у этого абзаца цвет текста уже другой.</p>
</body>
</html>
В данном примере цвет первого абзаца наследуется от селектора BODY, а для второго установлен явно через класс с именем red.