В этой главе мы изучим атрибуты стиля, с помощью которых задают параметры абзацев . Абзацев в широком смысле этого слова - к которым относятся и заголовки, и списки , и теги адреса, и большие цитаты. В общем, блочных элементов, рассмотренных в главе 2 и предназначенных для структурирования текста.
Напоследок мы познакомимся с двумя очень специфичными атрибутами стиля, которые позволят нам задать отображение элемента Web-страницы (т. е. будет он блочным или встроенным) и сделать элемент невидимым. Эти атрибуты стиля применяются нечасто и только в совокупности с определенным поведением (см. часть III).
Параметры вывода текста
Начнем мы с атрибутов стиля, управляющих выводом текста в структурирующих текст блочных элементах. Их совсем мало. И все они применимы только к блочным элементам.
Атрибут стиля text-align задает горизонтальное выравнивание текста:
text-align: left|right|center|justify|inherit
Здесь доступны значения left (выравнивание по левому краю; обычное поведение Web-обозревателя), right (по правому краю), center (по центру) и justify (полное выравнивание).
Примеры:
P { text-align: justify }
H1 { text-align: center }
Атрибут стиля text-indent задает отступ для "красной строки":
text-indent: <отступ "красной строки">
Здесь допускаются абсолютные и относительные (относительно ширины абзаца) величины отступа. По умолчанию отступ "красной строки" равен нулю. Отметим, что атрибут стиля text-indent не поддерживает значение inherit.
Пример:
P { text-indent: 5mm }
Вот теперь абзацы будут иметь "красную строку".
Списки среди блочных элементов стоят особняком. В основном, из-за того, что, во-первых, содержат в себе другие блочные элементы (отдельные пункты), а во-вторых, включают маркеры и нумерацию, которые расставляет сам Web-обозреватель. Вот о маркерах и нумерации, а точнее, об атрибутах стиля, предназначенных для задания их параметров, мы сейчас и поговорим.
Атрибут стиля list-style-type задает вид маркеров или нумерации у пунктов списка:
list-style-type: disc|circle|square|decimal|decimal-leading-zero|
lower-roman|upper-roman|lower-greek|lower-alpha|lower-latin|
upper-alpha|upper-latin|armenian|georgian|none|inherit
Как видим, доступных значений у этого атрибута стиля очень много. Они обозначают как различные виды маркеров, так и разные способы нумерации.
Disc- маркер в виде черного кружка (обычное поведение для маркированных списков).
Circle- маркер в виде светлого кружка.
Square - маркер в виде квадратика. Он может быть светлым или темным, в зависимости от Web-обозревателя.
Decimal- нумерация арабскими цифрами (обычное поведение для нумерованных списков).
Decimal-leading-zero - нумерация арабскими цифрами от 01 до 99 с начальным нулем.
Lower-roman- нумерация маленькими римскими цифрами.
Upper-roman- нумерация большими римскими цифрами.
Lower-greek - нумерация маленькими греческими буквами.
Lower-alpha и lower-latin - нумерация маленькими латинскими буквами.
Upper-alpha и upper-latin- нумерация большими латинскими буквами.
Armenian- нумерация традиционными армянскими цифрами.
Georgian - нумерация традиционными грузинскими цифрами.
None - маркер и нумерация отсутствуют (обычное поведение для несписков).
НА ЗАМЕТКУ
Мы рассмотрели только значения атрибута стиля list-style-type, предлагаемые стандартом CSS 3. Однако стандарт CSS 2 предусматривал еще несколько значений, которые до сих пор поддерживаются Web-обозревателями. Вы можете найти их на Web-странице https://developer.mozilla.org/en/CSS/list-style-type.
Атрибут стиля list-style-type можно задавать как для самих списков , так и для отдельных пунктов списков. В последнем случае создается список, в котором пункты имеют разные маркеры или нумерацию. Иногда это может пригодиться.
Вот определение маркированного списка с маркером в виде квадратика:
UL { list-style-type: square }
А в листинге 9.1 мы задали такой же маркер для одного из пунктов маркированного списка.
Атрибут стиля list-style-image позволяет задать в качестве маркера пунктов списка какое-либо графическое изображение (создать графический маркер). В этом случае значение атрибута стиля list-style-type, если таковой задан, игнорируется:
list-style-image: none|<интернет-адрес файла изображения>|inherit
Интернет-адрес файла с графическим маркером задается в таком же формате, что и интернет-адрес файла фонового изображения (см. главу 8):
UL { list-style-image: url(/markers/dot.gif) }
Значение none убирает графический маркер и возвращает простой, неграфический. Это обычное поведение.
Атрибут стиля list-style-image также можно задавать как для самих списков, так и для отдельных их пунктов.
Атрибут стиля list-style-position позволяет указать местоположение маркера или нумерации в пункте списка:
list-style-position: inside|outside|inherit
Доступных значений здесь два:
Inside - маркер или нумерация находятся как бы внутри пункта списка, являются его частью;
Outside - маркер или нумерация вынесены за пределы пункта списка (это обычное поведение).
Непонятно, зачем нужен данный атрибут стиля, ведь списки , в которых маркер или нумерация вынесены за пределы пунктов, лучше читаются. Ну, раз он присутствует в стандартеCSS, значит, так тому и быть...
Пример:
OL { list-style-position: inside }
Внешний лист стилей позволяет сконцентрировать информацию о форматировании сайта в одном файле. Для того, чтобы сослаться на внешний лист стилей css надо в теле
после заголовка
Атрибут href указывает путь к файлу внешнего листа стилей. Данную строку надо прописывать в тексте всех Вэб-страниц, где надо использовать внешний лист стилей.
Таким образом, изменения, вносимые в файл style.css, сразу отображаются на всех страницах, ссылающихся на этот файл.
Частное определение стилей
Если надо применить какой-либо стиль частным образом, по отношению к отдельному экземпляру дескриптора, то для этого надо воспользоваться атрибутом STYLE. Такой прием позволяет воспользоваться всеми преимуществами, предоставляемыми стилями, избегая обязанности создавать листы стилей. Частное использование стилей можно пользовать даже в том случае, если страница уже содержит внутренний или ссылку на внешний лист стилей, т.к. частный стиль имеет наивысший приоритет.
Пример:
Атрибут ID
Если надо применить стиль к отдельному элементу Вэб-страницы, то надо воспользоваться атрибутом ID.
Для этого надо нужному тэгу элемента страницы назначить идентификатор. После этого можно определить во внутреннем или внешнем листе стилей свойства данного элемента. Заданные признаки форматирования будут установлены только для элемента, отмеченного указанным идентификатором.
- Gaius Octavius Thurinus
- Tiberius Claudius Nero
- Gaius Iulius Caesar Augustus Germanicus
- Tiberius Claudius Drusus
- Lucius Arruntius Camillus Scribonianus
- Nero Claudius Caesar Drusus Germanicus
- Lucius Clodius Macer