В чем, по сути, функция CSS? Каскадные таблицы стилей позволяют отделить форматирование текста от его содержания. Делается это легко и изящно: вам нет необходимости задумываться при создании новых страниц сайта о том, как вы выделяли какие-либо элементы уже существующих страниц. Запомнить все это — весьма непростая задача, которая, вдобавок, приводит к излишней замусоренности кода страницы, так как вам придется к каждой ссылке добавлять еще и другие теги, для того чтобы обеспечить их одинаковое отображение на странице. При использовании таблиц стилей вся процедура «запоминания» того, как вы оформляли все дополнительные элементы, сводится к тому, что в одном файле необходимо прописать параметры их отображения и оформить соответствующим образом страницы сайта (осуществить привязывание страниц к таблице стилей). И все! Теперь вам, для того чтобы поменять дизайн, к примеру, ссылок на всех страницах сайта, достаточно внести изменения лишь в одном месте: там, где описываются параметры отображения ссылок.
Оптимальным считается размер файла стилей не более двадцати-тридцати процентов от размера основной страницыТем не менее, как и любым инструментом, таблицами стилей надо пользоваться с головой. Дело в том, что они загружаются до того, как будут загружены страницы сайта, поэтому непомерное раздувание их размера не приветствуется. Тем посетителям вашего сайта, что используют модемный доступ в Сеть (а их в Рунете до сих пор большинство, несмотря на значительный рост пользователей выделенных линий), а тем более — низкоскоростной доступ (не у всех хорошие модемы), важен каждый лишний килобайт, так как при отечественных линиях связи можно вообще не дождаться загрузки основной страницы. Бьет это, в первую очередь, по посещаемости: едва ли кто-то, кто не смог зайти на ваш сайт с первого раза, захочет снова туда заходить.
Таблицы стилей разделяются на внешние и внутренние. Внутренние описываются в коде страницы с помощью тега <style>, внешние же находятся в отдельном файле. По ряду причин оптимально именно использование внешних таблиц стилей:
- Старые браузеры, не использующие таблицы стилей, не будут загружать, файл их описывающий. Если же они включены в код страниц, они будут загружены в любом случае.
- Реальностью становится упрощение дизайна сайта: используя один файл CSS, вы можете управлять видом всех страниц сайта. Причем, если вы захотите внести изменения в отображение страниц, для этого будет достаточно изменения лишь одного этого файла.
- Использование внешних стилей оставляет вам возможность переназначения таблиц стилей для некоторых страниц сайта: как раз с помощью внутреннего тега <style>.
W3C — WWW-консорциум, организация, устанавливающая стандарты и спецификации Интернета Доля не поддерживающих CSS браузеров (или позволяющих их отключать) колеблется в зависимости от сайта в пределах от нуля до десяти процентов — не тот объем аудитории, которым следует пренебрегать. Также очень желательно учитывать то, что в браузерах, не поддерживающих таблицы стилей, размещение текста может сильно отличаться от задуманного дизайнером, в том случае если расположение элементов задается в файле CSS. Поэтому такие параметры, как выравнивание объектов по центру и краям, рекомендуется указывать в коде основной страницы. Здесь подход к созданию файла таблиц стилей должен быть следующим: страницы сайта должны быть читабельными и без него. Стили лишь «делают красиво», выделяя заданным образом логические структуры документа. CSS не поддерживают браузеры Internet Explorer до 4.0 и Netscape Navigator до 4.0.
Mozilla наиболее полно поддерживает CSS |
В данный момент консорциумом W3C приняты стандарты CSS и CSS2, также в разработке находится третья версия стилей. CSS2 (существующий в данный момент в версии 2.1) сильно опередил время. В полной мере его не поддерживает ни один браузер, даже Mozilla, который традиционно старается придерживаться всех стандартов, установленных W3C. Чаще всего в характеристиках браузеров указывается что-нибудь вроде "поддержка CSS и CSS2 (частично)". Однако то, насколько полно реализована поддержка CSS в браузере, для дизайнера практически не имеет значения; значение имеет только один параметр: насколько полно реализована поддержка используемых стилей в Internet Explorer от Microsoft. Реальность такова, что сайт, использующий всю мощь CSS, без оглядки на самый популярный браузер, обречен на прозябание, так как у его посетителей возникнут большие трудности с восприятием информации и навигацией по сайту.
Какова структура CSS? На самом простом примере:
<style type="text/css">
body { color: black; background: white; }
</style>
Выражение, находящееся между тегами <Style>, написано в соответствии с синтаксисом, который используется при описании стилевых правил. Каждое правило начинается с имени тега, для которого оно действует, затем в фигурных скобках "{" "}" следует список свойств и значений. Значения отделяются от свойств двоеточием, а в том случае если свойств у тега больше чем одно, они указываются вслед за значением предыдущего свойства, при этом отделяются от него точкой с запятой. В данном случае расшифровывается все просто: внутри тега <Body> будет использоваться черный текст на белом фоне.
Для связывания HTML-страниц с отдельными файлами стилей используется тег <link>. Синтаксис следующий:
<link type="text/css" rel="stylesheet" href="style.css">
При этом можно указывать как абсолютные, так и относительные пути к файлу стилей (в данном примере это style.css).
W3C-консорциум впервые опубликовал рекомендации по CSS еще в 1996 годуК сожалению, объем материала не дает возможности привести список всех возможностей даже CSS первой версии. Полная спецификация CSS level 1 (на английском языке) доступна в соответствующем разделе W3C консорциума. Занимает она 64 печатных листа. Любой файл, соответствующий CSS, будет соответствовать и спецификации CSS2, который не претерпел радикальных изменений, а был лишь дополнен и расширен. В частности, в CSS2 появились стили, учитывающие возможность представления документов в наладонных компьютерах, аппаратах системы Брайля и других. Также, в дополнение к этому, спецификация CSS2 поддерживает подгружаемые шрифты, различные дополнения для локализации страниц, автоматическую нумерацию страниц.
Несмотря на то, что возможности CSS очень широки, есть определенный набор наиболее часто используемых функций, освоить который под силу каждому. Здесь можно уместно провести аналогию с офисным пакетом от Microsoft: девяносто процентов пользователей используют лишь десять процентов функций пакета MS Office. Дело здесь не только в разном уровне поддержки CSS браузерами, но и в том, что отнюдь не все возможности CSS стоит применять. К примеру, это относится к возможности жесткого задания ширины полей, текста, различных отступов — так как посетители сайтов используют различные разрешения экранов, эти функции лучше не использовать. А в остальном, для оптимизации размера страниц, «выравнивания» дизайна CSS практически незаменим.
Ссылки по теме
Статья получена: hostinfo.ru