разработка

графика

продвижение и PR

будни разработки

обзоры

How do I Select Thee, Let Me Count the Ways?..

В прошлом материале мы уже получили представление о CSS (Cascading Style Sheets), предлагающем лучший способ управление представлением html-документов. Сегодня мы начнем более глубокое изучение темы и разберем такие вопросы, как более сложный селекторный синтаксис, общий синтаксис CSS и аргументы Cascading Style Sheets.

Уровни CSS и глобальный синтаксис
Блоки
HTML-комментарии
Rulesets (таблицы правил)
At-rules
Селекторы So Far
Группировки и контекстные селекторы
Псевдоэлементы

Уровни CSS и глобальный синтаксис

Нарушая старую добрую традицию разработчиков ПО, которая поддерживалась десятилетиями, люди, которые разрабатывали CSS спецификации решили разбивать их не на версии, а на уровни. Повод для этого не только в том, что это побеждает запрос их CSS 3.1, CSS 95, CSS 98 и CSS NT.Каждый уровень CSS подразумевает более развернутый предыдущий уровень, что требует полной совместимости между уровнями.

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

Есть в настоящее время два уровня CSS, соответственно названного Level 1 и Level 2, и любовно называемые большинством из нас CSS1 и CSS2. Таковые Вас, желая войти в них могут находить связи(ссылки) к спецификациям в Связях(ссылках) со Стилем (http://www.webreference.com/html/links.html). CSS поддерживается двумя самыми известными браузерами Internet Explorer и Netscape Navigator. Первая реализация (начиная с Internet Explorer 3.0) была, мягко говоря, ужасной, и, соответственно разрушила всеобщие мечты о совместимости между уровнями CSS, поскольку браузер понял некоторые формы CSS синтаксиса неправильно и не сумел проигнорировать некоторые формы более расширенного синтаксиса, интерпретируя это их собственным творческим способом. Эта прекрасная традиция реализации ошибок была, увы, продолжена и в Internet Explorer 4.0, и в Netscape Navigator 4.0 (первая версия навигатора, поддерживающая CSS).

Пока весь мир, затаив дыхание, использует пятые версии этих двух браузеров (при активном участии http://www.mozilla.org/ в развитии одного из них), использование CSS - это очень тонкий процесс, который содержит большое количество подводных камней.

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

Глобальный Синтаксис

Каждая таблица стилей CSS состоит из ряда инструкций. Эти инструкции могут быть окружены незаполненным пространством (пробелы, переводы строки и табуляции) которое игнорируется. Есть два типа инструкций: rulesets и at- rules.

В любой части CSS-документа вы можете использовать комментарии. Комментарий начинается с наклонной вправо черты и звезды (/*) и заканчивается в обратном порядке (*/). Обратите внимание, что комментарии не могут быть вложены, то есть Вы не можете иметь комментария в рамках комментария.

Блоки

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


{           /* начало внешнего блока*/

 foo;

 { bar; }   /* внутренний блок */

 baz;

 bafoo;

}           /* конец внешнего блока*/

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


{           /* внешний блок запущен, но не закрыт*/

foo;

bar;

{           /* начало внутреннего блока */

 baz;

}           /* конец внутреннего блока */

Другие символы, которые должны всегда быть согласованы - круглые скобки ((и)), прямоугольные скобки ([и]), одинарные кавычки ('и') и двойные кавычки ("и"). Содержимое одинарных и двойных кавычек рассматривается как string (последовательность) и имеет особый смысл в CSS.

HTML-комментарии

В прошлом материале мы видели, что Вы можете вставлять таблицу стилей в документ HTML, используя элемент STYLE. Однако могут возникнуть следующие проблемы: есть вероятность того, что некоторые старые браузеры, которые не понимают, что элемент STYLE должен отобразить таблицу стилей, внедренную таким образом, покажут ошибку на html-cтранице или же отобразят содержимое тега STYLE как часть контента. По этой причине используют скобки html-комментариев - открывающая скобка () в конце. Такие комментарии не создают проблем для новых браузеров, Это не причиняет проблему для более новых браузеров, так как содержимое элемента STYLE обрабатывается как CSS, а не как HTML, а сами скобки комментариев игнорируются синтаксическим анализатором CSS. Вот - пример элемента STYLE, содержащего таблицу стилей, которая начинается и заканчивается скобками комментариев HTML:


<STYLE TYPE="text/css">

<!--

H1 {

 text-align: center;

 color: red;

}

ADDRESS {

 color: green;

}

-->

</STYLE>

Rulesets (таблицы правил)

Возвращаясь к формулировкам следует напомнить, что они могут или быть rulesets или at-rules. Ruleset начинается с селектора, сопровождаемого блоком, содержащим ряд деклараций. Мы рассмотрели селекторы в предыдущем материале, и теперь обсудим их синтаксис в достаточно глубоко в этой статье. Обратите внимание на пример ruleset:


H1.special {

  background-color: gray;

  color: green;

}

H1.special - это селектор, дальше идет блок, содержащий две декларации. Сами декларации состоят из свойства и значения, отделенного двоеточием (:), и отделены точками с запятой (;). Если проиллюстрировать использование пробелов, символов табуляции и пустой строки, вышеупомянутый пример ruleset эквивалентен следующему:

H1.special { background-color: gray ; color: green }

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

At-rules

В то время как rulesets имеет своей целью определения предоставления различных элементов, At-rules используются для большего количества общих целей в таблице стилей. At-rules начинается с символа "собачка" (@) и идентификатора (набор символов, упростить вещи) и включает все до точки с запятой. Так, посмотрите на следующее at-rule:


@import url("colorful.css");

И следующее:

@media print {

  background-color: transparent;

}

Обратите внимание, что второй пример - не набор правил, хотя и напоминает его; @media print - не селектор, так как это начинается с символа "собачка" (@). Интерпретация содержимого после идентификатора зависит от типа идентификатора - @import at-rules будет иметь не такой синтаксис, как @media at-rules или любой другой вид at-rules

Наконец, есть специальное правило синтаксиса, для которого весь @import at-rules должен быть в самом начале таблицы стилей, ему предшествуют только символы табуляции, пробела, пустой строки или комментарии.

Селекторы So Far

В предыдущем материале мы получили представление о некоторых основных типах селекторов. В частности, селектор может быть именем элемента, в этом случае назначенные ему свойства будут соответствовать всем элементам этого типа. Так же его имя может начинаться с точки (.), и последовательностью символов, тогда это будет соответствовать всем элементам того типа, которые имеют атрибут CLASS и их значениям, описанным в этой последовательности. Так же он может просто состоять из точки и последовательности, и в этом случае он будет соответствовать всем элементам с этим КЛАССОМ, независимо от их типа. Замещение точки меткой (#) соответствует атрибуту ИДЕНТИФИКАТОРА (ID) вместо класса (class). Замещение точки двоеточием (:) в паре определяет псевдокласс, который имеет специальную характеристику. Мы рассматривали псевдоклассы link, visited и active, которые обозначают непосещеные, посещенные и активные гиперссылки.

Чтобы освежить память, рассмотрим следующий пример:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"

 "http://www.w3.org/TR/REC-html40/strict.dtd">

<HTML>

<TITLE>Пример HTML-документа, демонстрирующий основные CSS-селекторы</TITLE>

<STYLE TYPE="text/css">

<!--

H1 { color: red; /* A */ }

H1.special { font-style: italic /* B */ }

.wierd { color: magenta; /* C */ }

#unique { color: blue; /* D */ }

P#different { color: yellow; /* E */ }

A:link { color: green; /* F */ }

A:visited { color: darkgreen; /* G */ }

A:active { color: purple; /* H */ }

-->

</STYLE>

<BODY>



<H1 CLASS="special">A and B apply</H1>



<P CLASS="special"> Для этого содержимого стиль  не задан.</P>



<P CLASS="wierd">C applies.</P>



<P ID="unique">D applies.</P>



<P><SPAN ID="unique">D applies</SPAN>. 

<SPAN ID="different">Для этого содержимого стиль  не задан.</SPAN>. 

<A HREF="http://www.i2r.ru/"> на этом примере вы можете протестировать использование стилей для не пройденных ссылок, пройденных и активных - F, G, или H </A>.

<A NAME="bar">Для этого содержимого стиль  не задан</A>.</P>

Те из вас, кто использует Netscape Navigator 4.0 могли бы заметить некоторое несоответствие со стороны браузера. Netscape Navigator 4.0 - второй элемент SPAN - желтого цвета, что означает, что ему соответствует стиль P*different, не смотря на то, что этот стиль назначен для параграфа, а не для SPAN; Internet Explorer, однако, это правило обрабатывает корректно.

С первого взгляда здесь нет большой проблемы, поскольку атрибут ID может соответствовать только одному элементу. Проблема появляется в случае, если css-файл с таким селектором применяют для нескольких HTML страниц. Если два таких документа содержат два элемента разных типов, но с одинаковым ID, и существует селектор в CSS который сопоставляет этот ID только с одним типом элементов, Navigator применит набор правил для обоих элементов. Обойти эту проблему проще всего не делая этого. Скорее всего у вас не будет необходимости в таком решении, и вы всегда сможете назначить элементу другой ID.

Группировки и контекстные селекторы

В CSS определены еще два типа селекторов: Группировка и Контекстные отборщики.

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


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"

 "http://www.w3.org/TR/REC-html40/strict.dtd">

<HTML>

<TITLE>HTML-документ с примером группировок основных селекторов</TITLE>

<STYLE TYPE="text/css">

<!--

BODY {

  color: blue;

  background-color: cyan;

  font-family: Helvetica, Arial, sans-serif;

}



H1, H2, H3 {

  color: red;

  font-family: Garamond, Times, sans-serif;

}

-->

</STYLE>

<BODY>



<H1>Heading 1</H1>



<H2>Heading 2</H2>



<H3>Heading 3</H3>



<P>В данном примере мы отображаем заголовки первых трех уровней красным цветом и назначаем всем трем одно семейство шрифтов<P>

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

Таким образом вы можете объеденять в группу любой селектор. Давайте немного изменим предыдущий пример. Заголовки H1, H2 и H3 будут отображаться такими, какие они заданы по умолчанию, однако заголовок, у которого указан CLASS="special" (в данном случае H3) воспроизведет стиль .special


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"

 "http://www.w3.org/TR/REC-html40/strict.dtd">

<HTML>

<TITLE>Example HTML Document Showcasing Basic CSS Selectors</TITLE>

<STYLE TYPE="text/css">

<!--

BODY {

  color: blue;

  background-color: cyan;

  font-family: Helvetica, Arial, sans-serif;

}



H1, H2, H3.special {

  color: red;

  font-family: Garamond, Times, sans-serif;

}

-->

</STYLE>

<BODY>



<H1>Heading 1</H1>



<H2>Heading 3</H2>



<P> в примере первые два заголовка имеют стиль, заданный по умолчанию</P>



<H3 CLASS="special">Heading 3 Class Special</H3>



<P>А заголовоку третьего уровня присваивается класс .special</P>

Контекстные селекторы - такая хитрая форма селекторов. Контекстный селектор выбирает элемент некоторым видом предка. Элемент предка - элемент, который содержит элемент, который мы хотим выбрать. Предок - не обязательно прямой родитель рассматриваемого элемента. Это лучшее иллюстрировано примером. В следующем HTML документе, во втором параграфе, элемент DIV - предок элемента P (параграфа), а тот в свою очередь является родителем для элемента STRONG, т.е. P так же является родителем элемента STRONG.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"

 "http://www.w3.org/TR/REC-html40/strict.dtd">

<HTML>

<TITLE>Предлагаем пример кода html-документа с контекстными селекторами.</TITLE>

<STYLE TYPE="text/css">

<!--

BODY {

  color: blue;

  background-color: cyan;

  font-family: Helvetica, Arial, sans-serif;

}



H1, H2 {

  color: red;

  font-family: Garamond, Times, sans-serif;

}



EM { font-style: normal; color: red; }

H1 EM { color: green; }



DIV.special STRONG { color: purple; 

                     font-weight: normal; }



-->

</STYLE>

<BODY>



<H1>Приглашаем в <EM>Библиотеку Сайтостроительства</EM>!</H1>



<P>Библиотека сайтостроительства предоставляет <EM>некоторое количество статей</EM>, которые, возможно, будут интересны нашим читателям</P>



<DIV CLASS="special">

<P>Особенно в библиотеке хочется выделить статьи по <STRONG>Веб-дизайну и графике</STRONG>, хотя и другие тоже хороши </P></DIV>

Здесь вы так же можете видеть использование контекстных селекторов. В этом примере необходимо было использовать красный цвет для заголовков первого уровня и для содержимого EM, но выделенное EM внутри заголовка H1 нужно было отобразить зеленым цветом. Цвета для примера подобраны произвольно, и, возможно, безвкусно, однако с поставленной задачей мы справились.

Псевдоэлементы

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

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

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


P:first-line {

  font-weight: bold;

}

P:first-letter {

  font-size: 300%;

  float: left;

}



<P>Tакой вот параграф, в котором первая строка выделяется жирным шрифтом и старательно "обтекает" первую букву, однако увидеть этот эффект вы сможете не во всех браузерах к сожалению.<P>

На сегодняшний день мы рассмотрели селекторный синтаксис, описанный в CSS level1. CSS2 позволяет определять несколько более расширенные формы селекторов, но поскольку в настоящее время не все браузеры поддерживают level2, мы рассмотрим их через некоторое время.

До встречи.

По мотивам WebReference.Com

Предыдущий материал:

Введение в CSS (Каскадные Таблицы Стилей)

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

наверх

Вукс Татьяна