Шаг 4. Базовый синтаксис
Способ записи CSS отличается от формы использования тегов HTML и в общем виде имеет следующий синтаксис.
Селектор { свойство1: значение; свойство2: значение; ... }
Селектором называется имя стиля, в котором указаны параметры форматирования. Селекторы делятся на несколько типов: селекторы тегов, идентификаторы и классы, они подробно описаны далее. После указания селектора идут фигурные скобки, в которых записывается необходимое стилевое свойство, а его значение указывается после двоеточия. Параметры разделяются между собой точкой с запятой, в конце этот символ можно опустить.
CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика. Так, в примере 4.1 показаны две разновидности оформления селекторов и их правил.
Пример 4.1. Использование стилей
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
h1 { color: #a6780a; font-weight: normal; }
H2 {
color: olive;
border-bottom: 2px solid black
}
</style>
</head>
<body>
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
</body>
</html>
В данном примере свойства селектора H1 записаны в одну строку, а для селектора H2 каждый параметр находится на отдельной строке. Во втором случае легче отыскивать параметры и править их по необходимости, но при этом незначительно возрастает объем данных за счет активного использования пробелов и переносов строк.
Замечание
Имена селекторов обязательно должны начинаться с латинского символа (a-z, A-Z) и могут содержать в себе цифры,например —terminator4, Titanic2, extra.
Изменение важности элементов с помощью !important
И авторы сайта и его посетители могут использовать свою собственную таблицу стилей. Авторы добавляют стили для управления видом элементов и для верстки веб-страниц, а посетители — чтобы поменять по своему желанию некоторые параметры. Например, они могут сменить размер шрифта в ту или иную сторону, сделав его меньше или больше, а также указать свои любимые цвета для заголовков. CSS позволяет повышать важность стилевого параметра за счет добавления ключевого слова !important. Синтаксис его применения следующий.
Селектор { свойство: значение !important }
Ключевое слово !important пишется через пробел после значения стилевого атрибута.
При включении пользовательской таблицы стилей или одновременном применении различающихся стилей автора и пользователя к одному и тому же селектору, браузер руководствуется следующим алгоритмом.
- !important добавлен в авторский стиль — будет применяться стиль автора.
- !important добавлен в пользовательский стиль — будет применяться стиль пользователя.
- !important нет как в авторском стиле, так и стиле пользователя — будет применяться стиль автора.
- !important содержится в авторском стиле и стиле пользователя — будет применяться стиль пользователя.
Итог от применения !important зависит от того, где он присутствует и в общем случае показан в табл. 4.1.
Табл. 4.1. Результат применения !important| Стиль автора | Стиль пользователя | Результат |
|---|
BODY {
color: silver !important;
font-size: 8pt !important
} | BODY {
color: #000;
font-size: 12pt
} | Lorem ipsum dolor sit amet... Будут использоваться все параметры автора. Текст станет отображаться как серый, размер 8 пунктов. |
BODY {
color: silver;
font-size: 8pt;
} | BODY {
color: #000 !important;
font-size: 12pt
} | Lorem ipsum dolor sit amet... Цвет текста будет установлен пользовательским, а размер шрифта останется исходным. В итоге увидим черный текст размером 8 пунктов. |
BODY {
color: silver;
font-size: 8pt;
} | BODY {
color: #000 !important;
font-size: 12pt !important
} | Lorem ipsum dolor sit amet... Будут использоваться все параметры пользователя. Текст станет отображаться как черный, размер 12 пунктов. |
BODY {
color: silver;
font-size: 8pt;
}
| BODY {
color: #000;
font-size: 12pt
}
| Lorem ipsum dolor sit amet... Будет применяться стиль автора, а именно: установлен серый цвет текста, размер шрифта 8 пунктов. |
BODY {
color: silver !important;
font-size: 8pt !important;
} | BODY {
color: #000 !important;
font-size: 12pt !important
} | Lorem ipsum dolor sit amet... При добавлении !important в ту и другую таблицу приоритет в этом случае имеет стиль пользователя. В результате текст станет черным, а размер его увеличится до 12 пунктов. |
В разных браузерах по своему реализован механизм подключения пользовательского стиля. Например, в браузере Internet Explorer для этого требуется выбрать пункт меню Сервис > Свойства обозревателя..., после чего на вкладке Общие нажать на кнопкуОформление и задать путь к локальному файлу (рис. 4.1).
Рис. 4.1. Выбор пользовательского стиля документа в браузере Internet Explorer
В браузере Firefox управление пользовательскими стилями возложено на специальное расширение Web Developer. С помощью его удобной панели инструментов можно легко установить пользовательский файл со стилем через пункт CSS > Add User Style Sheet... (рис. 4.2).
Рис. 4.2. Выбор пользовательского стиля документа в браузере Firefox
Замечание
В CSS1 при одновременном использовании !important у автора и пользователя преимущество имеет авторский стиль. В CSS2 сделано наоборот и применяется уже пользовательский стиль, как показано в табл. 4.1.
В примере 4.2 показано применение !important совместно со стилевыми атрибутами.
Пример 4.2. Повышение важности элементов
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type=”text/css”>
BODY {
font-family: Georgia, Times New Roman, Times, serif;
font-size: 90%;
color: yellow !important;
background: navy !important
}
</style>
</head>
<body>
...
</body>
</html>
В данном примере с помощью стилей задается цвет текста и фона для всей веб-страницы, причем повышенной важности.
Замечание
Следует отметить, что пользователи достаточно редко подключают свои собственные стилевые файлы, поскольку браузеры имеют встроенную поддержку по изменению размера шрифта. А, как правило, другие возможности на пользовательские файлы со стилями обычно и не возлагают.