HTML: Популярный самоучитель
Добавить в закладки К обложке
- Введение - Страница 1
- Глава 1Введение в HTML - Страница 2
- 1.1. Краткая история HTML - Страница 3
- 1.2. Базовые понятия HTML - Страница 4
- Элементы - Страница 5
- Атрибуты - Страница 6
- Вложенные элементы - Страница 7
- Блочные и встроенные элементы - Страница 8
- 1.3. Просмотр HTML-документа - Страница 9
- 1.4. Универсальный идентификатор ресурса URI - Страница 10
- Глава 2Структура HTML-документа - Страница 11
- 2.1. Информация о версии HTML - Страница 12
- 2.2. Элемент HTML - Страница 13
- 2.3. Заголовок - Страница 14
- Элемент HEAD - Страница 15
- Элемент TITLE - Страница 16
- Элемент BASE - Страница 17
- Метаданные - Страница 18
- 2.4. Тело HTML-документа - Страница 19
- Глава 3Текст - Страница 20
- 3.1. Особенности ввода текста - Страница 21
- 3.2. Форматирование текста - Страница 22
- Задание начертания текста - Страница 23
- Задание шрифта текста - Страница 24
- Задание выравнивания текста - Страница 25
- Сохранение авторского форматирования - Страница 26
- Запрет разрыва строки - Страница 27
- Переносы - Страница 28
- Обтекание текстом нетекстовых элементов - Страница 29
- 3.3. Структурирование текста - Страница 30
- Разбиение на абзацы - Страница 31
- Заголовки - Страница 32
- Задание типов фраз - Страница 33
- Цитаты - Страница 34
- Указание изменений в документе - Страница 35
- Контактная информация - Страница 36
- 3.4. Комментарии в HTML-коде - Страница 37
- Глава 4Списки - Страница 38
- 4.1. Маркированные списки - Страница 39
- 4.2. Нумерованные списки - Страница 40
- 4.3. Списки определений - Страница 41
- 4.4. Создание вложенных списков - Страница 42
- Глава 5Гиперссылки - Страница 43
- 5.1. Простой переход к ресурсам - Страница 44
- Навигация между HTML-документами - Страница 45
- Загрузка файлов - Страница 46
- Ссылки на другие службы - Страница 47
- 5.2. Навигация в пределах документа - Страница 48
- 5.3. Прочие атрибуты гиперссылок - Страница 49
- Глава 6Линейки, изображения, внедренные объекты - Страница 50
- 6.1. Линейки - Страница 51
- 6.2. Изображения - Страница 52
- Изображения-гиперссылки - Страница 53
- Изображения-карты - Страница 54
- 6.3. Добавление фоновой музыки - Страница 56
- 6.4. Простое проигрывание видео - Страница 57
- 6.5. Внедрение объектов - Страница 58
- Глава 7Таблицы - Страница 60
- 7.1. Структура простейшей таблицы - Страница 61
- 7.2. Элементы таблицы - Страница 62
- Заголовок таблицы - Страница 63
- Параметры отображения таблицы - Страница 64
- Параметры отображения строк таблицы - Страница 65
- Параметры отображения ячеек. Слияние ячеек - Страница 66
- Ячейки заголовков - Страница 67
- 7.3. Структурирование таблицы - Страница 68
- Группировка строк - Страница 69
- Описание и группировка столбцов - Страница 70
- Особенности задания ширины столбцов - Страница 73
- 7.4. Использование таблиц для формирования дизайна HTML-документа - Страница 74
- Глава 8Фреймы - Страница 76
- 8.1. Понятие фрейма - Страница 77
- 8.2. Создание набора фреймов - Страница 78
- 8.3. Новые возможности гиперссылок - Страница 79
- Целевой фрейм отдельных гиперссылок - Страница 80
- Целевой фрейм по умолчанию - Страница 82
- 8.4. Элемент NOFRAMES - Страница 83
- 8.5. Плавающие фреймы - Страница 84
- 8.6. Замена фреймов внедренными HTML-документами - Страница 85
- Глава 9Формы - Страница 86
- 9.1. Создание формы - Страница 87
- 9.2. Элементы управления формы - Страница 88
- Стандартные элементы управления - Страница 89
- Многострочное текстовое поле - Страница 91
- Снова кнопки - Страница 92
- Меню - Страница 93
- Подписи элементов управления - Страница 95
- 9.3. Группировка элементов управления - Страница 96
- Глава 10Введение в CSS - Страница 97
- 10.1. Возможности CSS - Страница 98
- 10.2. Внешние и встроенные таблицы стилей - Страница 99
- 10.3. Записи таблицы стилей - Страница 100
- Правила отображения HTML-элементов - Страница 101
- Использование стилевых классов - Страница 102
- Задание отображения единичных элементов документа - Страница 103
- Контекстные селекторы - Страница 104
- Комментарии в таблице стилей - Страница 105
- 10.4. Порядок применения стилей - Страница 106
- 10.5. Единицы измерения CSS - Страница 108
- Линейный размер и положение - Страница 109
- Цвета - Страница 110
- 10.6. Скрытие таблиц стилей - Страница 111
- Глава 11Использование таблиц стилей - Страница 112
- 11.1. Шрифт - Страница 113
- 11.2. Стиль текста - Страница 114
- 11.3. Cписки - Страница 116
- 11.4. Границы - Страница 117
- 11.5. Поля и отступы - Страница 119
- 11.6. Цвет и фон - Страница 120
- 11.7. Свободное позиционирование - Страница 122
- 11.8. Использование элементов DIV и SPAN - Страница 124
- 11.9. Псевдоклассы гиперссылок - Страница 125
- 11.10. Псевдоклассы текста - Страница 126
- 11.11. Создание CSS для различных устройств - Страница 127
- Глава 12Краткий курс JavaScript - Страница 128
- 12.1. Замечание о строках кода JavaScript - Страница 129
- 12.2. Комментарии - Страница 130
- 12.3. Типы данных, переменные, выражения - Страница 131
- 12.4. Простые и составные операторы - Страница 132
- 12.5. Операторы языка JavaScript - Страница 133
- Логические операторы и операторы сравнения - Страница 134
- Двоичные операторы - Страница 135
- Приоритет операторов - Страница 136
- Условные операторы - Страница 137
- Циклы - Страница 138
- Операторы break и continue - Страница 139
- Оператор запятая - Страница 140
- 12.6. Функции - Страница 141
- Пользовательские функции - Страница 142
- Встроенные функции JavaScript - Страница 143
- Глобальные и локальные переменные - Страница 144
- Ссылки на функции - Страница 145
- 12.7. Массивы - Страница 146
- 12.8. Работа с объектами - Страница 147
- Понятие объекта. Свойства и методы - Страница 148
- Встроенные классы JavaScript - Страница 149
- 12.9. Взаимодействие с пользователем - Страница 151
- 12.10. Поиск ошибок в программе - Страница 152
- Глава 13Динамический HTML - Страница 153
- 13.1. Основы использования сценариев в HTML-документе - Страница 154
- Скрытие сценария - Страница 155
- 13.2. Исполнение сценария - Страница 156
- Исполнение при загрузке документа - Страница 157
- Реакция на события - Страница 158
- 13.3. Объектная модель документа - Страница 159
- Объект document - Страница 160
- Объект navigator - Страница 164
- Объект window - Страница 165
- Объект style - Страница 167
- Объект screen - Страница 172
- Объект event - Страница 173
- Глава 14Создаем настоящий веб-сайт - Страница 175
- 14.1. Содержание сайта - Страница 176
- 14.2. Навигация по сайту - Страница 177
- 14.3. Расположение файлов - Страница 178
- 14.4. Реализация сайта - Страница 179
- Реализация меню - Страница 180
- Разворачивающиеся абзацы - Страница 185
- Прочие сценарии - Страница 186
- Используемые таблицы стилей - Страница 187
- 14.5. Примеры работы сайта - Страница 188
- Глава 15Публикация сайта в Интернете - Страница 189
- 15.1. Ищем место для сайта - Страница 190
- 15.2. Доменное имя для сайта - Страница 191
- 15.3. Проблема стартовой страницы - Страница 192
- 15.4. Администрирование сайта - Страница 193
- Использование форм - Страница 194
- Использование Проводника Windows - Страница 195
- 15.5. Увеличение посещаемости сайта - Страница 196
- Заключение - Страница 197
- Приложение 1Именованные ссылки на символы - Страница 198
- Приложение 2Свойства CSS - Страница 199
- Приложение 3Названия основных цветов - Страница 200
Использование стилевых классов
Второй способ применения таблиц стилей основан на использовании стилевых классов. Рассмотрим это на примере:
H1.arial {color: red; font-family: arial}
H2.newroman {color: blue; font-family: newroman}
P.italic {font-style: italic}
.bold {font-weight: bold}
Здесь созданные в таблице стилей селекторы указывают на четыре стилевых класса с именами arial, newroman, italic, bold. Перые три правила могут использоваться только для HTML‑элементов H1, H2 и P, для которых заданы стилевые классы arial, newroman и italic соответственно. Четвертый селектор позволяет применить правило к любому элементу, стилевой класс которого указан как bold.
Назначение стилевого класса HTML‑элементу осуществляется при помощи атрибута class. Этот атрибут поддерживается для всех элементов, кроме BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE.
Рассмотрим пример использования стилевых классов (пример 10.2).
Пример 10.2. Использование стилевых классов<HTML>
<HEAD>
<TITLE>Использование стилевых классов</TITLE>
<!– Определение таблицы стилей–>
<STYLE type = "text/css">
H1.arial {color: red; font-family: arial}
H2.newroman {color: blue; font-family: newroman}
P.italic {font-style: italic}
.bold {font-weight: bold}
</STYLE>
</HEAD>
<BODY>
<H1>Заголовок первого уровня</H1>
<P>Текст абзаца
<H1 class = "arial">Измененный заголовок первого уровня</H1>
<H2>Заголовок второго уровня</H2>
<P class = "italic">Курсивный текст абзаца
<H2 class = "newroman">Измененный заголовок второго уровня</H2>
<P class = "bold">Полужирный текст абзаца
</BODY>
</HTML>
Страница, формируемая браузером Internet Explorer при обработке приведенного примера, показана на рис. 10.2.

Рис. 10.2. Использование стилевых классов
Как можно увидеть, для использования стилевых классов нужно немного больше поработать над содержимым HTML‑документа, назначая нужным элементам значения атрибутов class. При этом доступно гораздо больше возможностей по оформлению документа: например, может быть недостаточно одного и того же цвета абзацев, одинакового выравнивания или шрифта текста. Есть еще множество случаев, когда удобнее создать некоторое количество стилевых классов, а не задавать CSS‑свойства одинаковых HTML‑элементов, как это сделано в примере 10.1.
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200