 |
И делается это не только из эстетических соображений, но и в сугубо практических целях, чтобы не запутывать посетителя, а помочь ему быстро сориентироваться на сайте.
Задача, в общем-то, несложная, если речь идет о нескольких веб-страницах. Но как только их число начинает стремительно расти (а это неизбежно для любого развивающегося сайта), становится все труднее соблюдать стилевое единство. Да и слишком много излишнего кода появляется. Для того чтобы задать одинаковый стиль для выделения важных текстовых фрагментов, встречающихся на сайте, приходится каждый раз писать нечто вроде: < FONT color="#FF0000" face="Verdana" size="+2"><b>Внимание! </b></font>. Очень неудобно и неинтересно рыскать по всему сайту, отыскивать подходящие куски кода, копировать их и вставлять в нужное место на новой странице. К тому же, рано или поздно оказывается, что где-то что-то упущено, и заголовок второго уровня на главной странице сайта внешне совсем не похож на такие же заголовки на других страницах. А уж если задуман некий редизайн, пиши пропало: придется все страницы переписывать практически заново.
Рекомендации по использованию CSS разрабатываются WWW-консорциумом*Лекарство от этой напасти было придумано давно, и название ему дали красивое: Каскадные таблицы стилей (Cascading Style Sheets, CSS). Действует снадобье так: в отдельные файлы согласно определенным правилам записывается стилевая разметка всех элементов страниц, а в код самих страниц вставляется лишь ссылка на такой файл. Например, так:
<LINK rel="stylesheet" href="style_file.css" type="text/css">.
Возможны и другие варианты использования стилевых разметок, но подключение внешнего файла с таблицей посредством тега <LINK>, является, пожалуй, самым удобным способом работы. Правила описания стилей не слишком сложны и доступны в Сети, в том числе и в русском переводе. В этой статье представлено самое общее описание принципа работы с CSS.
В приведенном примере жирным шрифтом обозначены так называемые селекторы, а курсивом — описания селекторовКакие данные описываются в файле каскадной таблицы стилей? Допустим, дизайнер решил, что фон у всех страниц сайта должен быть светло-серым, в качестве основного шрифта будет использоваться Verdana, а заголовки третьего уровня будут синего цвета, выделены курсивом и подчеркнуты. Для выполнения всех этих пожеланий достаточно в файл таблицы стилей записать следующие инструкции:
BODY {background-color: #DCDCDC; font-family: Verdana;} H3 {color: Blue; font-style: italic; text-decoration: underline;}
Описания селекторов состоят из перечисления свойств, которые могут быть применены к данному элементу страницы (цвет фона, шрифт, цвет текста, начертание текста) и выбранных значений этих свойств (#DCDCDC, Verdana, Blue, italic, underline). Когда браузер начнет загружать страницу и натолкнется на тег <LINK>, он обратится к указанной в нем таблице стилей, прочтет инструкции и выполнит соответствующее форматирование всех элементов, описанных в селекторах таблицы. Причем, можно в одном селекторе указывать свойства сразу нескольких элементов страницы. Например, можно установить, что в списках всех типов текст будет курсивным:
DL, OL, UL {font-style: italic;}
При этом, заметьте, нет необходимости отдельно описывать это свойство для тегов элементов списков: <LI>, <DT>, <DD>. Эти теги наследуют указанное свойство. Хотя можно несколько разнообразить оформление, например, так:
DT {font-weight: bold;}
В этом случае текст, заключенный в тег <DT> на странице будет выделен курсивом (поскольку это свойство унаследовано от <DL>) и жирным начертанием.
Обратите внимание: селекторы классов отмечаются точкой перед именем класса: .classnameОчень помогает при разработке стильного дизайна создание так называемых классов. Например, появилась идея: некоторые тексты на странице выравнивать влево и выделять курсивом, а другие элементы, наоборот, выравнивать вправо и выделять жирным. Создаем соответствующие классы в таблице стилей:
.left {text-align: left; font-style: italic;} .right {text-align: right; font-weight: bold;}
Теперь в любом теге, поддерживающем атрибут class, мы можем указать тот или иной класс и к содержимому этого тега будут применены все свойства, описанные в селекторах класса. Например, такой код:
<H2 class=left>
<P class=left>
<P class=right>
приведет к тому, что на странице появятся заголовок второго уровня и абзац, выровненные влево и выделенные курсивом, а также еще один абзац, выровненный вправо и выделенный жирным начертанием.
Вообще говоря, CSS позволяет создавать довольно сложную иерархию отношений между стилями различных элементов. Очень полезная особенность, которая неоднократно пригодится любому вебмастеру. Как мы уже видели ранее, можно описать разные стили для разных элементов страницы. Но нередки ситуации, когда один элемент страницы включен в другой элемент. Например, используются следующие стили:
H1 {color: Red;}
I {color: Red;}
Согласно этой разметке, все заголовки первого уровня и все курсивные тексты будут дополнительно выделены красным цветом. Но эта разметка потеряет смысл в таком конкретном случае: <H1>Заголовок, в котором используется <I>курсивный</I>текст</H1>. Как обойти эту ситуацию? Необходимо описать в таблице дополнительный селектор, так называемый селектор потомка:
H1 I {color: Green;}
В этом случае все курсивные тексты, встречающиеся в заголовках первого уровня, будут выделены зеленым цветом, тогда как все остальные курсивные тексты останутся красными.
В данном примере угловая скобка > определяет направление «от предка к потомку» в иерархииЕсли на странице публикуются какие-то таблицы данных, то часто бывает необходимо текст внутри таких таблиц делать более компактным, чем на остальной странице, вне таблиц. С помощью CSS это сделать несложно, например, так:
TD > P {font-size: smaller;}
Очень удобно задавать стилевую разметку не для отдельных элементов страницы, а для их последовательностей. Например, если горизонтальная линия следует сразу за заголовком первого уровня, то между ними должен быть установлен промежуток в 40 пикселей:
H1 + HR {margin-bottom: 40px;}
И еще один тип селекторов, о котором необходимо упомянуть – это селекторы атрибутов. Все HTML-теги поддерживают те или иные атрибуты. Например, гиперссылки описываются тегом с обязательным применением атрибута href. CSS позволяет легко выделить ссылки на какой-либо ресурс специальным стилем. Например, так:
A[href="/redir.php?url=www.hostinfo.ru%2F"] {color:Green; font-weight:bold}
Благодаря правилу, приведенному выше, все гиперссылки, ведущие на hostinfo.ru, будут выделены жирным шрифтом и окрашены в зеленый цвет.
Таким образом, создавая селекторы для различных элементов страницы, объединяя элементы в классы, устанавливая между ними различные иерархические отношения, мы создаем неповторимый стиль разметки для своего сайта. Причем, правила разметки хранятся в одном файле, к которому обращаются все страницы при загрузке в браузер. Следовательно, если дело дойдет до редизайна, не нужно будет перелопачивать код всех страниц ресурса — достаточно отредактировать каскадную таблицу стиля, и изменения моментально будут применены ко всему сайту. Так что создание серьезного ресурса без применения CSS выглядит неразумно — это как минимум.
Однако и с появлением CSS всех проблем избежать не удалось. Самая главная трудность: не все разработчики браузеров в полном объеме поддерживают правила CSS. Поэтому при написании стилевой разметки нужно постоянно сверяться, насколько корректно те или иные правила разметки будут отображены в разных браузерах. Кроме того, удержать в голове все возможные свойства для каждого элемента страницы – очень трудно, нужна подсказка. И, наконец, если сайт достаточно велик и разнообразен по содержанию, то таблица стилей неизбежно распухает, становится трудно следить за актуальностью стилевых описаний тех или иных элементов. А если для разных разделов сайта используются разные каскадные таблицы, то совсем беда: попробуй проконтролировать, верно ли к каждой веб-странице привязана соответствующая ей таблица?
В общем, хотелось бы иметь под рукой инструмент, облегчающий работу с каскадными таблицами стилей. И соответствующие программы есть, они постоянно развиваются, появляются новые продукты. Одной из наиболее удачных программ этого типа, безусловно, является TopStyle Pro, разработка компании Bradbury Software. Именно эту программу мы и рекомендуем взять на вооружение при создании по-настоящему стильного сайта.
Ссылки по теме
Статья получена: hostinfo.ru
Противовирусные препараты: за и против
Добро пожаловать в Армению. Знакомство с Арменией
Крыша из сэндвич панелей для индивидуального строительства
Возможно ли отменить договор купли-продажи квартиры, если он был уже подписан
Как выбрать блеск для губ
Чего боятся мужчины
Как побороть страх перед неизвестностью
Газон на участке своими руками
Как правильно стирать шторы
Как просто бросить курить
- 2192 -
