CSS (каскадные таблицы стилей для начинающих)
Каскадные таблицы стилей, или CSS для начинающих (практикум правильного HTML). Часть 1
Русская часть инета растет день ото дня. Сегодня в России уже никого не удивишь словосочетанием "домашняя страничка". Если раньше создание web-страниц было уделом избранных и на просторах Рунета царили лишь признанные "киты" web-дизайна, то теперь даже школяр в свободное от учебы время мастерит потихонечку собственную страницу, собираясь разместить ее на каком-нибудь бесплатном сервере (narod.ru). Web-конструированием сегодня не занимается, наверное, только не подключенный к Сети или ленивый. Множество людей, поблуждав по просторам инета, рано или поздно задумываются о создании собственной странички. Для них-то и написана эта статья.
Речь здесь пойдет о "правильном" HTML для новичков, а именно - о некоторых дополнительных возможностях, официально утвержденных интернет-консорциумом (w3.org). В частности, о некоторых возможностях, предоставляемых динамическим HTML (DHTML). А еще точнее - о том, как с помощью CSS (cascade style sheets, или каскадных таблиц стилей) сделать страничку, которая будет выглядеть лучше, чем страницы, созданные посредством "классического" HTML, при этом занимать меньше места и, соответственно, быстрее грузиться.
Мало кто из людей, впервые решившихся на создание собственного web-представительства, вооружается notepad'ом или другим текстовым редактором (HomeSite). Обычно новичок думает следующим образом: "Все свои привычные документы я создаю посредством программ WISIWYG ("что вижу, то и получаю") - тексты я создаю в Word, презентации - в PowerPoint, так возьму-ка я и для создания web-странички подобную программу - FrontPage…" Приняв такое решение, новоявленный web-ваятель дважды обкрадывает себя.
1-й раз - в смысле рационального использования web-пространства. Дело в том, что все визуальные редакторы web-страниц, к которым относится и упомянутый FrontPage, вставляют в создаваемые страницы "отсебятину" - множество лишних ненужных тегов. Исключением, пожалуй, является Macromedia Dreamweaver (за что он снискал себе заслуженную популярность как среди новичков, так и среди профессионалов). Но даже он в этом плане не идеален - любит засорять исходный текст кавычками (в большинстве случаев совершенно ненужными), а также вставлять символы неразрывного пробела в самых неподходящих для этого местах. Справедливости ради стоит отметить, что все визуальные редакторы предоставляют пользователю возможность работать с исходным кодом создаваемой страницы, но столь любимый многими FrontPage вновь переделает все по-своему, стоит вам только переключиться снова в визуальный режим.
Из этого следует, что второй раз новичок обкрадывает себя именно в части гибкости и полноты управления создаваемым содержимым страницы - визуальные редакторы не предоставляют такой свободы творчества, какую предоставит вам работа непосредственно с исходным кодом создаваемой страницы.
Ну, а теперь перейдем непосредственно к делу - к созданию красивых и небольших web-страниц с помощью каскадных таблиц стилей (в дальнейшем тексте я буду употреблять их сокращенное название - CSS). Предполагается, что вы, дорогие читатели, прочтя вступление, согласились со мной, отказались от визуальных редакторов, добыли книгу по HTML, изучили хотя бы небольшое количество основных тегов и атрибутов и горите желанием узнать, что же такое CSS и с чем его едят.
Логическое и физическое форматирование
Классический HTML3, наиболее распространенный на данный момент в сети, предоставляет нам средства физического форматирования документов, для чего имеются специальные теги (например, теги font, b, i) и множество различных атрибутов (size, color, height, width и т.п.). Особенности web-форматирования принуждают нас снова и снова прописывать эти теги и атрибуты для каждого нового абзаца, что, конечно, сильно увеличивает размер кода страниц. Кроме того, при таком способе форматирования в случае анализа структуры документа остается непонятным, почему данное слово выделено жирным начертанием - просто для красоты или же чтобы обратить на себя особое внимание конечного пользователя? Если живой человек еще в состоянии худо-бедно разобраться в логических построениях страниц на классическом HTML, то о поисковых машинах или, к примеру, голосовых браузерах этого не скажешь. Им вынь да положь чистую логику в структуре страницы. Именно из-за такой "неподвластности" логическому анализу данный способ форматирования был назван физическим форматированием. В противовес ему при создании новой спецификации HTML4 во главу угла было поставлено логическое форматирование, то есть такое форматирование, при котором структура и оформление документа были бы четко разделены. Этот способ форматирования рекомендован к применению интернет-консорциумом, так как предоставляет расширенные возможности поиска информации в Сети, позволяет более точно структурировать и анализировать информацию посредством поисковых машин, а также существенно уменьшает размер страниц и время их полной загрузки. Реализуется разделение структуры и оформления документа как раз с помощью CSS.
Стоит отметить тот факт, что зачатки логического форматирования присутствовали и в классическом HTML - теги h1, h2, blockquote, безусловно, способствовали разделению документов на некоторые логические блоки. Но многие авторы страниц использовали, да и по сей день продолжают использовать эти теги не по назначению: в связи со скудостью средств для оформления страницы теги заголовков, например, использовались для выделения таких элементов на странице, которые на самом деле заголовками не являлись. CSS же предоставляют достаточное количество средств оформления, что позволяет более точно следовать правилам логического форматирования и действительно отделять структуру страницы от ее визуального представления.
Назначение стилей отдельным элементам страницы
CSS позволяют назначить собственный стиль визуального представления любому тегу HTML, в т.ч. тегу body. Если стиль задан для тега body, он наследуется всеми элементами (абзацами, заголовками и т.д.), помещенными внутри этого тега-контейнера, в случае отсутствия собственных стилей для этих элементов. Таким образом, нам уже не нужно прописывать теги font и атрибуты color, size и т.п. для каждого абзаца на странице - достаточно задать некий стиль для тега body, и все абзацы на странице будут отображены в соответствии с этим стилем. Как же это сделать?
Допустим, мы хотим, чтобы все абзацы отображались шрифтом arial размером 8 пунктов красного цвета. Для этого следует прописать атрибут style тега body, присвоив ему соответствующее значение. Синтаксис такой:
<body style=font-family:arial;font-size:8pt;color:red>
Таким образом, все абзацы на странице отображены так, как мы захотели, причем код не засорен тегами <font> и их атрибутами. Представляете, какая экономия размера файла, если страница состоит из большого количества текста!
В приведенном примере используется встраивание стиля непосредственно в тег документа - так называемый inline-стиль. Этот способ связывания CSS с HTML-файлом рекомендуется в единичных случаях - если данный стиль планируется применить только к 1 элементу только на 1 странице сайта. Если же стиль должен быть применен к нескольким элементам на 1 странице или к нескольким страницам сразу, рекомендуются другие способы связывания CSS и HTML, о которых далее.
Назначение стилей нескольким элементам 1 страницы - создание внедренной таблицы стилей
Пока речь у нас шла о задании только 1 стиля для 1 элемента. А теперь мы научимся создавать именно таблицы стилей.
Допустим, мы хотим, чтобы все абзацы на странице выглядели, как в предыдущем примере, все заголовки 1-го уровня отображались шрифтом Arial зеленого цвета жирного начертания размером 9pt, а все заголовки 2-го уровня - шрифтом Helvetica размером 8pt жирного начертания зеленого цвета. Для этого нам понадобится создать внедренную таблицу стилей, в которой мы пропишем несколько правил сразу. Для этого создаем тег-контейнер таблицы стилей, начинающийся открывающим тегом style и заканчивающийся закрывающим тегом /style. Внутри этого тега-контейнера мы вольны задать любое количество правил CSS, состоящих из селектора (названия тега HTML, к которому будет применяться правило) и его определения (непосредственно набора средств форматирования), заключенного в фигурные скобки. Синтаксис для приведенного выше примера такой:
<style>body{font-family:arial;font-size:12pt;color:darkgreen}h1{font-family:arial;font-size:9pt;color:green;font-weight:bold}h2{font-family:helvetica;font-size:8pt;color:green;font-weight:bold}</style>
Этот способ связывания CSS и HTML называется внедрением. Его рекомендуется применять в тех случаях, когда вы решили задать какой-либо набор правил форматирования только для 1 страницы сайта, а все остальные страницы по вашему замыслу должны выглядеть по-другому.
Назначение стилей одновременно для нескольких страниц сайта
Помимо встраивания и внедрения для связи CSS и HTML используются способы импортирования и связывания таблиц стилей. Это, безусловно, наилучшие способы для придания единого стилевого оформления нескольким (или даже всем) страницам 1 сайта. При этом вся таблица стилей хранится в одном файле (расширение файла должно быть стандартным - .css).
Вот пример содержимого такого файла (например, m.css):
body{font-family:arial;font-size:8pt;color:red}h1{font-family:arial;font-size:9pt;color:green;font-weight:bold}h2{font-family:arial;font-size:8pt;color:green;font-weight:bold}
Обратите внимание: теги style и /style внутри файла таблицы стилей не используются - расширение .css явно указывает браузеру на то, что файл является таблицей стилей. 1 такой файл может быть связан сразу с несколькими страницами (или импортирован сразу в несколько страниц). В html-файле для связывания нужно прописать в любом месте следующую строку:
<link rel=stylesheet href=m.css>
В этой строке указывается, что связываемый файл является таблицей стилей (rel=stylesheet), формат этого файла - .css (type=text/css) и находится он в той же директории, что и файл html, либо имеет другой URL-адрес (href=m.css). Очевидно, что эту строку мы можем прописать в любом (либо во всех) из наших html-файлов. Таким образом, единое стилевое оформление будет прописано для нескольких страниц сразу.
Обратите внимание на то, что inline-стили (стили, прописанные для отдельных элементов страницы с помощью атрибута style) и внедренные стили (стили, прописанные в "голове" страницы внутри тега-контейнера style) имеют преимущество перед связанными стилями при анализе страницы браузером. Следовательно, при использовании связанных стилей мы всегда имеем возможность переназначить стиль именно для данного конкретного элемента страницы.
Для импортирования файла таблицы стилей (в т.ч. с другого сервера) мы должны прописать в любом месте внутри тега-контейнера style следующую строку:
<style>@import:url(m.css)</style>
Помимо адреса импортируемой таблицы стилей вы можете прописать в тег-контейнер style любые правила CSS, которые будут дополнять или корректировать правила, заданные в импортируемой таблице. Эти правила, как вы помните, будут называться внедренными. Внедренные правила приоритетнее импортированных при анализе страницы браузером, именно поэтому они могут корректировать стили, импортированные извне. В целом, браузер расставляет приоритеты таблиц стилей следующим образом:
1) inline-стили (встроенные с помощью атрибута style непосредственно в теги документа) - наивысший приоритет, будут применены браузером в любом случае, даже если возникает конфликт с внедренными или внешними стилями;
2) внедренные стили (перечисленные в теге-контейнере style) - чуть меньший приоритет, будут применяться во всех случаях, кроме случаев возникновения конфликта с inline-стилями (при возникновении такого конфликта будут применены inline-стили);
3) импортированные стили (стили внешнего файла .css, связанные с документом с помощью свойства @import в теге-контейнере style) - еще меньший приоритет, будут применяться в тех случаях, когда отсутствуют аналогичные правила CSS среди встроенных и внедренных стилей;
4) связанные стили (стили, присоединенные к html-файлу посредством тега link) - наименьший приоритет, будут применены только после того, как браузер убедится в отсутствии аналогичных правил во всех остальных типах стилей.
Таким образом, зная, в какой последовательности браузер анализирует таблицы стилей, мы можем задать 1 общую связанную таблицу для всех страниц сайта и при этом гибко управлять стилями отдельных страниц и отдельных элементов на странице. Именно с этой особенностью и связано слово "каскадные" в названии CSS (cascading style sheets) - несколько таблиц стилей, присоединенных к html-файлу, прокатываются через анализатор (браузер) неким "каскадом" в порядке их приоритетности.
Но на этом возможности гибкой настройки визуального оформления страницы с помощью таблиц стилей не заканчиваются. Существуют еще средства для различного представления 1-типных элементов с помощью 1 таблицы стилей - о них мы сейчас и поговорим.
Селекторы CSS
Допустим, мы хотим создать страницу, на которой будет 2 вида абзацев p, причем оба вида будут постоянно чередоваться и часто повторяться. Типичный пример такой страницы - интервью, в котором чередуются вопросы журналиста и ответы интервьюируемого. Естественно, при создании такой страницы мы захотим визуально отделить вопросы и ответы друг от друга. Если бы нам пришлось это делать теми средствами CSS, которые мы рассмотрели выше, то пришлось бы создавать две различные таблицы стилей. К счастью, в этом нет необходимости. Мы можем создать в 1 таблице стилей 2 различных id абзацев. Это будет выглядеть так:
<style>p#a{font-weight:bold;font-family:arial;font-size:8pt;color:red;margin-left:8px}p#b{font-family:serif;font-size:9pt;color:tan}</style><p id=a>Вопрос журналиста.<p id=b>Ответ интервьюируемого.
В приведенном примере вопросы журналиста будут отображаться шрифтом arial цвета red, жирным, размером 8pt с отступом 8px от левого края страницы. Ответы же будут отображены шрифтом serif размером 9pt цвета tan. Важно не забывать прописывать параметр id различным абзацам непосредственно в коде html.
Наиболее часто идентификаторы используются для элементов форм, которые имеют полную, либо ограниченную поддержку CSS (в зависимости от элемента). Вот пример назначения идентификатора и правил CSS таким элементам:
<style>input#tan{color:tan}input#red{color:red}</style><form><p>Текст, вводимый в это поле, будет отображен цветом tan: <input type=text id=tan name=i1 size=8><p>Текст, вводимый в это поле, будет отображен цветом red: <input type=text id=red name=i2 size=8></form>
Аналогичным образом уникальные идентификаторы могут быть назначены любому количеству любых элементов страницы. Это может быть полезно для обращения к элементу из программы на языке JavaScript и изменения стиля его отображения в ответ на действия пользователя, что позволяет создавать различные динамические эффекты.
Контекстные селекторы
Допустим, мы создали таблицу стилей, согласно которой все заголовки 1-го уровня на странице отображаются красным цветом на сером фоне, все абзацы - зеленым цветом на желтом фоне, а все выделенные посредством тега em слова внутри абзацев - черным цветом на серебристом фоне. Код таблицы стилей, как вы уже догадались, при этом выглядит так:
h1{color:red;background:tan}p{color:tan;background:red}em{color:black;background:silver}
Предположим, мы хотим также выделить какие-то слова в заголовке посредством того же тега <em>, но нас не устраивает появление черного цвета текста на серебристом фоне в заголовке. Мы хотим выделить слова в заголовке бордовым цветом на сером фоне. Для этого существуют контекстные селекторы. Запись правила, которое мы для этого добавим в таблицу стилей, будет выглядеть так:
h1 em{color:red;background:tan}
А вот пример кода страницы с использованием этого контекстного селектора:
<style>h1{color:red;background:tan}p{color:tan;background:red}em{color:black;background:silver}h1 em{color:#cc0;background:gray}</style><h1>Это заголовок 1-го уровня с <em>выделенным</em> словом</h1><p>А это обычный абзац с <em>выделенными словами</em>.
