HTML 5, CSS 3 и Web 2.0. Разработка современных Web сайтов - Владимир Дронов 19 стр.


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

Пример:

IMG[SRC*=/picts/] { margin: 10px }

Этот стиль будет привязан к графическим изображениям, теги которых имеют атрибут SRC со значением, включающим подстроку "/picts/", т. е. к изображениям, взятым из папки picts Web-сайта, откуда они загружены.

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

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

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

<основной селектор><псевдоэлемент> { <стиль> }

Псевдоэлемент ::first-letter привязывает стиль к первой букве текста в элементе Web-страницы, если ей не предшествует встроенный элемент, не являющийся текстом, например, изображение.

Пример:

P::first-letter { font-size: larger }

Этот стиль будет привязан к первой букве абзаца.

Псевдоэлемент ::first-line привязывает стиль к первой строке текста в элементе

Web-страницы:

P::first-line { text-transform: uppercase }

Данный стиль будет привязан к первой строке абзаца.

Псевдоклассы

Псевдоклассы - самая мощная разновидность специальных селекторов. Они позволяют привязать стиль к элементам Web-страницы на основе их состояния (наведен на них курсор мыши или нет) и местоположения в родительском элементе.

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

<основной селектор><псевдокласс> { <стиль> }

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

Псевдоклассы гиперссылок

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

Все псевдоклассы гиперссылок, доступные в стандарте CSS 3:

- :link - непосещенная гиперссылка;

- :visited - посещенная гиперссылка;

- :active - гиперссылка, на которой посетитель в данный момент щелкает мышью;

- :focus - гиперссылка, имеющая фокус ввода (подробнее о фокусе ввода см. в главе 6);

- :hover - гиперссылка, на которую наведен курсор мыши.

Псевдоклассы гиперссылок применяются совместно со стилями, задающими параметры для гиперссылок. Это могут быть стили переопределения тега <A> или комбинированные стили, созданные на основе стиля переопределения тега <A> (листинг 13.5).

Листинг 13.5

A:link { text-decoration: none }

A:visited { text-decoration: overline }

A:active { text-decoration: underline }

A:focus { text-decoration: underline }

A:hover { text-decoration: underline }

В листинге 13.5 псевдоклассы гиперссылок действуют совместно со стилями переопределения тега <A>. В результате приведенные стили будут применены ко всем гиперссылкам на Web-странице.

Листинг 13.6

A.special:link { color: darkred }

A.special:visited { color: darkviolet }

A.special:active { color: red }

A.special:focus { color: red }

A.special:hover { color: red }

В листинге 13.6 псевдоклассы гиперссылок совмещены с комбинированными стилями, объединяющими стиль переопределения тега <A> и стилевой класс special. Они будут применены только к тем гиперссылкам, к которым был привязан указанный стилевой класс.

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

A:visited:hover { text-decoration: underline }

Этот стиль будет применен к посещенной гиперссылке, над которой находится курсор мыши.

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

Структурные псевдоклассы

Структурные псевдоклассы позволяют привязать стиль к элементу Web-страницы на основе его местоположения в родительском элементе.

Псевдоклассы :first-child и :last-child привязывают стиль к элементу Web-страницы, который является, соответственно, первым и последним дочерним элементом своего родителя:

UL:first-child { font-weight: bold }

Этот стиль будет применен к пункту, являющемуся первым дочерним элементом своего родителя-списка, т. е. к первому пункту списка.

Пример:

TD:last-child { color: green }

Данный стиль будет применен к последнему дочернему элементу каждой строки таблицы - к ее последней ячейке.

Листинг 13.7 иллюстрирует более интересный случай.

Листинг 13.7

#cmain P:first-child { font-weight: bold }

. . .

<DIV ID="cmain">

<P>Этот абзац будет набран зеленым цветом.</P>

<BLOCKQUOTE>

<P>Этот абзац - тоже.</P>

