 |
Идея CSS очень проста. Если в HTML вы прямо в документе ставили указание на то, как должен выглядеть тот или иной элемент, то при использовании CSS такие указания выносятся в отдельный блок (который может либо включаться в документ, либо читаться из внешнего файла).
Такой простой ход сразу дает массу преимуществ вебмастеру. Прежде всего, значительно облегчается изменение внешнего вида сайта или отдельных его элементов: достаточно изменить определение соответствующего стиля в единственном CSS-файле, и эти изменения распространятся на весь сайт. Второе преимущество — сокращение размеров документов, которое особенно заметно на «красивых» страницах.
Первая версия CSS — CSS level 1 — принятая в 1996 и пересмотренная в 1999 году — позволяла оперировать только цветами, шрифтами, отступами и им подобными, относительно простыми и часто используемыми элементами. Принятая в 1998 году спецификация CSS level 2 добавила возможность абсолютного позиционирования элементов, создания стилей для разных типов устройств, использования собственных курсоров, расширила возможности по выбору элементов, к которым должен применяться тот или иной стиль, и многое другое. Естественно, что CSS level 2 поддерживает и таблицы стилей, созданные в CSS level 1. В настоящее время консорциум W3C активно ведет разработку стандарта CSS level 3 и CSS level 2 revision 1, которые должны учесть все возрастающие потребности вебмастеров и вебдизайнеров по созданию современных и удобных сайтов.
Следует учитывать, что каскадные таблицы стилей не полностью абстрагируют визуальное представление документа от его содержания, они только позволяет более компактно описать правила визуального представления. И если вы захотите изменить дизайн сайта, то вам все равно придется переписывать HTML-код (правда, сделать это будет проще, чем при отсутствии CSS). Значительно больший уровень абстракции можно получить, используя связку языков XML + XSL (из которых, в частности, можно генерировать HTML + CSS), но это намного сложнее и несколько выпадает из темы данной статьи.
Но хватит теории! Давайте попробуем заняться практикой...
Встроенные стили указываются прямо внутри HTML-теговЕсть три способа описать стиль элемента в HTML-документе. Самый простой и практически не использующий преимуществ CSS способ — это указать стиль внутри тега HTML. Например, написать
<H2 STYLE="COLOR: #AADDAA; FONT-WEIGHT: BOLD; FONT-SIZE:11pt;">заголовок второго уровня</H2>
Единственное преимущество, которое можно получить таким образом, — это задание некоторых атрибутов текста, которые не поддерживаются тегами HTML. Зато сохраняются все недостатки HTML — указанный стиль относится только к одному тегу и для изменения внешнего вида документа вам придется изменить описание стиля в каждом теге.
Можно описать используемые в документе стили внутри блока STYLEВторой способ несколько лучше: надо описания стилей заключить внутри тегов <STYLE TYPE="text/css"> и </STYLE>. Например, если вы напишете
<STYLE TYPE="text/css">
H2 {COLOR: #AADDAA; FONT-WEIGHT: BOLD; FONT-SIZE:11pt;}
</STYLE>
а в тексте документа укажете <H2>заголовок второго уровня</H2>, то получите тот же эффект. Однако, в отличие от предыдущего способа, свойства отображения применятся ко всем тегам H2 в документе. И если скажем вам потребуется изменить размер шрифта или цвет всех заголовков второго уровня, то потребуется всего лишь подправить всего одну строчку. Согласитесь, что это намного удобнее!
Таблицу стилей для целого сайта можно хранить в одном-единственном файлеОднако у предыдущего способа тоже есть свой недостаток: блок STYLE вам придется скопировать в каждую страницу своего сайта. А если страниц там несколько сотен? И вам понадобится что-то поменять? Неудобно... Но можно победить и эту проблему — с помощью тега LINK. Описав требуемые стили в отдельном текстовом файле (теги STYLE указывать не требуется), вы затем можете написать в секции HEAD документа
<LINK REL="stylesheet" TYPE="text/css" HREF="style.css">
Эта команда укажет, что таблица стилей находится во внешнем файле. Таким образом, даже для очень большого сайта может использоваться всего один файл со стилями, что очень сильно облегчает редактирование. Есть еще один «хитрый» необязательный параметр тега LINK: MEDIA. Он может указывать для какого типа устройств таблица стилей предназначена, и иметь значения, например, «all» (используется по умолчанию), «handheld», «print» и некоторые другие. Следует только учесть, что (пока еще?) не все браузеры понимают таблицы стилей, подключаемые с использованием этого параметра.
В некоторых случаях бывает полезно объединить два предыдущих метода — например, если разные секции должны иметь частично разные стили (скажем, отличаться цветом фона). Внутри тега STYLE можно указать
@import url(style.css)
и тогда к стилям, описанным внутри STYLE присоединятся стили из внешнего файла.
Можно комбинировать блок STYLE и подключаемую внешнюю таблицу стилейНо у внешних файлов тоже есть недостаток: если соединение с сервером не очень хорошее (что не редкость у модемных пользователей), то файл со стилями может и не скачаться... А страничка без стилей обычно выглядит преотвратнейше... Поэтому тут уж вам придется выбирать, как лучше поступить.
Практика показывает, что таблицы стилей редко бывают больше 2-3 килобайт, даже для очень «раскрашенных» страниц. И если ваш веб-сервер умеет «на лету» сжимать страницы (в Apache, например, этим занимается mod_gzip), то такой объем будет для пользователя практически незаметен. Ну, а дальше — дело техники: пишется какая-нибудь команда, которая на сервере читает таблицу стилей из внешнего файла (все-таки один файл намного легче редактировать!) и встраивает ее содержимое в страницу, отдаваемую посетителю. В простейшем случае это может быть инструкция SSI, вроде
<!--#include file="style.css" -->
а если ваш сайт написан на php, то можно написать, например,
<?php readfile("style.css"); ?>
Ссылки по теме
Статья получена: hostinfo.ru
Противовирусные препараты: за и против
Добро пожаловать в Армению. Знакомство с Арменией
Крыша из сэндвич панелей для индивидуального строительства
Возможно ли отменить договор купли-продажи квартиры, если он был уже подписан
Как выбрать блеск для губ
Чего боятся мужчины
Как побороть страх перед неизвестностью
Газон на участке своими руками
Как правильно стирать шторы
Как просто бросить курить
- 3086 -
