2014-02-10
471
Генерация содержимого в Web-страницах с использованием стилей
Интегральное свойство list-style
Интегральное свойство list-style задает значения типа, изображения маркера и позиции в списке (значения могут задаваться в любом порядке). Если какое-либо значение опущено, для данного свойства принимается значение по умолчанию.
Пример 4.3.71. Использование свойства list-style:
В примере 4.3.69 при задании атрибута style элемента ol можно задать значение обоих свойств (list-style-image и list-style-positon) в одном свойстве list-style:
<ol style="list-style: url(ListImage.gif) inside">.
В начало и в конец содержимого любого элемента Web-страницы можно вставить текст, изображение или кавычки. Для этого используются псевдоэлементы:before и:after, а также свойство content.
Свойство content задает содержимое вставки и может принимать следующие значения:
· none – вставка не генерируется (значение по умолчанию);
· normal – аналогично значению none;
· строка – данное типа строка (см. 4.3.11.3);
· URL – вставка изображения;
· вставка значения атрибута;
|
|
|
· open-quote и close-quote – вставка соответственно открывающей и закрывающей кавычки;
· no-open-quote и no-close-quote – ничего не вставляет, но увеличивает или уменьшает уровень скобок, задаваемых в свойстве quotes;
· счетчик – задание изменяющегося счетчика.
Значения строка, URL, attr(имя-атрибута), open-quote, close-quote, no-open-quote, и no-close-quote не являются альтернативными, т.е. в качестве значения свойства может быть задано произвольное количество этих значений, отделенных друг от друга одним или несколькими пробельными символами.
Задание псевдоэлемента:before для элемента означает, что содержимое, определенное в свойстве content содержимое для этого элемента будет вставлено перед выводом содержимого элемента, а задание псевдоэлемента:after для элемента означает, что содержимое, определенное в свойстве content содержимое для этого элемента будет вставлено после вывода содержимого элемента,
Значение свойства content типа строка задает строку, вставляемую до или после содержимого элемента. Если вставляемая строка должна содержать несколько строк, переход на новую строку задается внутри строки с помощью символа "\A" (однако большинство Web-браузеров пока игнорируют этот символ).
Пример 4.3.72. Вставка строки в свойстве content:
p.remark:before {content: "Примечание: ";
font-weight:bold; color:green}
…
<p class="remark">Это правило действует только
для положительных чисел.</p>
В результате действия правила с использованием псевдоэлемента:before содержимое абзаца класса remark будет иметь следующий вид:
|
Изображение вставляется в вывод до или после содержимого элемента с помощью функции url.
|
|
|
Пример 4.3.73. Вставка изображения в свойстве content:
p.attention:before {content: "Внимание: "
url(rightButton.png)
" "; font-weight:bold; color:red; font-size:20pt}
p.attention:after {content: " " url(leftButton.png)}
…
<p class="attention">Значение x должно быть больше 0.</p>
В результате действия правила с использованием псевдоэлементов:before и:after содержимое абзаца класса attention будет иметь следующий вид:
|
Для вставки значения атрибута используется функция attr(имя-атрибута). В этом случае в элементе, в котором производится вставка ищется атрибут с именем имя-атрибута и, если этот атрибут найден, его текстовое значение вносится во вставляемую строку. Атрибут необязательно должен быть допустимым атрибутом для данного элемента – можно задать атрибут с любым именем, удовлетворяющим правилам формирования имен в HTML.
Пример 4.3.74. Вставка значения атрибута в свойстве content:
p.insertNumber:before {content: "Замечание: "
attr(remarkNumber) ": ";font-weight: bold}
…
<p class="insertNumber" remarkNumber="1">Для задания одного
из фиксированных маркеров в списке можно использовать
свойство list-style-type.</p>
<p class="insertNumber" remarkNumber="2">Для задания
произвольного маркера-изображения в списке можно
использовать свойство list-style-image.</p>
В результате действия правила с использованием псевдоэлемента:before содержимое абзацев класса insertNumber будет иметь следующий вид:
|
Задание кавычек во вставляемом содержимом производится из списка кавычек, задаваемых в свойстве quotes. В качестве значения этого свойства задается одна или несколько пар кавычек, либо значение none – отсутствие кавычек. Каждая пара содержит открывающую и закрывающую кавычку. Вставка в содержимое открывающей и закрывающей кавычки производится с помощью значений open-quote и close-quote в свойстве content. В качестве значения открывающей кавычки берется значение первой кавычки в первой паре кавычек, а в качестве значения открывающей кавычки – второй кавычки в первой паре кавычек. Если между значениями open-quote и close-quote содержится другая пара значений, то для внутренней (вложенной) пары кавычек берется вторая пара кавычек и т.д. Если в списке содержится меньше пар кавычек, чем число вложений в свойстве content, то в качестве текущих значений кавычек берутся пары предыдущего уровня вложенности.
Пример 4.3.75. Вставка вложенных кавычек:
p,span.cite {quotes: "«" "»" '"' '"'}
p.cite:before {content: "Цитата дня: " open-quote;
font-weight:bold}
p.cite:after {content: close-quote; font-weight:bold}
span.cite:before {content: open-quote; color:red}
span.cite:after {content: close-quote; color:red}
…
<p class="cite">Никогда не говори
<span class="cite">никогда</span></p>
В результате действия правила с использованием псевдоэлементов:before и:after содержимое абзаца класса cite будет иметь следующий вид:
|
