Введение в CSS

В этой главе:

1. Уровни CSS и совместимость
2. Методы применения в XHTML
3. Правила синтаксиса CSS
4. Значения и типы данных

CSS – это язык каскадных таблиц стилей (Cascading Style Sheets), позволяющий авторам и пользователям подключать стили (например, шрифты, цвета и т.д.) в структурированные документы (например, документы HTML и приложения XML). Применение CSS упрощает создание и обслуживание Web-сайта путем разделения структуры и стиля представления документов, поскольку стиль представления документов становится практически независимым от их содержания. В этой части книги мы рассмотрим применение CSS для XHTML-документов.

Уровни CSS и совместимость

Ознакомившись с вводной частью этого издания, а также изучая некоторые примеры из второй части, вы уже могли составить представление о том, что такое таблицы стилей. Теперь мы перейдем к более полному их изучению. Прежде всего, следует отметить, что имеются разные версии CSS, подобно тому, как существуют HTML 2.0, 3.2 и 4.0. Правда, в случае с таблицами стилей, говорят не о версии, а об уровне. В настоящее время полностью определены CSS уровней 1 и 2, и ведется разработка CSS уровня 3. При этом полностью поддерживаются современными браузерами лишь CSS уровня 1, а с поддержкой CSS 2 достаточно хорошо обстоят дела лишь у Mozilla и Opera.

ПРИМЕЧАНИЕ
С момента публикации "бумажного" издания ситуация улучшилась: все современные браузеры практически полностью поддерживают CSS 2.1 (даже MSIE 8), и довольно неплохо обстоят дела с поддержкой CSS 3, особенно у Firefox и Chrome.

С другой стороны, в некоторой степени браузеры, в том числе MSIE, поддерживают и какие-то расширения из готовящейся спецификации CSS 3-го уровня (например, в MSIE 6 имеется поддержка дополнительных типов указателей мышки). При всем этом по ряду отличительных признаков тот же MSIE 6 остается CSS-1 браузером. Тем не менее, за основу мы возмем именно 2-й уровень таблиц стилей, основываясь на его последней версии – CSS 2.1, в которую, в свою очередь, были добавлены некоторые из уже поддерживаемых на практике расширений CSS 3.

ПРИМЕЧАНИЕ
Если вы читали предыдущее издание этой книги, вышедшее в конце 2000 года, то, возможно, отметите, что про CSS 3 упоминалось еще тогда! Однако разработка нового стандарта слишком затянулась, и к настоящему моменту последней принятой версией является CSS 2.1 – «дополненная и исправленная» редакция CSS уровня 2.

Любые браузеры, поддерживающие CSS 2, могут успешно воспринимать таблицы стилей CSS 1. В свою очередь, браузеры, поддерживающие CSS 1, могут читать таблицы стилей CSS 2, игнорируя те выражения, которые не доступны их пониманию. Кроме того, программы, не поддерживающие CSS вообще, смогут отображать HTML-документы с использованием доступных им стилей (например, базовые правила оформления HTML – крупные заголовки, выделенные курсивом цитаты и т.д.). Разумеется, стилистические улучшения, появляющиеся за счет использования CSS, при этом не смогут быть отображены, но все содержимое документа будет представлено. Последнее условие еще раз напоминает нам о том, что документ должен изначально быть правильно структурирован средствами HTML, а на CSS возлагается лишь его законченное представление.

Теперь обратимся к практической поддержке CSS различными программами просмотра. Одним из первых браузеров, в котором была декларирована поддержка CSS, был MSIE 3.0. Однако поддержка таблиц стилей в нем присутствовала лишь номинально. Зато уже в 4-й версии Microsoft реализовало поддержку CSS первого (и единственного на тот момент) уровня практически полностью. К сожалению, этим дело и ограничилось – все последующие версии MSIE не внесли практически ничего нового, лишь в версиях 5.5 и 6.0 была произведена некоторая доработка (например, поддержка точечных и пунктирных рамок).

Что касается Netscape, то в нем поддержка CSS была введена в версии 4.0, однако реализована она была не так хорошо – сказывалось наследие стремительно устаревающих предыдущих версий программы. Кардинально решить проблему был призван Gecko – движок, изначально разрабатывавшийся в недрах Netscape, а ныне поддерживаемый open-source сообществом в лице Mozilla Organization. Поскольку разработка Gecko началась уже после принятия CSS 2, то именно его (за некоторыми исключениями, о которых еще будет сказано) и поддерживают сейчас все Mozilla-браузеры.