</BLOCKQUOTE>

<BLOCKQUOTE>

<P>И этот - тоже.</P>

<P>А этот - нет.</P>

</BLOCKQUOTE>

</DIV>

Стиль, приведенный в листинге 13.7, будет применен к самому первому абзацу, единственному абзацу в первой большой цитате и первому абзацу во второй большой цитате. Дело в том, что последние два абзаца, к которым будет применен стиль, отсчитываются относительно своих родителей - больших цитат - и в них являются первыми.

А если мы изменим данный стиль вот так:

#cmain > P:first-child { font-weight: bold }

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

НА ЗАМЕТКУ

Стандарт CSS также описывает псевдоклассы :first-of-type и :last-of-type. На- сколько удалось выяснить автору, они работают так же, как и псевдоклассы :first- child и :last-child, которые мы только что изучили. По крайней мере, в текущей реализации поддержки CSS 3...

Псевдокласс :only-of-type привязывает стиль к элементу Web-страницы, который является единственным дочерним элементом, сформированном с помощью данного тега, в своем родителе.

Листинг 13.8 иллюстрирует пример.

Листинг 13.8

P:only-of-type { color: green }

. . .

<BLOCKQUOTE>

<P>Этот абзац будет набран зеленым цветом.</P>

</BLOCKQUOTE>

<BLOCKQUOTE>

<P>И этот абзац будет набран зеленым цветом.</P>

<ADDRESS>А этот текст - нет.</ADDRESS>

</BLOCKQUOTE>

<BLOCKQUOTE>

<P>И этот - нет.</P>

<P>И этот - нет.</P>

</BLOCKQUOTE>

Стиль из листинга 13.8 будет применен к абзацам, вложенным в первую и вторую большие цитаты, т. к. эти абзацы являются там единственными элементами, сформированными с помощью тега <P>. К абзацам, вложенным в третью большую цитату, стиль применен не будет.

Псевдокласс :nth-child позволяет привязать стиль к элементам Web-страницы, выбрав их по порядковым номерам, под которыми эти элементы определены в своем родителе:

<основной селектор>:nth-child(<a>n+<b>) { <стиль> }

После имени данного псевдокласса в скобках указывают формулу, по которой вычисляются номера элементов, к которым будет применен стиль. Эта формула имеет два параметра, задаваемых Web-дизайнером: a и b. Их значения должны представлять собой неотрицательные целые числа.

Рассмотрим, как выполняется привязка стиля, включающего псевдокласс :nth- child.

Сначала Web-обозреватель считывает CSS-код стиля и, руководствуясь его селектором, находит элементы Web-страницы, к которым, возможно, будет применен данный стиль. Также Web-обозреватель определяет родителя этих элементов.

После этого Web-обозреватель разбивает все найденные элементы на группы. Количество элементов в каждой группе задается параметром a приведенной формулы. После разбиения Web-обозреватель вычисляет количество получившихся групп.

Далее Web-обозреватель последовательно подставляет в формулу вместо n номера получившихся групп, начиная с нуля. В результате каждого прохода вычисления получается номер элемента, к которому применяется стиль.

Для примера создадим таблицу из пяти строк и применим к ней такой стиль:

TR:nth-child(2n+1) { text-align: center }

В стиле мы указали, что группа должна содержать два дочерних элемента. Тогда Web-обозреватель разобьет строки таблицы на две группы, по две строки в каждой.

- Web-обозреватель подставит в формулу n равное 0. После вычисления получится значение 1. Web-обозреватель применит данный стиль к первой строке таблицы.

- Web-обозреватель подставит в формулу n равное 1. После вычисления получится значение 3. Web-обозреватель применит данный стиль к третьей строке таблицы.

Web-обозреватель подставит в формулу n равное 2. После вычисления получится значение 5. Web-обозреватель применит данный стиль к пятой строке таблицы. Поскольку 2 - общее количество групп, то на этом вычисления закончатся.

