- •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.1. Встраивание css в html
CSS позволяют назначить собственный стиль визуального представления любому тегу HTML, в том числе тегу <body>. Если стиль задан для тега <body>, он наследуется всеми элементами (абзацами, заголовками и т. д.), помещенными внутри этого тега-контейнера, в случае отсутствия собственных стилей для этих элементов. Таким образом, нет необходимости прописывать теги <font> и атрибуты color, size и т. п. для каждого абзаца на странице – достаточно задать стиль для тега <body>, и все абзацы на странице будут отображены в соответствии с этим стилем.
Пример. Необходимо, чтобы все абзацы отображались шрифтом Times New Roman размером 12 пунктов зеленого цвета. Для этого следует указать атрибут style тега <body>, присвоив ему соответствующее значение:
<body style="font-family: 'Times New Roman'; font-size: 12pt; color: green">
В примере используется встраивание стиля непосредственно в тег документа – так называемый inline-стиль. Этот способ связывания CSS с HTML-файлом рекомендуется в единичных случаях – если данный стиль планируется применить только к одному элементу только на одной странице сайта. Если же стиль должен быть применен к нескольким элементам на одной странице или к нескольким страницам сразу, рекомендуются другие способы связывания CSS и HTML.
3.2.2. Внедрение таблицы стилей
Для применения одинакового форматирования к нескольким одинаковым элементам станицы необходимо создать в заголовке страницы (в любом месте между тегами <head> и </head>) внедренную таблицу стилей, в которой задаются требуемые правила оформления. Для этого создается тег-контейнер таблицы стилей, начинающийся открывающим тегом <style> и заканчивающийся закрывающим тегом </style>. Внутри этого тега-контейнера можно задать любое количество правил CSS, состоящих из селектора (названия тега HTML, к которому будет применяться правило) и его определения (непосредственно набора средств форматирования), заключенного в фигурные скобки.
Пример. Необходимо, чтобы все абзацы на странице выглядели, как в предыдущем примере, все заголовки первого уровня отображались шрифтом Arial синего цвета полужирного начертания размером 16 пунктов, а все заголовки второго уровня – шрифтом Helvetica размером 14 пунктов полужирного курсивного начертания желтого цвета.
<head>
...
<style>
<!--
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>
...
</head>
Этот способ связывания CSS и HTML называется внедрением. Его рекомендуется применять в тех случаях, когда необходимо задать какой-либо набор правил форматирования только для одной страницы сайта, а все остальные страницы должны выглядеть по-другому.
Обычно браузеры, не поддерживающие какие-либо тэги, игнорируют их, интерпретируя, однако, их содержимое в том виде, в каком оно задано, что может приводить к ошибкам. Поэтому, как обычно, следует задавать содержимое тэгов, которые потенциально не обрабатываются старыми версиями браузеров, заключенным в тэг комментария <!--…-->.