Оформление веб-страницы с использованием стилей
При этом результат получится таким же, как и в предыдущем случае, просто сама запись намного компактнее, да и удобнее. Кроме того, в ней легче ориентироваться. Взглянув на исходный текст, мы сразу можем по имени класса найти, где абзац, а где эпиграф. В предыдущем примере выискивать нужные места текста среди нагромождения стилевых свойств было гораздо труднее.
Наверное, вы обратили внимание на странные сочетания <!-- и -->, которые появились в нашем примере около тегов <STYLE>. Вообще говоря, в такие символьные сочетания (это, кстати, тоже теги) в HTML-документах заключают комментарии. То есть все, что находится между этими тегами, игнорируется браузером. Но в данном случае мы пользуемся тем, что внутри STYLE – блока действуют законы синтаксиса не HTML, а CSS. Так что те браузеры, которые “понимают” тег <STYLE> и, следовательно, CSS, “поймут” и то, что в данном случае это не символы комментария, и проинтерпретируют таблицу стилей, как положено. А те браузеры (в основном, старые), которые CSS не понимают, воспримут содержимое таблицы стилей как комментарий. (Если не поставить теги комментариев, то эти браузеры, проигнорировав тег <STYLE> как непонятный им, скорее всего станут выводить на экран все содержимое таблицы стилей.) Таким же образом мы будем “обманывать” старые браузеры при использовании тега <SCRIPT>.
Внешние стилевые таблицы
Еще одно замечательное свойство стилевых таблиц заключается в том, что с помощью одной таблицы, находящейся в отдельной файле, можно задавать стили для целого набора веб-страниц. Это, кстати, очень важно при разработке больших сайтов, поскольку, во-первых, способствует сохра нению единства стиля, а во-вторых, предоставляет возможность быстро изменить что-либо сразу во многих файлах проекта. Для этого следует просто написать всю таблицу стилей (без тегов <STYLE> и </STYLE>) в отдельном файле с расширением .css, а затем “подключить” ее во всех HTML-документах, которые должны ее использовать. Например, если файл таблицы стилей называется mainstyle.css, то в раздел <HEAD> каждого из использующих ее HTML-документов, нужно вставить такую строку:
<LINK REL="Stylesheet" HREF="mainstyle.css" TYPE="text/css">Атрибут TYPE= указывать не обязательно, но лучше это сделать (кстати, это можно делать и в теге <STYLE>). Во-первых, это признак хорошего тона, а потом мало ли что – вдруг пользователю, к примеру, попадется какой-нибудь сумасшедший браузер, использующий для стилевых таблиц по умолчанию не CSS, а, допустим, JASS.
Есть и другой способ “подключения” стилевой таблицы из внешнего файла – директива @import. Она употребляется следующим образом:
<STYLE TYPE="text/css"> @import url (mainstyle.css); </STYLE>Как видите, эта директива должна находится между тегами <STYLE> и </STYLE>, поскольку она не является элементом языка HTML (как тег <LINK>). Ее использование менее предпочтительно, поскольку браузеры могут интерпретировать ее по-разному.