<< Пред. стр.

стр. 29
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>

Управляемый Возможные
элемент значения
list-style- Изображение, отоб- u r l (путь изобра- ul {
image ражаемое вместо жения), попе
list-style-image:
маркера или на-
url(../images/bul-
чального символа
l e t , gif) ;
}

list-style- Позиция маркера ol {
inside, outside
position или начального
list-style-posi-
символа относи-
tion: inside;
тельно элементов
списка }
list-style- Тип отображаемого d i s c , c i r c l e , ol {
type маркера или на- decimal,
list-style-type:
чального символа lower-roman,
lower-roman;
upper-roman,
},
lower-alpha,
upper-alpha,
none


Ete Edt &w FjvontM 1«й ййр

'•Firstfishitem
•Secondfishitem
• n u r dfishitem
•Fourthfishitem
•Fifthfishitem




Рис. 52.3. Используйте атрибут list-style-image для замены
стандартных маркеров изображением из файла
ГЛАВА 52. Создание списков 275

Листинг 52.2. Исходный код страницы, вид которой в браузере
показан на рисунке 52.3
<head>
<style type="text/css">

ul {
list-style-image: url(images/fish.gif);



</style>
</head>

<body>

<li>First fish item</li>
<li>Second fish item</li>
<li>Third fish item</li>
<li>Fourth fish item</li>
<li>Fifth fish item</li>

</body>




h item. D e s e r t i o n of the item Description •First fish item. Description of the item. Description
of the item of the item,
^ S e c o n d fish item. De3cnpticn of the item.
' ^ F S e c o n d fish item. Description of the item.
Description of the item. Description of the item.
^ • T h i r d fish item Description of the uem П ж 4 fish item. Description of the item.
Description of the item. Description of the item.
*WFourth fish item Description of the item Tourth fish item. Description of the item.
Description of the item. Description of the item.
^e^Fifth fish item. Description of the item Description ^Fifth fish item. Description of the item Description
of the item. of the uem.




Рис. 52.4. Используйте атрибут list-style-position
для задания положения маркеров или начальных символов
относительно элементов списка. Для списка слева значение
этого атрибута равно inside, а для списка справа -outside
Строим Web-сайты
276

Листинг 52.3. Исходный код страницы, вид которой в браузере
показан на рисунке 52.4

<style type="text/css">

./* Сначала изменим маркер всех тегов <ul> независимо от класса. */

ul {
list-style-image: url(images/fish.gif);

/* Теперь определим классы для значений атрибута list-style-position. */

ul.in { , .
list-style-position: inside,-



ul.out {
list-style-position: outside;



</style>



Совет
В исходном коде Web-страницы, показанной на рисунке 52.4, ис-
пользуется удобный прием с применением каскадных таблиц стилей.
Сначала правилом стиля для всех тегов <ul> заменяются маркеры
всех ненумерованных списков изображением рыбы. Далее следуют
стили класса для конкретных тегов, по одному для каждого значения
атрибута list-style-position. Следующая таблица стилей про-
изводит тот же самый эффект:
ul.in {
list-style-image: url(images/fish.gif) ;
list-style-position: inside;



ul.out {
list-style-image: url(images/fish.gif);
list-style-position: outside;


Преимущество кода таблицы стилей, приведенного в листинге 52.3,
состоит в том, что атрибут list-style-image не повторяется два
раза. Вместо этого он приводится однажды, в глобальном переопре-
делении тега. А два класса просто уточняют данный общий стиль.
ГЛАВА 52. Создание списков 277


Переопределение типа списка,
используемого браузером по умолчанию
Атрибут l i s t - s t y l e - t y p e удобен для переопределения HTML-тегов <ol> и <ul>,
чтобы не надо было хранить параметр отдельных типов атрибутов для каждого спи-
ска на Web-странице:
ul {
list-style-type: square;


На Web-странице с данным правилом стиля автоматически все ненумерованные спи-
ски форматируются с маркерами в виде квадратиков.



Совет
Чтобы создать «голый» список без маркеров и начальных символов
любого типа, задайте для атрибута list-style-type значение
попе в определении стиля, относящегося к этому списку.




Создание для нумерованных списков стиля автоматической
Инструментарий
структуры
При вложении нумерованных списков браузер не изменяет цик-
лически типы списков для создания эффекта структуры, как в
случае ненумерованных списков.
Простая таблица стилей устраняет этот недостаток
(см. рис. 52.5). Поместите данную таблицу стилей между тегами
< s t y l e > в разделе заголовка HTML-страницы или скопируйте
таблицу стилей точно в том виде, в котором она представлена,
во внешний CSS-файл.


Часто задаваемые вопросы
Сколько уровней может добавляться в
структуру?
Эта таблица стилей работает со структурами,
включающими до пяти уровней. Если в струк-
туре больше пяти уровней, браузер возвраща-
ется к обычной нумерации списков. С данным
эффектом возврата к обычной нумерации
можно бороться, добавляя правила стилей'для
требуемого количества уровней структуры,
следуя при этом образцу, который составляют
существующие правила стилей.
Строим Web-сайты
278

шшшшшяшшшшш
E.to E<* *"« Favor*» Iooh t №

I First level
A- Second level
В Second level
1 Third level
2. Third level
* Fourth level
Ь Fourth level
i Fifth level
о Fifth level
ш Fifth level
я Fifth !eve!
с Fourth level
d Fouth level
3. Third level
• a, Fourth levet
b Fourh level
4 Third level
С Second level
1 Third level
2 Third level
D. Second level
П Firrtlevel
A Second level
1 Third level
2. Third level
a. Fouth level
b Fouth level
Б. Second level
С Second level
D Second level
Ш. First level




Рис. 52.5. Данная та блица стиля структуры
служит для автомат чического отображения
вложенных нумерованных с писков в формате структуры
/* Пронумеруем первый уров ень структуры с помощью заг-
лавных римских числительн* IX ( I , I I , I I I , И Т . Д . ) . * /

ol {
list-style-type: upper -гoman;
}

/ * Второй уровень стр^'ктуры является вложенные
списком или тегом <ol>, расположенным где-нибу,::ь
внутри другого тега <ol> Эта задача решается с по-
мощью контекстно-зависимогй селектора. */

ol ol {


/* Пронумеруем второй уровень структуры с помощью
заглавных букв (А, В, С, и т. д . ) . */

list-style-type: upper-alpha;


/* Третий уровень структуры является вложенным спис-
ком внутри вложенного списка или тега <ol>, распо-
ложенного где-нибудь внутри другого тега <ol>, ко-
торый нг.ходится внутри еще одного тега <ol>. Необ-
ходим еще один контекстно-зависимый селектор. */
279
ГЛАВА 52. Создание списков

ol ol ol {


/* Пронумеруем третий уровень структуры с помощью
десятичных чисел (1, 2, 3, и т. д . ) . */

list-style-type: decimal;



/* Четвертый уровень структуры является вложенным
списком внутри вложенного списка внутри вложенного
списка, или, иными словами глубина структуры сос-
тавляет четыре тега <ol>. */
ol ol ol ol {


/* Пронумеруем четвертый уровень структуры с по-
мощью строчных букв (а, Ь, с, и т. д . ) . */

list-style-type: lower-alpha; '



/* Пятый уровень структуры является вложенным спис-
ком внутри вложенного списка внутри вложенного
списка внутри вложенного списка, или иными словами
глубина структуры составляет пять тегов <ol>. */

ol ol ol ol ol {


/* Пронумеруем пятый уровень структуры с помощью
строчных римских числительных (i, ii, iii, и
т. д . ) . */

list-style-type: lower-roman;




Совет
Если возникают проблемы, воспользуйтесь
каскадными таблицами стилей, чтобы отрегу-
лировать зазоры для элементов <И> и поля
для тега <ol> с целью создания более привле-
кательного вида Web-страницы.
ГЛАВА 53.
Выделение текста с помощью цвета
В главе 5 вы видели, как задавать цвет по умолчанию для текста Web-страницы вместе
с цветом фона и цветами ссылок, используемыми по умолчанию. В этой главе объяс-
няется, как изменять цвет определенных текстовых элементов или фрагментов текс-
та внутри элемента, не воздействуя на цвет текста, используемый по умолчанию.
Если вы принадлежите к числу твердолобых Web-дизайнеров, настаивающих на ис-
пользовании тега <font>, вы будете рады узнать, что свойство цвета для этого тега
позволяет выполнить стоящую перед нами задачу:
<font f a c e = " A r i a l , Helvetica, s a n s - s e r i f " color="#FF0000">
<h3 >Примечание</h3 >
<р>Вы <strong>flc^>KHbi</strong> предоставить ваш текущий адрес
электронной почты.</р>
</font>
Также как гарнитура тега <f ont> применяется ко всем текстовым элементам, вложен-
ным внутри него, так и цвет шрифта применяется к этим же элементам. В предыду-
щем примере оба элемента, выделенных тегами <h3 > и тегом абзаца, окрашиваются в
красный цвет (#FF0000), независимо от цвета текста, используемого по умолчанию на
этой Web-странице.
Того же самого эффекта можно достичь с помощью атрибута c o l o r каскадных таблиц
стилей:
<h3 style="color=""#FF0000;"> Примечание</Щ>
<р style="color="#FF0000;"> Вы <strong>flonjffibi</strong> предоста-
'вить ваш текущий адрес электронной почты.</р>


Совет
Крайне осторожно изменяйте цвет текста там, где это приходится
делать. Одним из основных идентификаторов гиперссылок является
цвет, отличный от цвета остального текста. При изменении цвета
текста, не являющегося гиперссылкой, определенный процент по-
сетителей вашего Web-сайта будет щелкать на этом тексте, пола-
гая, что это гиперссылка. Если вы еще и подчеркнете текст, цвет ко-
торого изменили, то рискуете получить рассерженные электронные
сообщения о том, что ваш Web-сайт не работает.
Прибегайте к изменению цвета текста как к последнему средству пос-
ле того, как испробованы остальные возможности, другие методы
шрифтового выделения, такие, как полужирный шрифт или курсив.


Если требуется изменить цвет текстовой строки внутри элемента, вложите теги
<f ont> внутрь элемента:
ГЛАВА 53. Выделение текста с помощью цвета 281

<р>Розы - <font color="#FF0000">KpacHbie</font>, а фиалки - <font
color="#0000FF">CMHne</font>.</p>


Часто задаваемые вопросы
ЧТО В действительности окрашивается, когда в текстовый
элемент добавляется цвет фона?
При задании для текстового элемента значения атрибута back-
ground-color в действительности окрашивается его блок или пря-
моугольная область, в которой находится текстовый элемент. Обычно
этот блок является прозрачным.


или, пользуясь каскадными таблицами стилей, разместите теги <span> вокруг текста,
который хотите окрасить в другой цвет: \
а фиалки
<р> Розы - <span s t y l e = " c o l o r : #FF0000;"> красные</зрап>,
- <span s t y l e = " c o l o r : #0000FF">CHHne</span>.
Каскадные таблицы стилей также позволяют окрашивать область фона текстового
элемента, создавая эффект маркера, пример которого показан на рисунке 53.1.


Fte Edit Sev* Favorites Tools Help


This paragraph is not highlighted This paragraph is not highlighted This paragraph is not highlighted .
This paragraph is not highlighted This paragraph is not highlighted This paragraph is not highlighted.
This paragraph is not highlighted. This paragraph is not highlighted This paragraph is not highlighted.


This paragraph is highlighted. This paragraph is highlighted. This paragraph is highlighted. This
paragraph is highlighted. This paragraph is highlighted. This paragraph is highlighted This paragraph is
highlighted. This paragraph is highlighted. This paragraph is highlighted This paragraph is highlighted
This paragraph is highlighted This paragraph is highlighted. This paragraph is highlighted. This
paragraph is highlighted. This paragraph is highlighted.


In this paragraph, this sentence is not highlighted This sentence is highlighted. This sentence is not
highlighted.




Puc. 53.1. С помощью каскадных таблиц стилей
может создаваться эффект маркера для текста

Листинг 53.1. Исходный код страницы, вид которой в браузере
показан на рисунке 53.1
<p>This paragraph is not highlighted....</p>

<p style="background-color="#FFFFOO;">This paragraph is highlight-
ed. . . . </p>
<p>In this paragraph, t h i s sentence is not highlighted. <span

<< Пред. стр.

стр. 29
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>