Категории
Меню
Лучшие книги » Компьютеры и Интернет » Интернет » HTML, XHTML и CSS на 100% - Игорь Квинт

HTML, XHTML и CSS на 100% - Игорь Квинт

Читать онлайн HTML, XHTML и CSS на 100% - Игорь Квинт

Шрифт:

-
+

Интервал:

-
+

Закладка:

Сделать
1 ... 31 32 33 34 35 36 37 38 39 ... 59
Перейти на страницу:

• Глава 1:

· 1.1;

· 1.2.

• Глава 2:

· 2.1;

· 2.2 и т. д.

Код таблицы следующий:

h1:before {

content: "Глава " counter(chapter) ". ";

counter-increment: chapter; /* Добавление 1 к номеру главы */

counter-reset: section; /* Установка значения 0 для раздела */

}

h2:before {

content: counter(chapter) "." counter(section) " ";

counter-increment: section;

}

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

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

Важно помнить, что свойство counter-reset поддерживает правила каскада. По этим правилам в следующей таблице стилей сбрасывается только счетчик imagenum:

h1 { counter-reset: section -1 }

h1 { counter-reset: imagenum 99 }

Чтобы выполнить сброс обоих счетчиков, необходимо задать их вместе:

h1 { counter-reset: section -1 imagenum 99 }

Стили счетчиков

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

counter(«название счетчика», list-style-type)

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

counter(«название счетчика»)

Иными словами, просто не задавать значение list-style-type.

Вы можете использовать любые стили, в том числе disc (круг), circle (окружность), square (квадрат) и none (ничего). Например:

h1:before { content: counter(chno, upper-latin) ". " }

h2:before { content: counter(section, upper-roman) " – " }

blockquote:after { content: " [" counter(bq, hebrew) "]" }

div.note:before { content: counter(notecntr, disc) " " }

p:before { content: counter(p, none) }

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

Счетчики со свойством display: none

Неотображаемые элементы, то есть элементы, для свойства display которых установлено значение none, не могут увеличивать или уменьшать значение счетчика.

Например, в таблице стилей, представленной ниже, элементы H2 класса do_not_ display не увеличивают значение счетчика count_h2:

H2. do_not_display {counter-increment: count_h2; display: none}

Следует отметить, что элементы, для которых свойство visibility задано как hidden, увеличивают значения счетчиков.

Списки

Рассмотрим все возможности задания спискам различного визуального форматирования.

Кстати, если вы с помощью display: marker укажете маркер вместе с элементом списка, созданным с помощью свойств списка, то маркер просто-напросто заменит стандартный элемент списка. Подробно про маркеры будет рассказано дальше.

Для списков также нельзя задать фон. Чтобы использовать в документе список с фоном, нужно задать список как маркер, то есть использовать display: marker, но про это также будет рассказано дальше.

Итак, начнем со стилизации списка с помощью свойства list-style-type. Это свойство задает вид маркера элемента списка, если для свойства list-style-image указано значение none или изображение, на которое указывает URL, недоступно. Можно использовать три типа маркеров: глифы, нумерованные и алфавитные, либо задать значение none, которое означает, что маркер не используется.

Рассмотрим типы маркеров списка подробнее. Первыми разберем глифы. Они определяются с помощью значений disk, circle и square. Обычно они отображаются браузерами клиента как круг, окружность или квадрат. Пример списка с маркером в виде квадрата приведен в листинге 9.4.

Листинг 9.4. Нумерация средствами CSS

<html>

<head>

<title>Глава 9. Маркеры в виде квадрата</title>

<style type="text/css">

ol { list-style-type: square }

</style>

</head>

<body>

<ol>

<li> Это первый элемент списка.

<li> Это второй элемент списка.

<li> Это третий элемент списка.

</ol>

</body>

</html>

Теперь рассмотрим нумерованные списки. Различают несколько систем нумерации списков. Ниже представлены все системы нумерации, используемые в CSS, и их описание:

• decimal – десятичные числа, начиная с 1;

• decimal-leading-zero – десятичные числа, дополненные нулями (например, 01, 02, 03… 98, 99);

• lower-roman – римские цифры, представленные строчными буквами (i, ii, iii, iv, v и т. д.);

• upper-roman – римские цифры, представленные прописными буквами (I, II, III, IV, V и т. д.);

• hebrew – традиционная еврейская нумерация;

• georgian – традиционная грузинская нумерация (an, ban, gan…, he, tan, in, in-an…);

• armenian – традиционная армянская нумерация;

• cjk-ideographic – простые идеографические числа;

• hiragana – a, i, u, e, o, ka, ki…;

• katakana – A, I, U, E, O, KA, KI…;

• hiragana-iroha – i, ro, ha, ni, ho, he, to…;