Наконец, в бразуре Opera поддержка CSS также появилась достаточно давно – еще в версиях 3.х. При этом, хотя в первое время поддерживались лишь CSS 1, да и то не полностью, современные версии Opera в вопросе поддержки CSS 2 могут составить достойную конкуренцию браузерам Mozilla, в чем-то отставая, а в чем-то опережая разработчиков этого продукта с открытым исходным кодом.

В настоящее время разработчики Opera и Mozilla, а так же Safari (браузер для Apple Macintosh), тесно сотрудничают в области улучшения поддержки Web-стандартов, в том числе и в вопросе совместимости с CSS. Особняком, как обычно, стоит лишь Microsoft – зачем вкладывать деньги в ту область, где вам и так уже принадлежит (по крайней мере, пока принадлежит) 90% рынка?

Методы применения в XHTML

Для внедрения таблиц стилей в HTML и XHTML-документы применяются уже знакомые нам конструкции, а именно элементы STYLE, LINK и атрибут STYLE. Для взаимодействия с таблицами стилей так же могут быть задействованы атрибуты CLASS и ID. Рассмотрим все три этих способа на примере из листинга 3.1.

Листинг 3.1. Три способа внедрения CSS

Таким образом, в этом примере мы встречаем все три способа подключения таблиц стилей средствами языка разметки. Первым нам встречается элемент LINK, связывающий файл, содержащий код CSS с текущим документом, затем идет элемент STYLE, являющийся контейнером для кода CSS, и, наконец, в теле документа мы видим атрибут STYLE, значением которого так же является код CSS. Из всех приведенных способов подключения наиболее предпочтительным является первый, поскольку именно он обеспечиваем максимальную гибкость в оформлении. Так, создав один такой файл, определяющий стили для разрабатываемого сайта, впоследствии можно ссылаться на него во всех его Web-документах. Соответственно, чтобы быстро подправить оформление (например, изменить цветовую гамму), достаточно будет внести изменения только в данный CSS-файл, и никуда более.

В тоже время, два других способа тоже имеют право на жизнь. Например, если вы создаете одну единственную web-страницу, то выносить стили в отдельный файл нет никакого смысла (по крайней мере, до тех пор, пока к этой странице не добавится другая, а потом еще одна, и еще…). Другим оправданным применением элемента STYLE является указание каких-либо дополнительных стилей, уникальных для данной страницы (например, титульной). Указывать стили непосредственно на странице бывает полезно и в том случае, когда вы только начинаете работать над оформлением – тогда действительно может быть удобным править стили непосредственно в документе, чтобы не отвлекаться на переключение между файлами. В последнем случае важно только не забыть перенести все стили в отдельный файл по окончанию «оформительской» работы.

Что касается последнего способа – применения встроенных (inline) стилей – то от его использования на практике, по возможности, следует дистанцироваться, поскольку он входит в некоторое противоречие между самим смыслом использования стилей – т.е. разделения форматирования и оформления. Хотя, конечно, бывают и такие ситуации, когда использовать атрибут STYLE удобно – например, для той же отладки оформления документа или в иных подобных случаях (например, в этой книге мы довольно часто будем применять этот атрибут для удобства восприятия). Во всех других лучше использовать атрибуты CLASS или ID, определяя для них соответствующие селекторы в стилях. Впрочем, о селекторах, классах и идентификаторах мы подробно поговорим несколько позже, а пока рассмотрим еще раз пример их использования. Так, если в CSS определен класс Test (например, «.Test {color: brown}»), то в теле документа ссылка на данный класс для любых элементов будет выглядеть так:

Что касается идентификаторов, то в HTML они маркируются атрибутом ID:

Следует отметить, что помимо рассмотренных способов применения стилей, существуют и другие. Например, сама таблица стилей может ссылаться на файл с другой таблицей при помощи директивы @import (которая является уже частью языка CSS):

Ну, и, кроме того, свойства можно назначать при помощи сценариев, о чем будет рассказано уже в посвященной сценариям части книги.