В результате данный стиль будет применен к каждой нечетной строке нашей таблицы.

Если мы создадим такой стиль:

TR:nth-child(2n+0) { text-align: center }

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

TR:nth-child(2n) { text-align: center }

Ранее мы рассматривали примеры с разбиением дочерних элементов на группы. Но мы можем отменить разбиение, указав нулевое количество элементов в группе. В этом случае Web-обозреватель найдет b-й дочерний элемент и применит стиль к нему.

Так, если мы создадим такой стиль:

TR:nth-child(0n+2) { text-align: center }

то Web-обозреватель применит его ко второй строке таблицы. Мы можем записать данный стиль и так:

TR:nth-child(2) { text-align: center }

и Web-обозреватель правильно его обработает.

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

TR:nth-child(odd) { background-color: grey } TR:nth-child(even) { background-color: yellow }

Первый стиль будет применен к нечетным строкам таблицы, второй - к четным. Псевдокласс :nth-last-child аналогичен рассмотренному нами псевдоклассу

:nth-child за тем исключением, что отсчет дочерних элементов ведется не с начала, а с конца родительского элемента.

Пример:

TR:nth-last-child(1) { text-align: center }

Данный стиль будет применен к последней строке таблицы. Пример:

#cmain P:nth-last-child(2) { font-weight: bold }

А этот стиль будет применен к предпоследнему (второму с конца) абзацу в контейнере cmain.

НА ЗАМЕТКУ

Еще стандарт CSS описывает псевдоклассы :nth-of-type и :nth-last-of-type. На- сколько удалось выяснить автору, они работают так же, как и псевдоклассы :nth- child и :nth-last-child. Хотя, возможно, в следующих реализациях они будут действовать по-другому.

Последний структурный псевдокласс, который мы изучим, - :empty. Он привязывает стиль к элементам, не имеющим дочерних элементов.

Пример:

P:empty { display: none }

Этот стиль будет привязан к пустым (не имеющим содержимого) абзацам.

Псевдоклассы :not и *

Особый псевдокласс :not позволяет привязать стиль к любому элементу Web- страницы, не удовлетворяющему заданным условиям. Таким условием может быть любой селектор:

<основной селектор>:not(<селектор выбора>) { <стиль> }

Стиль будет привязан к элементу Web-страницы, удовлетворяющему основному селектору и не удовлетворяющему селектору выбора.

Пример:

