SNK Software
Web Studio Монополия Metaproducts Утилиты Игры
Монополию Web Studio Библиотека
Вебмастер Дельфи Работа на ПК Самоучитель
Для PHP Для Delphi
Веб-дизайн Программирование Компьютеры Девайсы Заметки
SNK Software Индустрия hardware Индустрия software
О студии Портфолио Сопровождение сайтов

Новые материалы

Девайсы:
Сравнительный обзор Nokia Lumia 920 и HTC 8X
Девайсы:
Обзор Nokia Lumia 820 – смартфона на WP8
Вебмастеру:
Настройка Apache, PHP и MySQL для Linux-VPS
Вебмастеру:
VPS на домашнем ПК: настройка сети в VM VirtualBox и Debian
Вебмастеру:
VPS на домашнем ПК: устанавливаем Linux Debian 6
Вебмастеру:
VPS на домашнем ПК: установка VM VirtualBox
Работа на компьютере:
Иные возможности текстового процессора Word
Работа на компьютере:
Вставка объектов
Работа на компьютере:
Таблицы в Word
Работа на компьютере:
Печать и сохранение документов
Работа на компьютере:
Сноски, колонтитулы, оглавление и указатели в Word

Генерируемое содержимое и списки CSS

В этой главе:

  1. Вставки (псевдоэлементы (:before и :after)
  2. Свойство content
  3. Кавычки (quotes)
  4. Автонумерация и счетчики (counter)
  5. Списки (list-style)

При работе с web-документами нередко возникает необходимость в том, чтобы на экране отображалось содержимое, не принадлежащее самому документу. Пожалуй, наиболее типичным примером такой ситуации является нумерованный список: когда числа, которыми пронумерованы элементы списка OL не задаются явным образом, а автоматически генерируются браузером во время загрузки. Это – хорошо известный пример, знакомый нам еще по языку HTML. Еще один пример (правда, до недавних пор менее очевидный из-за того, что не он поддерживается MSIE6/7) – это элемент Q, который «обрамляет» цитату в кавычки. В этом случае как раз кавычки я являются генерируемым содержимым, поскольку в исходном документе их нет.

ВНИМАНИЕ
Обратите внимание на то, что генерируемое содержимое не изменяет дерева документа, поскольку в нем находятся только те элементы, что были определены разработчиком страницы явно (присутствуют в его исходном тексте).

Однако если в XHTML только парой элементов все и ограничивается, то при помощи CSS 2 можно добиться гораздо большего. Например, у вас может возникнуть желание, чтобы браузер вставлял слово «Рисунок» перед названием рисунка или строку «Глава № N» перед заголовком N-ой главы. И используя средства, предоставляемые CSS уровня 2, этого можно добиться.

Единственное условие – это поддержка со стороны браузера, и как раз тут начинается главная проблема: генерируемое содержимое (за исключением списков) вообще не поддерживается MSIE до 8-й версии и сравнительно слабо реализовано в ранних версиях Firefox. Тут следует отметить браузер Opera, и на примере именно этой программы просмотра мы будем рассматривать ряд возможностей CSS 2, относящиеся к генерации содержимого и автонумерации. Впрочем, новые версии MSIE и Firefox, а так же браузер Chrome, поддерживают все эти возможности, основываясь на спецификациях CSS 2.1.

Вставки

Еще в начале нашего знакомства с каскадными таблицами стилей мы познакомились с такими конструкциями CSS 2, как псевдоэлементы :before и :after, используемыми для вставки определенного содержимого перед и после собственного содержимого элемента. В классическом варианте это является наиболее простым вариантом генерируемого содержимого: создается селектор, в котором указывается какая-либо строка для вставки:

p.note:before {content: "Примечание: "} p.note:after {content: "..."}

Таким образом, любой элемент P класса note будет выводиться со словом «Примечание» с двоеточием – в начале и с многоточием – после собственного текста. Давайте рассмотрим этот вариант подробнее, заодно применив ряд уже изученных свойств CSS, для чего обратимся к листингу 3.12.

Листинг 3.12. Название листинга

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <head> <title>Вставки до и после</title> <style type="text/css"> p.note {margin: 1em 2em 0.5em 4em; font-style: italic; padding-left: 10px; border: solid green; border-bottom-color: limegreen; border-right-color: limegreen; } p.note:before {content: "Примечание: "; display: block; width: 100px; background: lime; font-weight: bold; padding-left: 10px; margin-left: -10px; border-right: solid; border-bottom: solid; border-color: limegreen; } p.note:after {content: "..."} </style> </head> <body> <p>Это - простой абзац текста</p> <p class="note">А это - весьма и весьма ценное и при этом чрезвычайно интересное и, пожалуй, даже несколько многозначительное примечание</p> </body> </html>

Для начала определен класс note элемента P, с которым будут производиться все модификации. Рассмотрим его свойства по порядку. Прежде всего, для него определены отступы в 1 символ сверху, 2 символа справа, полсимвола снизу, и 4 символа слева. Далее задан наклонный шрифт и внутреннее поле в 10 пикселей слева. После чего следует определение рамок: сначала задана общая рамка – сплошная зеленая, а затем для нижней и правой сторон цвет переопределяется на более светлый.

Теперь перейдем к самому интересному – собственно псевдоэлементу before. Самое важное свойство, специально предназначенное для этого псевдоэлемента – content, в качестве значения для которого в данном случае используется строка. После чего изменяется тип отображения псевдоэлемента – вместо принятого по умолчанию строкового типа, назначается блочный.

ПРИМЕЧАНИЕ
Вообще для псевдоэлементов допускается только 4 значения свойства display. Это: none, inline, block и marker, причем последнее не поддерживается браузерами (и исключено из CSS 2.1), а block допустим только в тех случаях, когда областью действия селектора является элемент уровня блока.

В данном случае, установив такой тип отображения, мы добиваемся того, что текст псеводэлемента будет находиться в отдельном блоке (и, следовательно, на отдельной строке). Затем ширина того блока ограничивается 100 пикселями, чтобы он не «расползался» на всю строку. Далее задается цвет фона и полужирное начертание шрифта. Вслед за этим происходит следующее: сначала задается левое внутреннее поле размером 5 пикселей, смещающее текст на 5 пикселей вправо, после чего задается левое внешнее поле с отрицательным смещением в 10 пикселей, т.е. для смещения влево. Суть последнего определения в том, что, поскольку для общего блока задано левое внутреннее поле шириной 10 пикселей, то для того, чтобы сгенерированная вставка не оказалась оторванной от общей рамки, приходится его компенсировать внешним полем с отрицательным смещением. В итоге как вставленный при помощи before текст, так и собственный текст абзаца будут начинаться с одинаковым отступом от общей границы (рис. 3.20).

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

Рис. 3.20. Псевдоэлементы и иные стили в действии.

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

Наконец, последним определяется второй псевдоэлемент – after, который в данном случае попросту добавляет многоточие в конец абзаца.

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

Свойство content

На примере вставок мы уже узнали о том, что есть свойство content. Но, на самом деле, возможности этого свойства не ограничиваются одной лишь возможностью вставки предопределенного текста. В частности, при помощи свойства content можно определять открывающие и закрывающие кавычки (значения open-quote, close-quote), значения атрибутов (функция attr), а так же счетчики (функции counter и counters). Впрочем, со счетчиками и кавычками мы разберемся позже, а здесь рассмотрим вставку значений атрибутов.

Вставка значений атрибутов как генерируемого содержимого осуществляется при помощи функции attr(X), где вместо X вставляют имя атрибута:

a:after {content: attr(href)}

В результате обработки браузером такого правила после текста каждой ссылки будет выводиться ее адрес. Единственная неприятность будет состоять в том, что адрес будет непосредственно примыкать к тексту. Но поскольку в качестве значения свойства content можно указывать неопределенное множество значений, добавим еще 2 строковых значения – до и после функции attr:

a:after {content: " (" attr(href) ") ";}

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

В начале этой главы упоминалось выведение надписей к рисункам, так рассмотрим использование свойства content в этом контексте. Пусть перед рисунком будет выводится надпись «Рисунок», а после – содержимое атрибута ALT. В таком случае нам следует создать следующие 2 правила:

img:before {content: "Рисунок: ";} img:after {content: " " attr(alt) ".";}

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

ПРИМЕЧАНИЕ
Данный пример с IMG будет работать только в браузере Opera: другие программы просмотра поддерживают псевдоэлементы лишь для непустых элементов (т.е. для тех, у которых имеется закрывающий тег). Соотвеетственно, следует избегать использования псевдоэлементов для IMG, BR, HR, а так же для внедренных объектов (OBJECT и т.п.).

Таким образом, мы рассмотрели 2 возможных значения свойства content – строки и функцию attr. В CSS 2 было объявлено еще и такое значение, как url (например, рисунка для вставки), а в CSS 2.1 – normal, означающее, что никакой вставки быть не должно. Соответственно, если указать такую запись в дополнение к последнему примеру, для рисунка, имеющего атрибут title, псевдоэлемента :after создано не будет:

img[title]:after {content: normal;}

Примеры также можно посмотреть в фале content.html.

Свойства :before и :after

Значение по умолчанию: normal. Наследуемые значения: нет. Применяется: к псевдоэлементам :before и :after. Совместимость: кроме MSIE 6/7.

Кавычки

При рассмотрении свойства content мы упомянули про кавычки. Действительно, в качестве его значения можно указывать такие ключевые слова, как open-quote, close-quote, no-open-quote и no-close-quote. Однако то, что будет выведено в качестве, скажем, open-quote, определяет другое свойство – quotes. В качестве значения для quotes указываются пары кавычек:

q:lang(ru) {quotes: "«" "»";}

Здесь мы определили, что для элемента Q, встречающегося в контексте текста на русском языке, следует применять двойные фигурные кавычки. Хотя в данном случае мы и указали только 1 пару, можно указывать и больше, при этом первая пара будет использоваться для внешнего уровня, вторая – для первого вложения в кавычки и т.д. Например, можно дополнить пример таким вот образом:

q:lang(ru) {quotes: "«" "»" "<" ">";}

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

Вновь обратимся к свойству content. Дело в том, что его значения open-quote и close-quote извлекаются из списка пар (открывающих и закрывающих) кавычек. Поскольку в браузерах предопределен такой стиль элемента Q, что в качестве значения content уже значится open-quote для :before и close-quote – для :after, то остается лишь задать верные типы кавычек. При этом крайне полезно следить за тем, чтобы объявленный язык документа соответствовал действительности.

Еще одним важным моментом в деле определения вида кавычек является то, что в стандартной раскладке клавиатуры многие символы отсутствуют. Соответственно, их приходится указывать в качестве ссылок на символы. Здесь мы приведем некоторые, пригодные в качестве кавычек, а с более полным списком можно ознакомиться в приложении Б.

Таблица 3.9. Символы кавычек
СимволНазваниеОбозначение
кодом символа
Символьное
обозначение
Код по
ISO 10646
"Прямая двойная кавычка (ASCII)&#34;&quot;0022
«Левая двойная угловая кавычка&#171;&laquo;00AB
»Правая двойная угловая кавычка&#187;&raquo;00BB
Левая одинарная кавычка&#8216;&lsquo;2018
Правая одинарная кавычка&#8217;&rsquo;2019
Нижняя одинарная кавычка&#8218;&sbquo;201A
Левая двойная кавычка&#8220;&ldquo;201C
Правая двойная кавычка&#8221;&rdquo;201D
Нижняя двойная кавычка&#8222;&bdquo;201E

Следует заметить, что символы с кодом выше 255 отсутствуют в классической ASCII таблице символов. Соответственно, если указанный шрифт или операционная система посетителя (например, Windows 95) не поддерживают Unicode, то вместо кавычки, скорее всего, браузер «нарисует» белый квадратик.

Еще одна проблема применения нестандартных кавычек кроется в том, что, поскольку генерируемое содержимое фактически не обрабатывается браузером (т.е. выводится «как есть»), то, по крайней мере, в Mozilla подстановка ссылок на символы приведет к тому, что вместо нужной кавычки отобразится сама &-последовательность. Соответственно, вместо привычных по XHTML ссылок на символы, здесь следует указывать коды символов в ISO 10646, используя косую черту (обратный слеш):

q {quotes: "\201E" "\201D";}
Свойства quotes

Значение по умолчанию: как правило, прямая двойная кавычка.
Наследуемые значения: да.
Применяется: ко всем элементам.
Совместимость: кроме MSIE 6/7.

Автонумерация и счетчики

Наконец, мы подошли к последнему, и, пожалуй, наиболее интересному способу использования свойства content (ну и псевдоэлементов :before и :after тоже). Это – счетчики, для которых, как мы знаем, в свойстве content было объявлено 2 функции – counter и counters. Сейчас мы их и рассмотрим, однако прежде следует ознакомиться с двумя дополнительными свойствами CSS, специально предназначенными для управления счетчиками – counter-increment и counter-reset. Первое определяет величину, задаваемую целым числом, на которую увеличивается значение счетчика при каждом вхождении, а второе свойство определяет начальное значение.

В качестве значений для свойств counter-increment и counter-reset используют имена счетчиков, после которого из которых может быть указано число. В типичном случае ограничиваются указанием только имени счетчика:

h2:before {content: counter(par);}

Здесь для заголовков H2 будет вставляться нумерация на основании того, в каком по счету элементе класса par они находятся. Допустим, что par – это класс блока DIV, и на странице находятся 3 таких блока, а в начале каждого из которых находится по заголовку H2. В таком случае заголовки должны получить номера 1, 2 и 3. Но на самом деле, если создать такой документ и открыть его в браузере Opera, то все заголовки будут промаркированы нулями. Как раз здесь и приходится вспомнить про одно из специальных свойств автонумерации – counter-increment. Хотя по умолчанию значение приращения равно 1, самого приращения не будет происходить, если не объявлено, что оно вообще должно быть для данного счетчика. Поэтому к определению генерируемого содержимого с функцией counter, следует добавить такую запись:

counter-increment: par;

Если теперь вновь взглянуть на документ, можно отметить, что как и в случае с функцией attr, никаких пробелов не добавляется. Соответственно, остается их добавить в определение счетчика:

h2:before {content: "\00A7 " counter(par) ". "; counter-increment: par; }

Применение такого правила приведет к тому, что каждый заголовок автоматически получит свой номер (рис. 3.21, см. так же файл counter.html).

Автоматическая нумерация в CSS

Рис. 3.21. Автоматическая нумерация

Теперь рассмотрим свойство counter-reset. Его предназначение состоит в том, чтобы сбрасывать значение счетчика по достижении им определенного места в документе. Допустим, в примере выше нам надо было бы пронумеровать не только параграфы, но и абзацы с них. В таком случае можно было бы просто добавить счетчик для них:

p:before {content: counter(item) " "; counter-increment: item;}

Здесь мы попутно использовали ключевое слово item в качестве обозначения имени счетчика. Применительно к данному случаю, оно означает, что единицей счета является любой элемент P. Однако нумерация получилась бы сквозной, т.е. первый абзац второго параграфа получил бы в качестве номера не 1, а число, на единицу больше номера последнего абзаца в первом параграфе. Поэтому воспользуемся свойством counter-reset, чтобы сбрасывать счетчик в начале каждого параграфа, для чего дополним определение заголовка H2 в CSS следующим правилом:

counter-reset: item;

Теперь после каждого заголовка нумерация абзацев будет начинаться с 1. Важно отметить, что во всех браузерах, где поддержка счетчиков появилась после принятия CSS 2.1 (т.е. во всех, кроме opera), согласно новой редакции стандарта требуется явно инициализировать счетчик, иначе нумерация работать не будет. Таким образом, для нумерации верхнего уровня (в данном случае счетчик par для H2) следует определить counter-reset для элемента верхнего уровня, т.е. для body:

body {counter-reset: par;}

Если бы надо было указать, что счет надо начинать не с 1, а с другого числа (например, с 10), то его следовало бы указать вслед за названием счетчика:

body {counter-reset: par 9;}

То же самое касается и свойства counter-increment: число после названия счетчика определяет его приращение при каждом вхождении.

Свойства counter-increment и counter-reset

Значение по умолчанию: none.
Наследуемые значения: нет.
Применяется: ко всем элементам.
Совместимость: Opera 8, MSIE 8, Firefox 3, Chrome.

Списки

Мы уже рассмотрели в этой главе вопросы нумерации, применимые к любым элементам, но, как известно, еще со времен первых версий HTML, существует специальный элемент для построения нумерованных списков – OL. Кроме него, определено еще несколько элементов для списков, в частности UL и DL, хотя классическими видами списков являются только OL и UL, содержимое которых (элементы LI) определено в CSS как display: list-item.

Именно для таких видов списков и предназначены следующие 3 свойства таблиц стилей: list-style-type, list-style-position, list-style-image. Для этой группы свойств так же определен короткий синтаксис – свойство list-style.

Начнем со свойства list-style-type, определяющего такой важный параметр, как вид списка. В этом данное свойство CSS подобно по своему действию HTML-атрибуту TYPE, например:

ul {list-style-type: square}

Здесь мы определили маркер в виде квадратика для обычного (ненумерованного) списка. Однако если в HTML имелось строгое деление: одни значения – для OL, другие – для UL, то в CSS таких границ нет, и, в принципе, ничего не мешает превратить обычный список в нумерованный, как и наоборот:

ul {list-style-type: decimal} ol {list-style-type: circle}

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

Помимо предусмотренных в XHTML вариантов маркеров и нумерации, в CSS имеется ряд дополнительных. Всего для свойства list-style-type в CSS 2 определено свыше 20 значений, 3 из которых предназначены для указания типа маркера, 5 – для указания одного из трех типов буквенной нумерации и 15 – для числовой. Все они приведены в таблице 3.10.

Таблица 3.10. Варианты списков, определяемых свойством list-style-type
ЗначениеПримечаниеТип списка
decimalПо умолчанию для нумерованных списковНумерованный десятичными числами
decimal-leading-zeroКроме MSIE 6/7Нумерованный десятичными числами, дополненными вначале нулями
lower-roman-Нумерованный римскими цифрами, представленными строчными буквами
upper-roman-Нумерованный римскими цифрами, представленными прописными буквами
hebrewКроме MSIE и OperaНумерованный традиционной еврейской нумерацией
georgianКроме MSIE 6/7Нумерованный традиционной грузинской нумерацией
armenianКроме MSIE 6/7Нумерованный традиционной армянской нумерацией
cjk-ideographicКроме MSIE и OperaНумерованный идеографическими числами (традиционная китайская)
hiraganaКроме MSIE и OperaИероглифическая нумерация hiragana
katakanaКроме MSIE и OperaИероглифическая нумерация katakana
hiragana-irohaКроме MSIE и OperaИероглифическая нумерация hiragana-irona
katakana-irohaКроме MSIE и OperaИероглифическая нумерация katakana-irona
lower-latin, lower-alphalower-latin – кроме MSIE6/7Алфавитно-нумерованный строчными буквами ASCII
upper-latin, upper-alphaupper-latin – кроме MSIE6/7Алфавитно-нумерованный прописными буквами ASCII
lower-greekКроме MSIE6/7Алфавитно-нумерованный строчными буквами греческого алфавита
discПо умолчанию для ненумерованных списковНенумерованный, маркер в виде жирной точки
square-Ненумерованный, маркер в виде квадратика
circle-Ненумерованный, маркер в виде окружности
none-Без маркера

Примеры всех видов списков можно увидеть в файле lists.html, причем очевидно, что для того, чтобы увидеть все их варианты, просматривать его придется в Firefox, seaMonkey, Safary или Chrome, а вот MSIE и даже Opera поддерживают далеко не все варианты. Кроме того, для вывода иероглифических символов у вас на компьютере должна быть установлена поддержка соответствующих языков и шрифтов.

Теперь обратимся к другим свойствам списков. Пожалуй, самым интересным из оставшихся свойств является list-style-image, которое используется для ненумерованных списков в тех случаях, когда надо заменить банальные кружки какими-либо изображениями. Делается это путем присвоения адреса картинки значению этого свойства:

<ul style="list-style-image: url('check.gif')"> <li>раз</li> <li>два</li> </ul>

Таким образом, в качестве маркера для всех строк этого списка будет использован рисунок из файла «check.gif».

Другим способом оформления списков, известным нам по текстовым редакторам вроде Word, является использование символа. К сожалению, в CSS 2 (и даже в CSS 3, в которых определено свыше 100 различных типов маркеров) не предусмотрено непосредственной возможности использовать в качестве маркера какой-либо символ, указав его в качестве значения для какого-либо свойства списков. Однако это ограничение можно обойти, используя другие свойства и селекторы CSS 2. Например, можно задать маркер при помощи псевдоэлемента :before, определив его (и свойство content) для элементов LI:

li:before {content: "\263A"; }

Здесь мы определили, что в качестве начала строки будет использоваться символ Unicode 263A – «?». Теперь остается убрать маркер, назначаемый по умолчанию, а заодно добавить отделяющий пробел после символа маркера и передвинуть его влево до позиции, на которой располагаются стандартные маркеры:

ul {list-style-type: none; } ul li:before {content: "\263A "; margin-left: -1em; }

Пример такого маркера можно посмотреть в файле list.html. В нем же можно найти список с графическими маркерами, а также посмотреть на результат использования еще одного свойства – list-style-position.

Свойство list-style-position может принимать всего 2 значения – outside (принято по умолчанию) и inside, изменяя при этом расположение блока маркера. Так, при внешнем (Outside) расположении маркер расположится в отдельном блоке слева от блока с содержимым элемента списка. А при внутреннем (inside) расположении маркер будет являться первым символом первой строки.

Наконец, остается упомянуть сокращенный вариант записи параметров списка – свойство list-style. Оно может объединять в себе значения одного, любых двух или всех трех свойств списков:

ol {list-style: decimal outside;} ul {list-style: inside square url("check.gif");}

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

Свойства list-style

Значение по умолчанию: list-style-type – disc (для нумерованных списков – decimal); list-style-position – outside; list-style-image – none.
Наследуемые значения: да.
Применяется: к элементам списков.
Совместимость: все (см. табл. 3.10 по совместимости отдельных значений для list-style-type).

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

Избранное

SNK GSCP
SNK GSCP - новая библиотека для PHP 5!
Web Studio
Web Studio и Visual Workshop
Библиотека:
Стандарты на web-технологии
Монополия
Монополия Android
Загрузки:
скачать программы
Продукция:
программы и книги
Техподдержка / Связаться с нами
Copyright © 1999-2013 SNK. Все права защищены.
При использовании материалов с сайта ссылка на источник обязательна.
Рейтинг@Mail.ru