1.4.10. Преобразование регистра

Для преобразования регистра отображения текста служит параметр text-transform, который принимает следующие значения:

none - преобразование не производится;

capitalize - каждое слово в строке начинается с прописной (заглавной) буквы;

lowercase - все символы текста отображаются как строчные (в нижнем регистре);

uppercase - все символы текста отображаются как прописные (в верхнем регистре).

1.4.11. Мультиколоночная верстка

Расположение текста в нескольких колонках можно обеспечить с помощью раз­метки страницы табличными тегами или тегами <div>. Однако при этом текст и другое содержимое придется распределять между колонками вручную. Нередко требуется, чтобы текст автоматически отображался в одной или нескольких колон­ках в зависимости от ширины окна браузера или содержащего его контейнера. Для решения данной задачи в CSS 3 предлагается ряд параметров:

columns - определяет ширину и количество колонок (имеются и отдельные па­раметры column-width и column-count);

column-gap - определяет ширину промежутков между колонками;

column-rule - определяет ширину, стиль и цвет рамок между колонками (имеются и отдельные параметры column-rule-width, column-rule-style и column-rule-color).

Пример:

Body {columns: 2 15em;

column-gap: 1em;

column-rule: thin solid blue

}

Для настройки колонок есть и другие параметры (www.w3.org/TR/css3-muIticol). В настоящее время они поддерживаются браузерами Firefox, Safari и Chrome, если к именам параметров добавить префиксы -moz- и -webkit- соответственно для Firefox и остальных двух.

1.5. Предварительно отформатированный текст

И ногда в (Х)НТМL-документ необходимо включить фрагмент текста, предвари­тельно отформатированный обычными средствами текстового редактора, т. е. с ис­пользованием пробелов, символов перевода строки, табуляции и т. п. Для этого предусмотрен контейнерный тег <рге>. В примере на рис. текст, заключенный в контейнерный тег <рге>, представляет собой таблицу, построенную с помощью символов перевода строки и табуляции. Если обычно браузер игнорирует эти сим­волы, то в случае применения тега <рге> он их учитывает при разметке текста. Текст внутри тега <рге> выводится моноширинным шрифтом. Разумеется, с помо­щью таблицы стилей можно добавить дополнительные параметры форматирова­ния, такие как размер, толщина, имя шрифта и др.

Для отображения предварительно отформатированного текста можно также применять параметр CSS white-space, который принимает следующие значения:

normal - текст выводится как обычно;

nowrap - текст выводится одной

строкой без переносов, если только не исполь­зовался тег <bг/>;

рrе - текст выводится с учетом всех пробелов и других служебных символов, как он был набран в

текстовом редакторе.

В отличие от тега <рrе>, текст с параметром white-space выводится не обяза­тельно моноширинным шрифтом.

1.6. Генерируемое содержимое

С помощью CSS можно добавлять к элементам некоторое содержимое, изна­чально отсутствующее в теле документа. Например, заголовки глав книги не обяза­тельно начинать со слова "Глава". Это слово, как и номер главы, можно сгенериро­вать и добавить к содержимому элемента, например <h1> при отображении документа.

Содержимое, располагающееся до и после элемента, добавляется с помощью псевдоклассов :before и :after соответственно, а его определение - с помощью параметра content. Например, если вы хотите добавить перед всеми заголовками первого уровня (элементами <h1>) слово "Раздел", то достаточно использовать та­кое правило:

h1:before {content:"Раздел"}

Параметр content, поддерживаемый всеми современными браузерами, в том числе и Internet Explorer 8.0, принимает следующие значения:

• строка - добавляемый текст, заключенный в кавычки; специальные символы представляются шестнадцатеричным кодом Unicode с обратным слэшем в каче­стве префикса; например, символ параграфа (§) представляется как \A7, символ доллара ($) - как \24;

• url (адрес) - URL-адрес вставляемого объекта; например h1 {content:url("picture.jpg")}

е сли браузер не может отобразить объект, то данный параметр просто игнори­руется;

• attr(атрибут) - значение ука­занного атрибута элемента, к ко­торому оно добавляется; напри­мер, для добавления к картинке ее адреса можно использовать правило img:after{attr(href)};

• open-quote - добавляет откры­вающую кавычку, тип которой устанавливается с помощью па­раметра quotes; например

p:before {content: open-quote; quote: "<"}

• dose-quote - добавляет за­крывающую кавычку, тип кото­рой устанавливается с помощью параметра quotes;

• no-open-quotes - отменяет добавление открывающей кавычки (применяется для тех элементов, которые автоматически добав­ляют кавычки к содержащемуся внутри них тексту);

• no-close-quote - отменяет добавление закрывающей кавычки.

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

На рис. показан пример, в котором перед элементами <h1> добавляется ге­нерируемое содержимое, а именно картинка с изображением буквы "Г" из файла g.jpg, текст "лава" и вычисляемый номер элемента, за которым следуют точка и пробел:

h1:before {

content: url("g.jpg") "лава" counters(item, "") ". ";

counter-increment:item

}

Номер главы (элемента <h1>) здесь вычисляется следующим образом:

counters (item, "") - текущее значение счетчика с идентификатором item (назначается произвольно); второй параметр задает разделитель при нумерации иерархических списков и здесь не играет никакой роли;

counter-increment: item - увеличение текущего значения счетчика item;

counter-reset: item- обнуление счетчика задается в правиле для контейнера <div>.

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

Пример №1 для самостоятельной реализации:

Р ассмотрим в качестве примера создание двухуровневого оглавления книги (листинг 1, рис.). Структура оглавления размечена тегами <div> и <span>. Названия глав и пара­графов заключены в контейнеры <span>, отображаемые в блочном виде (display:block). Обратите внимание на разметку оглавления, обеспечивающую его многоуровневость. Параграфы, относящиеся к одной главе, заключены в тег <div>, который включается в тег <span>, соответствующий данной главе. В свою очередь теги <span> для глав включены в об­щий <div> самого верхнего уровня.

Первая буква в слове "Гла­ва" - графическое изображение, а символ параграфа представлен в Unicode как \А7. Нумерация элементов оглавления отражает его иерархическую структуру.

Чтобы элементы номера разделялись точкой, применено значение counters (item,". ") параметра contents.

Листинг 1. Оглавление книги

<!DOCTYPE HTML

PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN"

"http://www.w3.org/TR/HTML4.01/loose.dtd">

<html>

<head><title>Оглaвлeниe книги</title>

<style type="text/css">

div {

counter-reset:item

}

span {

display:block;

font-size:12pt

}

div span:before { /* 1-й уровень */

letter-spacing:3px;

font-weight:bold;

content:url("g.jpg") /* буква Г */

"лава "

counters (item, ".") ". ";

counter-increment:item

}

div span div span:before { /* 2-й уровень */

letter-spacing:0;

padding-left:30рх;

content:

"\A7" /* параграф */

counters(item,".") ". ";

counter-increment:item

}

</style>

</head>

<body>

<div>

<span>Что такое HTML и CSS

<div>

<span>Языки разметки</span>

<span>Таблицы стилей</span>

</div>

</span>

<span>Структура HTML-документа

<div>

<span>Опpeделение типа документа</span>

<span>Структура собственно документа</span>

<span>Разделы документа</span>

</div>

</span>

<span>Основы CSS</span>

<span>Позиционирование с помощью CSS</span>

</div>

</body>

</html>

Аналогично можно построить оглавление и большей вложенности. По существу мы реализовали посредством тегов <div> и <span> иерархический список, хотя для решения этой задачи в HTML имеются специальные теги <ui>, <oi> и <ii>, кото­рые мы рассмотрим ниже.