• katakana-iroha – I, RO, HA, NI, HO, HE, TO….

Третий вариант задания маркеров списка – с помощью так называемой алфавитной системы, или с помощью букв. Ниже приведены алфавитные системы и их описание:

• lower-latin или lower-alpha – строчные буквы в коде ASCII (a, b, c… z);

• upper-latin или upper-alpha – прописные (заглавные) буквы в коде ASCII (A, B, C… Z);

• lower-greek – классические строчные греческие буквы: альфа (а), бета (Р), гамма (у) и т. д.

Для примера создадим страницу, представленную в листинге 9.5.

Листинг 9.5. Нумерация

<html>

<head>

<title>Глава 9. Нумерация с использованием римских цифр</title>

<style type="text/css">

ol { list-style-type: upper-roman }

</style>

</head>

<body>

<ol>

<li> Это первый элемент списка.

<li> Это второй элемент списка.

<li> Это третий элемент списка.

</ol>

</body>

</html>

В результате обработки браузером кода из листинга 9.5 вы должны увидеть такой список:

I Это первый элемент.

II Это второй элемент.

III Это третий элемент.

Теперь рассмотрим свойство list-style-image. Оно определяет файл с картинкой, используемой в качестве маркера списка. Если картинка доступна, то она заменяет маркер, устанавливаемый свойством list-style-type.

Рассмотрим такой пример:

UL { list-style-image: url(«http://my_site.com/my_marker.jpg») }

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

Свойство list-style-position определяет положение блока маркера в главном структурном блоке. Для данного свойства вы можете задавать следующие значения:

• outside – блок маркера находится за пределами главного структурного блока;

• inside – блок маркера находится в первом строковом блоке главного структурного блока, следом за которым выводится содержимое элемента.

Рассмотрим данное свойство на примере (листинг 9.6).

Листинг 9.6. Нумерация в списках

<html>

<head>

<title>Глава 9. Сравнение внутреннего/внешнего расположения</title>

<style type="text/css">

ul { list-style: outside }

ul.compact { list-style: inside }

</style>

</head>

<body>

<ul>

<li>первый элемент списка располагается первым

<li>второй элемент списка располагается вторым

</ul>

<ul class="compact">

<li>первый элемент списка располагается первым

<li>второй элемент списка располагается вторым

</ul>

</body>

</html>

HTML-документ, представленный в листинге 9.6, показан на рис. 9.1.

Рис. 9.1. Сравнение внутреннего/внешнего расположения

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

Свойство list-style является сокращенной формой задания трех свойств list-style-type, list-style-image и list-style-position, как и рассмотренная ранее сокращенная запись для шрифтов font. Например:

UL { list-style: upper-roman inside } /* Любой элемент UL */

UL > UL { list-style: circle outside } /* Любой дочерний элемент UL элемента UL */

Хотя вы можете задать информацию list-style о стиле списка непосредственно в элементах списка (например, в элементе LI языка HTML), тем не менее такой способ нужно применять с определенной осторожностью. Следующие два правила CSS выглядят похожими, хотя первое определяет селектор потомков, а второе (более специфичное) – селектор дочерних элементов:

OL.alpha LI { list-style: lower-alpha } /* Любой потомок LI элемента OL */

OL.alpha > LI { list-style: lower-alpha } /* Любой дочерний элемент LI элемента OL */

В чем же опасность? При использовании только селекторов потомков вы можете не достичь желаемых результатов. Рассмотрим пример, приведенный в листинге 9.7.

Листинг 9.7. Каскад

<html>

<head>

<title>Глава 9. Результат применения каскада</title>

<style type="text/css">

ol.alpha li { list-style: lower-alpha }

ul li { list-style: disc }

</style>

</head>

<body>

<ol class="alpha">

<li>первый уровень списка

<ul>

<li>второй уровень списка

1 ... 31 32 33 34 35 36 37 38 39 ... 59
Перейти на страницу:
Пожаловаться на ошибку
Похожие материалы
Как раскрутить и разрекламировать Web-сайт в сети Интернет - Александр Загуменов Библиотека книг бесплатно – читать онлайн! | BibliotekaOnline.com
Как раскрутить и разрекламировать Web-сайт в сети Интернет - Александр Загуменов
27.12.2023 - 21:25
Веб-Самоделкин. Как самому создать сайт быстро и профессионально - Алексей Гладкий Библиотека книг бесплатно – читать онлайн! | BibliotekaOnline.com
Веб-Самоделкин. Как самому создать сайт быстро и профессионально - Алексей Гладкий
26.05.2024 - 09:00
Комментарии

Copyright @ bibliotekaonline.com 2024 - 2026. Все права защищены.


Почта для связи: [email protected]