DIV:not(#cmain) { background-color: yellow }

Здесь мы указали в качестве основного селектора стиль переопределения тега <DIV>, а в качестве селектора выбора - именованный стиль cmain. В результате данный стиль будет применен ко всем блочным контейнерам, за исключением cmain.

А вот стиль, который будет применен ко всем строкам таблицы, за исключением первой:

TR:not(:nth-child(1)) { background-color: grey }

Псевдокласс * ("звездочка") обозначает любой элемент Web-страницы. Пример:

#cmain > *:first-child { border-bottom: medium solid black }

Этот стиль будет применен к первому элементу любого типа, который непосредственно вложен в контейнер cmain.

Представление для нашего Web-сайта, часть 8

Да, специальные селекторы - мудреная штука... Разобраться в них без хорошей практики невозможно. Так давайте попрактикуемся.

Вот список параметров Web-страниц нашего Web-сайта, которые мы зададим с по- мощью специальных селекторов.

- Текст непосещенных и посещенных гиперссылок - не подчеркнут, цвет #576C8C (темно-синий).

- Текст посещенных гиперссылок, расположенных в полосе навигации, - не подчеркнут, цвет #576C8C. Мы задали для непосещенных и посещенных гиперссылок в полосе навигации одинаковые параметры - так принято.

- Текст посещенных гиперссылок, не расположенных в полосе навигации, - не подчеркнут, цвет #A1AFBA (синий).

- Текст активной гиперссылки - подчеркнут, цвет #576C8C.

- Текст гиперссылки, на которую наведен курсор мыши, - подчеркнут, цвет #576C8C.

- Текст гиперссылки, имеющей фокус ввода, - подчеркнут, цвет #576C8C.

- Шрифт первой буквы первого абзаца в контейнере cmain - 18 пунктов и полужирный.

- Выравнивание текста в ячейках первого и второго столбцов таблицы - списка версий HTML - по центру. Эти ячейки содержат исключительно числа, и центральное выравнивание для них подходит больше.

Чтобы воплотить задуманное, нам потребуется добавить в таблицу стилей main.css несколько новых стилей (листинг 13.9).

Листинг 13.9

A:link { color: #576C8C; text-decoration: none }

A:visited { color: #A1AFBA; text-decoration: none }

A:focus, A:hover, A:active { color: #576C8C; text-decoration: underline }

Стили из листинга 13.9 задают параметры гиперссылок, расположенных вне полосы навигации. Здесь мы активно используем псевдоклассы гиперссылок.

Листинг 13.10

#navbar A:link, #navbar A:visited { color: #576C8C; text-decoration: none }

#navbar A:focus, #navbar A:hover, #navbar A:active { color: #576C8C; text-decoration: underline }

Стили из листинга 13.10 задают параметры гиперссылок полосы навигации. Отметим, что здесь применяются комбинированные стили, содержащие указание на список navbar, который формирует полосу навигации, - так проще и нагляднее.

Вот стиль, задающий параметры первой буквы первого абзаца в контейнере cmain (т. е. в основном содержимом Web-страницы):

#cmain > P:first-child:first-letter { font-size: 18pt; font-wight: bold }

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

- #cmain > P - абзац должен быть непосредственно вложен в контейнер cmain.

- #cmain > P:first-child - помимо того, абзац должен быть первым дочерним элементом своего родителя (данного контейнера).

- #cmain > P:first-child:first-letter - ну и, собственно, указываем на первую букву данного абзаца. Именно к ней будет привязан этот стиль.

Обратим внимание - мы специально указали, что абзац должен быть непосредственно вложен в контейнер cmain. Если мы этого не сделаем, написав так:

#cmain P:first-child:first-letter { font-size: 18pt; font-weight: bold }

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

Вот два одинаковых стиля, задающих выравнивание текста по центру для первой и второй ячеек каждой строки таблицы:

.table-html-versions TD:first-child,

.table-html-versions TD:nth-child(2) { text-align: center }

Как видим, они представляют собой комбинированный стиль, включающий стилевой класс table-html-versions.

Чтобы данные стили начали действовать на таблицу, нам придется привязать этот

стилевой класс к ее тегу <TABLE>:

<TABLE CLASS="table-html-versions">

<CAPTION>Список версий HTML:</CAPTION>

. . .

</TABLE>

Вот и все. Добавим приведенные стили в таблицу стилей main.css, внесем исправления в Web-страницу index.htm, сохраним их и откроем Web-страницу index.htm в Web-обозревателе. Хороша, правда?

На этом разговор о представлении Web-страниц закончен.

Что дальше?

В этой, последней главе части II мы завершили рассмотрение CSS изучением специальных селекторов. И, разумеется, применили новые знания на практике.

Разговор о представлении Web-страниц и стилях CSS, с помощью которых оно создается, был долгим и продуктивным. Мы изучили множество атрибутов стиля, управляющих самыми разными параметрами элементов Web-страниц: шрифтом, цветом, фоном, выравниванием, отступами, рамками и др. А наш Web-сайт стал выглядеть намного лучше.

В части III мы будем рассматривать поведение Web-страниц. Мы познакомимся с принципами Web-программирования, языком программирования JavaScript и библиотекой Ext Core, сильно упрощающей работу программистов - нас с вами. Так что впереди еще много интересного!

Назад Дальше