Урок 13. Управление шрифтами в CSS
New Page 1
Уроки web-программирования. CSS
(HTML):
Списки.
Все
статьи по CSS.
В HTML имеются два вида списков,
поддерживающих автоматическую нумерацию: нумерованные
и маркированные. Среди их
параметров есть атрибут type, который
позволяет задать тип нумерации. В CSS
управление списками предоставляет
создателям страниц более широкие
возможности.
Свойство list-style-type
Этим свойством мы задаем
тип маркера. Он задается следующими
ключевыми словами:
- disk - в виде закрашенного круга;
- circle - в виде незакрашенного круга;
- square - в виде закрашенного квадрата.
Эти значения аналогичны значениям
атрибута type для списков в HTML.
Для нумерованных списков гораздо
больше ключевых слов, задающих тип
маркеров в CSS, более широк, чем в HTML. Скорее
даже, их слишком много. Многие из них
вряд ли применяются в реально практике, а
некоторые поддерживаються не всеми
браузерами. Доступны следующие значения
для видов маркеров:
- decimal - десятичные числа, начиная с 1.
- decimal-leading-zero - десятичные числа с
ведущими нулями (например, 01, 02, 03, ..., 98, 99).
Это значение не поддерживается браузером
Internet Explorer, в котором нумерация всегда
ведется без ведущих нулей.
- lower-roman - римские цифры,
представленные строчными буквами
латинского алфавита (i, ii, iii, iv, v и т.д.).
- upper-roman - римские цифры,
представленные приписными буквами
латинского алфавита (I, II, III, IV, V и т.д.).
- hebrew - традиционная еврейская
нумерация. Поддерживается только
браузером Mozilla.
- georgian - традиционная грузинская
нумерация. Поддерживается браузерами
Mozilla и Opera. Правда, выглядит эта нумерация
в них по-разному, я даже не берусь судить,
какой из браузеров делает это правильно.
- armenian - традиционная армянская
нумерация. Также поддерживается только
браузерами Mozilla и Opera. Нумерация выглядит
одинаково.
- cjk-ideographic - простые идеографические
числа. Поддерживается только браузером
Mozilla.
- lower-latin или lower-alpha - строчные буквы
в коде ASCII (a, b, с, ..., z). Оба значения
поддерживаются браузерами Mozilla и Opera. Internet
Explorer поддерживает только значение lower-alpha.
В целях однозначности отображения во
всех браузерах лучше пользоваться именно
им.
- lower-greek - классические строчные буквы
греческого алфавита: альфа, бета, гамма и
т.д. (б, в, г, д,...). Поддерживается
браузерами Mozilla и Opera.
Теперь небольшой пример:
HTML:
|
<html>
<head>
<title>Пример
CSS файла. Списки</title>
<link
rel="stylesheet"
href="styles.css"
type="text/css"
/>
</head>
<body>
<OL>
<LI>Первый
пункт списка</LI>
<LI>Второй
пункт списка</LI>
<LI>Третий
пункт списка</LI>
<LI>Четвертый
пункт списка</LI>
</OL>
</body>
</html> |
CSS:
|
OL
{
list-style-type:
lower-greek;
} |
В
результате в браузере Opera мы увидим такую
картинку:
А в IE вот такую:
Свойство list-style-type
Задает в качестве маркера произвольное
изображение. Стоит заметить, что в HTML нет
аналога этого свойства, списки с маркерами
произвольного вида можно создать только с
помощью CSS.
Рассмотрим еще пример:
HTML:
|
<html>
<head>
<title>Пример
CSS файла.
Списки</title>
<link
rel="stylesheet"
href="styles.css"
type="text/css"
/>
</head>
<body>
<UL>
<LI>Первый
пункт списка</LI>
<LI>Второй
пункт списка</LI>
<LI>Третий
пункт списка</LI>
<LI>Четвертый
пункт списка</LI>
</UL>
</body>
</html> |
CSS:
|
UL
{
list-style-image:
url(marker.gif);
} |
И вот как будет выглядеть результат:
Свойство
list-style-position
Это свойство позволяет указать положение
маркера. Значение свойства задается с
помощью следующих ключевых слов:
- outside - за пределами основного блока
элемента списка;
- inside - внутри основного блока списка.
Проиллюстрируем сказанное выше примерами.
Рассмотрим CSS-правило:
HTML:
|
<html>
<head>
<title>Пример
CSS файла.
Списки</title>
<link
rel="stylesheet"
href="styles.css"
type="text/css"
/>
</head>
<body>
<UL
class="c1">
<LI>Первый
пункт списка</LI>
<LI>Второй
пункт списка</LI>
<LI>Третий
пункт списка</LI>
<LI>Четвертый
пункт списка</LI>
</UL>
<br>
<UL
class="c2">
<LI>Первый
пункт списка</LI>
<LI>Второй
пункт списка</LI>
<LI>Третий
пункт списка</LI>
<LI>Четвертый
пункт списка</LI>
</UL>
</body>
</html> |
CSS:
|
.c1{
list-style-position:
outside;
}
.c2
{
list-style-position:
inside;
} |
В первом случае, если текст элементов
списка обвести воображаемым
прямоугольником, то маркер будет
находиться за пределами этого
прямоугольника, что и соответствует
значению outside.
Во втором случае, если текст элементов
списка обвести воображаемым
прямоугольником, то маркер будет
находиться в пределах этого прямоугольника,
что и соответствует значению inside.
См. скриншот:
Аналога свойства list-style-position в HTML не
существует, следовательно, управлять
положением маркера в этом языке невозможно.
Свойство
list-style
Стенографическое свойство, позволяющее в
сокращенной форме задать значения свойств list-style-type,
list-style-image и list-style-position. Приведем
примеры. Правило:
| UL { list-style-type: circle;
list-style-image: url(images/marker2.gif); list-style-position: inside }
можно записать в сокращенном виде:
UL { list-style: circle url(images/marker2.gif) inside } |
Краткое описание всех свойств управления
характеристиками списков в SCC приведено в
таблице:
| Свойства
CSS для управления характеристиками
списков |
| Свойство |
Описание |
Пример |
| list-style-type |
Определяет внешний
вид маркера либо нумератора
disc | circle | square | decimal | decimal-leading-zero lower-roman |
upper-roman lower-greek | lower-alpha lower-latin | upper-alpha
upper-latin |
UL {list-style-type: square;}
OL {list-style-type: lower-roman;} |
| list-style-image |
Определяет URL для
изображения маркера |
UL {list-style-image: url(bullet3.gif)
; } |
| list-style-position |
Определяет
положение маркеров внутри или снаружи
основного структурного блока
inside | outside |
LI {list-style-position: outside} |
| list-style |
Стенографическое
свойство, позволяющее одновременно
задать значения всех предыдущих
свойств. |
UL {list-style: square url(bullet3.gif)
outside;} |
|
