- •3. Создание статического содержания. Css
- •3.1. Таблицы стилей css
- •3.1.1. Общее описание
- •3.1.2. Добавление css
- •3.1.2.1. Таблица связанных стилей
- •3.1.2.2. Таблица глобальных стилей
- •3.1.2.3. Внутренние стили
- •3.1.3. Базовый синтаксис
- •3.1.4. Селекторы тегов
- •3.1.4.1. Классы
- •3.1.4.2. Идентификаторы
- •3.1.4.3. Контекстные селекторы
- •3.1.4.4. Соседние селекторы
- •3.1.4.5. Дочерние селекторы
- •3.1.4.6. Селекторы атрибутов
- •3.1.4.7. Универсальный селектор
- •3.1.4.8. Группирование
- •3.1.5. Наследование
- •3.1.6. Псевдоклассы
- •3.1.6.1. Псевдоклассы, определяющие состояние элементов
- •3.1.6.2. Псевдоклассы, имеющие отношение к дереву документа
- •3.1.7. Псевдоэлементы
- •3.1.8. Элементы css
- •3.1.8.1. Текст
- •3.1.8.2. Цвет
- •3.1.8.4. Ссылки
- •3.1.8.5. Списки
- •3.1.8.6. Единицы измерения
- •Самой, пожалуй, распространенной единицей является пункт, который используется для указания размера шрифта
- •3.1.9. Пример использования css
- •3.1.10. Ключевые термины
- •3.2. Дополнительная тема: регистрация доменов
- •3.2.1. Общие сведения
- •3.2.2. Регистрация домена
- •3.2.4. Управление доменной зоной
- •3.2.5. Ключевые термины
3.1.2. Добавление css
Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрены способы подключения CSS [2, 5].
3.1.2.1. Таблица связанных стилей
При использовании таблицы связанных стилей описание селекторов и их свойств располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <LINK> [5]. Данный тег помещается в контейнер <HEAD>.
Пример подключения таблицы связанных стилей:
…
<head>
…
<link rel="stylesheet" type="text/css" href="mysite.css">
<link rel="stylesheet" type="text/css" href="http://www.htmlbook.ru/main.css">
…
</head>
…
Значения параметров тега <LINK> – rel и type остаются неизменными, как приведено в данном примере. Параметр href задает путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте.
3.1.2.2. Таблица глобальных стилей
При использовании таблицы глобальных стилей свойства CSS описываются в самом документе и обычно располагаются в заголовке веб-страницы [5]. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа, с помощью контейнера <STYLE>.
Пример использования таблицы глобальных стилей:
…
<head>
…
<style type="text/css">
p {
font-size: 110%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
</style>
</head>
…
Замечание. Таблица глобальных стилей может размещаться не только внутри контейнера <HEAD>, но также в любом месте кода HTML-документа.
3.1.2.3. Внутренние стили
Внутренний стиль является по существу расширением для одиночного тега используемого на веб-странице [5]. Для определения стиля используется параметр тега style, а его атрибуты указываются с помощью языка таблицы стилей.
Пример использования внутренних стилей:
…
<body>
<p style="font-size: 110%; font-family: Verdana, Arial, Helvetica, sans-serif;">Текст</p>
</body>
…
Замечание. Внутренние стили рекомендуется применять на сайте ограниченно или вообще отказаться от их использования. Дело в том, что добавление таких стилей увеличивает общий объем файлов, что ведет к повышению времени их загрузки в браузере, и усложняет редактирование документов для разработчиков.
Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым всегда применяется внутренний стиль, затем таблица глобальных стилей и в последнюю очередь таблица связанных стилей.
3.1.3. Базовый синтаксис
Способ записи CSS отличается от формы использования тегов HTML и в общем виде имеет следующий синтаксис [2, 5]:
Селектор { свойство1: значение; свойство2: значение; ... }
Селектором называется имя стиля, в котором указаны параметры форматирования. Селекторы делятся на несколько типов: селекторы тегов, идентификаторы, классы и др. После указания селектора идут фигурные скобки, в которых записывается необходимое стилевое свойство, а его значение указывается после двоеточия. Параметры разделяются между собой точкой с запятой, в конце этот символ можно опустить.
CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика.
Замечание. Имена селекторов обязательно должны начинаться с латинского символа (a-z, A-Z) и могут содержать в себе цифры.