Правила синтаксиса CSS

Каждая таблица стилей представляет собой, как минимум, одно определение, состоящее из разделенной двоеточием пары свойство-значение. Например, в случае внедрения стиля при помощи атрибута STYLE мы получаем такой вод код:

В данном случае относящийся к CSS фрагмент – это «text-align: center». Здесь text-align является свойством CSS, а center – значением, присвоенным этому свойству; такую пару мы будем называть составленным правилом CSS. Значением может быть не только какое-то ключевое слово (как в данном случае), но и самые разные данные – числа, шестнадцатеричные номера цветов, фрагменты текста, адреса URI и т.д., в зависимости от того, какие именно типы значений допустимы для данного свойства. Более того, для ряда свойств допустимо указание сразу нескольких значений:

Обратите внимание на точку с запятой в конце определения: она применяется для того, чтобы отделить одно правило от другого. И хотя в данном случае, как и в примере выше, этот знак не является обязательным, во избежание потенциальных ошибок лучше всегда завершать любое правило точкой с запятой. Например, чтобы совместить два только что рассмотренных правила для абзаца, следует написать так:

Использование одних лишь правил допустимо, когда создается inline-таблица стилей, во всех других случаях необходимо указывать, к чему следует применять создаваемый набор правил. Делается это при помощи указания дескриптора, к которому должны быть применены определяемые стили, при этом само правило (или их набор) заключается в фигурные скобки:

В данном случае определены два правила, причем оба будут применены к любому элементу P в пределах документа или группы документов, на которые распространяется действие данной таблицы стилей. При этом сохраняется возможность группировать правила в наборы, не забывая только использовать точку с запятой в качестве разделителя:

Поместив такое определение CSS в контейнер STYLE, мы получим документ, все абзацы которого будут иметь определенное в этой записи оформление.

Подобно тому, как объединяются правила, можно делать и обратную задачу – назначать одно правило сразу для нескольких элементов. В таком случае следует просто перечислить все нужные дескрипторы через запятую:

Здесь мы определили выравнивание по центру сразу для трех элементов – абзаца и заголовков первого и второго уровней.

Обратите внимание на то, что в CSS, в отличие от XHTML, значения, являющиеся ключевыми словами, не берутся в кавычки. Так, в данном случае center является ключевым словом, т.е. имеет специальный смысл для программы, «понимающей» CSS. Если бы мы заключили его в кавычки, то оно было бы воспринято как строка, что в данном случае неуместно, поскольку для свойства text-align строковые значения недопустимы. В то же время, в XHTML, как нам известно, любые значения атрибутов следует заключать в кавычки:

Продолжая тему синтаксиса, следует упомянуть о том, что в языке CSS, подобно другим «компьютерным» языкам, имеется такой полезный инструмент, как комментарии. Если в HTML комментарий начинается с сочетания символов «<!—» и заканчивается «-->», то в CSS начало комментария определяется косой чертой со звездочкой, а заканчивается ими же в обратном порядке:

Комментарии могут находиться в любом месте таблицы стилей и нередко используются в процессе отладки. Например, если нам требуется временно отключить выравнивание по центру, то достаточно закомментировать это правило:

В данном случае для того, чтобы временно отключить правило выравнивания по центру (text-align: center), мы его закомментировали.

Подобно комментариям в HTML, комментарии CSS могут быть многострочными, и не могут содержать в себе иных комментариев или сочетаний символов, которые могут быть приняты за открывающий или, тем более, закрывающий комментарий CSS. По отношению к комментариям, не лишним будет отметить, что сам код CSS, внедренный в HTML-документ, может быть вложен в комментарий HTML:

Это делается для того, чтобы скрыть код CSS от примитивных браузеров, не распознающих ни таблицы стилей, ни элемент STYLE, подобно тому, как это принято для сценариев, внедренных при помощи элемента SCRIPT. Впрочем, любой современный браузер, даже если он не поддерживает таблицы стилей, «знает» о том, что они все-таки существуют, а потому проигнорирует содержимое контейнера STYLE в любом случае.

Значения и типы данных

От общих правил синтаксиса CSS перейдем к типам данных, поддерживаемых этим языком. Как мы уже знаем, для ряда свойств предусмотрены специальные значения, задаваемые идентификаторами. В то же время, для других свойств следует указывать какие либо иные значения, включая числовые, процентные и т.д.:

