Лабораторная работа 6. Добавление стиля на web-страницу
Таблицы стилей могут быть добавлены в вашу страницу тремя разными способами, различающиеся по своим возможностям.
Таблицы связанных стилей (linked style sheet)
Самый мощный и удобный способ определения стилей и правил для сайта. Стили хранятся в отдельном файле, который может быть использован для любых web-страниц. Для подключения таблицы связанных стилей используется тег link в заголовке страницы.
Пример. Подключение таблицы связанных стилей
<html>
<head>
<link rel=stylesheet type="text/css" href=mysite.css>
или
<link rel=stylesheet type="text/css" href="http://www.mysite.ru/main.css">
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
Достоинства данного способа:
1. Используется один файл со стилем для любого количества web-страниц, а также возможно его применять на других сайтах;
2. Можно изменять таблицу стилей без модификации web-страниц.
3. При изменении стиля в одном единственном файле, стиль автоматически применяется ко всем страницам, где есть на него ссылка. Несомненно, удобно. Указываем размер шрифта в одном только месте, и он изменяется на всех сто или больше web-страницах нашего сайта.
4. Файл со стилем при первой загрузке помещается в кэш на локальном компьютере, отдельно от web-страниц, поэтому загрузка сайта происходит быстрее.
Таблицы глобальных стилей (global style sheet)
Стиль определяется в самом документе и обычно располагается в заголовке web-страницы. По своей гибкости и возможностям этот способ использования стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа. Определение стиля задается тегом style.
Пример. Использование таблицы глобальных стилей
<html>
<head>
<style type="text/css">
H1 { font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #333366; }
</style>
</head>
<body>
<H1>Hello, world!</H1>
</body>
</html>
В заголовке определен стиль тега h1, который затем можно повсеместно использовать на данной web-странице.
Внутренние стили (inline style)
Внутренний стиль являются по существу расширением для одиночного тега используемого на web-странице. Для определения стиля используется параметр style, а его атрибуты указываются с помощью языка таблицы стилей.
Пример. Использование внутренних стилей
<html>
<body>
<H1 style="font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #333366;">Hello, world!</H1>
</body>
</html>
Рекомендуется использовать внутренний стиль для одиночных тегов или отказаться от его использования вообще, поскольку изменение ряда элементов становится проблематичным. Внутренние стили не соответствуют идеологии структурного документа, когда содержимое и его оформление разделены.
Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым всегда применяется внутренний стиль, затем таблица глобальных стилей и в последнюю очередь таблица связанных стилей. В примере используются сразу два метода добавления таблиц стилей в документ.
Пример. Сочетание разных методов подключения стилей
<html>
<head>
<style type="text/css">
H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; }
</style>
</head>
<body>
<H1 style="font-size: 36px; font-family: Times, serif; color: red;">Hello, world!</H1>
<H1>Hello, world!</H1>
</body>
</html>
В приведенном примере первый заголовок задается красным цветом размером 36 пикселей, а следующий - зеленым и другим шрифтом.
Директива @import
Директива @import позволяет нам включать в свою таблицу стилей другие таблицы стилей. Она должна содержать URL импортируемой таблицы стилей; следующие две директивы эквивалентны и демонстрируют синтаксис данной директивы:
@import "mystyle.css";
@import url(mystyle.css);
Директива @import может содержать список названий устройств отображения, к которым должна применяться данная таблица стилей, разделенных запятыми, например:
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
Если списка названий устройств нет, то предполагается, что он равен all, т. е. импортируемая таблица стилей применима ко всем устройствам. Директивы @import должны располагаться в таблице стилей перед первым правилом и не могут находиться внутри блока; в противном случае они игнорируются обозревателем.
Атрибут !important
Для того, чтобы правила пользовательской таблицы стилей могли перекрывать авторскую, CSS содержит атрибут !important. Правило пользовательской таблицы стилей, имеющее такой атрибут, имеет больший вес, чем соответствующее правило авторской таблицы стилей. Рассмотрим следующий пример:
/* Из таблицы стилей пользователя */
P { text-indent: 1em !important }
P { font-style: italic !important }
P { font-size: 18pt }
/* Из таблицы стилей автора */
P { text-indent: 1.5em !important }
P { font: 12pt sans-serif !important }
P { font-size: 24pt }
Здесь первое правило таблицы стилей пользователя содержит атрибут !important, поэтому оно весомей, чем первое правило таблицы стилей автора. Второе правило пользователя также более весомо, по той же самой причине. Однако, третье правило пользователя менее весомо, чем второе правило автора. Точно также, третье правило автора менее весомо, чем его второе правило.