- •1. Общие сведения о css
- •1. Разделение оформления и содержания
- •2. Добавление стиля на веб-страницу
- •2.1. Таблица связанных стилей
- •2.2. Таблица глобальных стилей
- •3. Cинтаксис css
- •3.1. Свойства css
- •3.2. Селекторы тегов
- •Селекторы атрибутов
- •Простой селектор атрибута
- •Селектор атрибута со значением
- •Атрибут начинается с определенного значения
- •Атрибут оканчивается определенным значением
- •Значение встречается в любом месте атрибута
- •Группирование
- •4. Псевдоклассы
- •Псевдоклассы, определяющие состояние элементов
- •2. Более высокий приоритет имеет значение, указанное в коде ниже
- •3. Описание стилей начинайте с селекторов верхнего уровня
- •4. Группируйте селекторы с одинаковыми параметрами и значениями
- •5. Используйте идентификаторы и классы
- •6. Применяйте универсальные стилевые параметры
2. Добавление стиля на веб-страницу
Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением.
2.1. Таблица связанных стилей
При использовании таблицы связанных стилей описание селекторов и их свойств располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <LINK>. Данный тег помещается в контейнер <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-файлу, он может быть задан как относительно, так и абсолютно. Таким образом можно подключать таблицу стилей, которая находится на другом сайте.
2.2. Таблица глобальных стилей
При использовании таблицы глобальных стилей свойства CSS описываются в самом документе и обычно располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа, с помощью контейнера <STYLE>.
Пример использования таблицы глобальных стилей:
…
<head>
…
<style type="text/css">
p {
font-size: 110%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
</style>
</head>
…
Замечание. Таблица глобальных стилей может размещаться не только внутри контейнера <HEAD>, но также в любом месте кода HTML-документа.
2.3. Внутренние стили
Внутренний стиль является по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется атрибут тега style, а его значение указывается с помощью языка таблицы стилей.
Пример использования внутренних стилей:
…
<body>
<p style="font-size: 110%; font-family: Verdana, Arial, Helvetica, sans-serif;">Текст</h1>
</body>
…
Замечание. Внутренние стили рекомендуется применять на сайте ограниченно или вообще отказаться от их использования. Дело в том, что добавление таких стилей увеличивает общий объем файлов, что ведет к повышению времени их загрузки в браузере, и усложняет редактирование документов для разработчиков.
Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым всегда применяется внутренний стиль, затем таблица глобальных стилей и в последнюю очередь таблица связанных стилей.
3. Cинтаксис css
Способ записи CSS отличается от формы использования тегов HTML и в общем виде имеет следующий синтаксис :
Селектор { свойство1: значение; свойство2: значение; ... }
Селектором называется имя стиля, в котором указаны параметры форматирования. Селекторы делятся на несколько типов: селекторы тегов, идентификаторы, классы и др. После указания селектора идут фигурные скобки, в которых записывается необходимое стилевое свойство, а его значение указывается после двоеточия. Параметры разделяются между собой точкой с запятой.
CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика.
Замечание. Имена селекторов обязательно должны начинаться с латинского символа (a-z, A-Z) и могут содержать в себе цифры.