• Числа. Могут быть целыми (integer) или дробными (number). Задаются при помощи цифр от 0 до 9, дробная часть отделяется при помощи точки. Как правило, используются для определения размера относительно чего-либо;
• Размеры (lengths). Задаются при помощи числа и следующего слитно с ним идентификатора меры. Длины бывают двух типов – относительные (em, ex, px) и абсолютные (in, cm, mm, pt, pc);
• Процентные значения (percentages). Определяются при помощи целого числа со знаком процента (%). Процентные значения всегда бывают относительными, т.е. вычисляются по отношению к другому значению, например, к длине;
• Адреса (URI) задаются при помощи префикса «url» и должны быть заключены в круглые скобки, от которых их может отделять пробел или кавычки;
• Цвета (colors) определяются либо по ключевым словам цветов (red, green, blue и т.д.), либо по RGB-составляющей цвета, которая задается в числовой шестнадцатеричной или десятеричной, либо в процентной нотации;
• Строки (strings) определяют какие-либо строковые значения и должны быть заключены в двойные или одинарные кавычки.

Рассмотрим все эти типы подробнее. Если с числами все просто: в качестве значения свойства просто указывается число, то для размеров предусмотрен целый ряд идентификаторов, включая относительные (вроде размера кегля у выводимого шрифта) и абсолютные, задаваемые метрическими, английскими или типографскими системами мер. Приведем их в таблице3.1.

Очевидно, что по сравнению с HTML, имеющего всего одни значение – пиксель, возможности CSS по определению размеров гораздо гибче. Что же касается процентов, то тут все как у HTML, за тем лишь исключением, что в CSS можно указывать не только целые, но и дробные значения (например, 55.5%).

Адреса в CSS могут использоваться, например, для ссылки на фоновую картинку или на иной файл CSS:

Следует отметить, что пробелы и кавычки между собственно адресом и круглыми скобками не являются обязательными, но уж если вы открыли кавычку, то не забудьте ее закрыть. Кроме того, выделение пробелами часто улучшает визуальное восприятие, облегчая тем самым чтение и правку кода CSS.

Все, что было сказано про цвета HTML в первой части этой книги, в равной мере относится и к цветам в CSS – вы можете их указывать при помощи ключевых слов (red, green) или шестнадцатеричными кодами (#ff0000, #008000). При этом можно использовать и менее точные данные – по 1 символу на каждую составляющую, при этом, цвет, заданный как #fb1 ,преобразуется в #ffbb11. Вместе с тем, в CSS предусмотрен еще один способ – при помощи нотации в форме функции – подобно тому, как это делается с URL. Однако в данном случае, указывают не одно единственное значение (URI), а целых три, определяющих красную, зеленую и синюю составляющие цветов, причем значения могут быть либо числовыми (от 0 до 255), либо процентными (от 0 до 100%). Итак, для того, чтобы задать красный цвет можно воспользоваться одним из 5 способов:

Подробнее о цветах будет рассказано в главе, посвященной визуальному оформлению, а мы тем временем перейдем к строкам. Собственно в значениях CSS они используются достаточно редко – например, лишь в свойствах quotes и contents можно указать строку в качестве значения. Однако вы будете довольно часто с ними встречаться по другому поводу – например, как составную часть URI. И с этой точки зрения мы с ними уже знакомы, важно лишь запомнить, что в общем случае строка всегда должна быть заключена в кавычки – двойные или одинарные, но одного типа в начале и в конце:

Если сама строка содержит в тексте кавычки, то старайтесь использовать для ее выделения кавычки другого типа:

Если же это невозможно, то кавычки в тексте строки следует выделить как последовательность символов при помощи обратного слеша:

Ну и, наконец, если строка длинная и есть желание перенести ее на следующую линию, следует использовать последовательность из символов «\s»:

Помимо рассмотренных типов данных, в CSS встречаются еще и такие, как счетчик (counter), угол (angle), время (time) и частота (frequency). Но если про счетчики мы еще упомянем в этой книге, то оставшиеся три значения, относящиеся к речевым стилям, оставим без внимания.

2011-06-15 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !

« Стили и сценарии | Селекторы CSS »