HTML, XHTML и CSS на 100%
Шрифт:
@media screen, print {
p.note:before {
display: marker;
content: url("note.gif")
"Примечание " counter(note-counter) ":";
counter-increment: note-counter;
text-align: left;
width: 10em;
}
}
</style>
</head>
<body>
Это первый абзац в данном документе.
<p class="note">Это очень короткий документ.
Конец.
</body>
</html>
В результате выполнения документа из листинга 9.11 получим следующее:
Это
Примечание 1: Это очень короткий документ.
Конец.
Вы также можете изменять расстояние между ближайшими краями границ блока маркера и связанного с ним главного блока, используя свойство marker-offset. В качестве значения можно использовать служебное слово auto. Тогда браузер задаст расстояние автоматически.
Разберем это свойство на примере. Создадим страницу, в которой маркеры используются для добавления точек после каждого элемента нумерованного списка, и зададим область для маркеров списка шириной 8 em (листинг 9.12).
<html>
<head>
<title>Глава 9. Пример маркера</title>
<style type="text/css">
p { margin-left: 8em } /* Создаем пространство для счетчиков 8 em */
li:before {
display: marker;
marker-offset: 3em;
content: counter(mycounter, upper-roman) ".";
counter-increment: mycounter;
}
</style>
</head>
<body>
Это предыдущий абзац ...
<ol>
<li> Это первый элемент списка.
<li> Это второй элемент списка.
<li> Это третий элемент списка.
</ol>
Это следующий абзац ...
</body>
</html>
В результате получим следующее:
Это предыдущий абзац ...
I. Это первый элемент списка.
II. Это второй элемент списка.
III. Это третий элемент списка.
Это следующий абзац ...
Теперь вы сможете справиться с любым списком и при этом оформить его так, что он не будет выглядеть «серо» на фоне всей страницы.
9.4. Таблицы
Таблицы – одно из главных средств расположения элементов на странице. Они позволяют расположить меню рядом с текстом и могут подстраиваться под монитор компьютера клиента.
Селекторы столбцов
В CSS ячейки таблицы могут принадлежать одному из двух типов групп: строкам или столбцам. В HTML ячейки являются наследующими элементами строк, а не столбцов. Тем не менее на некоторые свойства ячеек оказывают влияние свойства столбцов.
Ниже приведен список свойств, которые могут быть заданы столбцам таблицы и, соответственно, влиять на вид ячеек.
• border – задает различные свойства границы столбцам, но работает, только если для свойства border-collapse в элементе таблицы установлено значение collapse.
• background –
определяет фон для ячеек в столбце.• width – определяет ширину столбца.
• visibility – если свойству столбца visibility присвоено значение collapse, то ни одна ячейка столбца не представляется, а ячейки, охватывающие другие столбцы, урезаются. Кроме того, ширина таблицы уменьшается на ширину этого столбца. Другие значения свойства visibility не имеют влияния на отображение.
Рассмотрим несколько строк CSS-кода, определяющих свойства столбцов:
col.totals { background: blue }
table { table-layout: fixed }
col.totals { width: 5em }
Первое правило выделяет столбец класса totals синим цветом, а последние два правила указывают способ фиксирования размера столбца, используя фиксированное расположение.
Положение и выравнивание заголовка
Первым в данном разделе рассмотрим свойство caption-side. Оно определяет положение поля заголовка относительно поля таблицы. Вот список его значений, указывающих, что поле заголовка располагается:
• top – над полем таблицы;
• bottom – ниже поля таблицы;
• left – слева от поля таблицы;
• right – справа от поля таблицы.
Заголовки, расположенные ниже или выше элемента TABLE, форматируются подобно элементам блока, находящимся ниже или выше таблицы, с тем исключением, что они:
• наследуют наследуемые свойства таблицы;
• не считаются блоками для элементов compact или run-in, которые могут предшествовать таблице.
Заголовок, находящийся ниже или выше поля таблицы, действует как блок для вычисления ширины; она вычисляется относительно ширины содержащего блока таблицы.
Для заголовка, располагающегося в правой или левой части поля таблицы, значение свойства width, отличное от auto, явным образом устанавливает ширину, в то время как значение auto предписывает браузеру выбрать ширину самому. Значение, выбранное браузером автоматически, может колебаться от «самого узкого блока» до «одной строки», поэтому рекомендуется не указывать значение auto для установки ширины левого и правого заголовка.
Для выравнивания содержимого заголовка по горизонтали внутри поля заголовка используйте свойство text-align. Для вертикального выравнивания левого и правого блока заголовка относительно блока таблицы используйте свойство vertical-align. В этом случае смысл имеют только значения top, middle и bottom. Все другие значения данного свойства будут трактоваться браузером как top.
Чтобы лучше разобраться с данным свойством, рассмотрим пример.
caption {
caption-side: bottom;
width: auto;
text-align: left
}
В этом примере свойство caption-side определяет расположение заголовка под таблицей. Заголовок может иметь ширину родительского элемента таблицы, а текст заголовка будет выровнен по левому краю.
Теперь рассмотрим более сложный пример.
body {