.fancyLetter { font-size:Зет;

font-style:bold;

color:yellow;

background-color:blue;

border-style:solid;

border-width:6px;

border-color:gray; float:left)

Затем поместим требуемую букву в контейнерный дескриптор :



MeiccnHpoBCKHe Сонеты



представляют собой 154 котортких поэмы, объединенные в одну поэму под названием…

Глава 4. Каскадные списки стилей 217



Настройка внешнего вида списков

HTML-код предоставляет возможность использования двух типов списков:

упорядоченного (нумерованного) и ненумерованного (маркированного). Упорядо —

ченный список используется в случае, когда важен порядок элементов в списке. Например, упорядоченный список применяется для перечисления шагов в такой процедуре, как рецепт приготовления какого-нибудь блюда, или в перечислении песен-хитов (в порядке количества проданных дисков). Для перечня же ингреди- ентов, используемых при приготовлении блюда, или перечня авторов книг будет

использоваться неупорядоченный список. Оба* типа списков просты по форме: маркер элемента списка (число, буква, графическое изображение или символ) за которым следует собственно элемент списка. Тем не менее, правила каскадных

списков стилей позволяют форматировать списки таким образом, чтобы они со- ответствовали общей форме всей Web-страницы, на которой они находятся.



ПРАКТИКУМ

Для форматирования маркеров элементов списков используется свойство list —

styie-typ e списков стилей. Допустимые значения свойства перечислены ниже:





Для применения стиля к маркерам элементов списка используется атрибут

styl e в начальном дескрипторе списка. Например, для нумерации элементов упорядоченного (т. е. нумерованного) списка с помощью римских цифр в верхнем

регистре используется следующий дескриптор :

218 Глава 4. Каскадные списки стилей







Аналогично, для маркировки элементов неупорядоченного списка с помощью

квадратного маркера воспользуйтесь следующим дескриптором :



style=»list-style-type:square»>

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

заставляет браузер в качестве маркера неупорядоченного списка использо — вать изображение ИЗ файла FancyDot. gif:

И, наконец, свойство list-style-positio n используется для контроля поло — жения маркера элемента списка по отношению к тексту элемента списка. Свой —

ство list-style-positio n МОЖеТ принимать ОДНО ИЗ Двух Значений: insid e И outside. Значение outside используется при необходимости вставки маркеров списка вне текста элемента списка. Как показано в первом и третьем списке на

рис. 4.20, при установке значения свойства list-style-positio n равным

outside весь текст элемента списка будет находиться правее маркера* даже если текст занимает несколько строк.

И, наоборот, при установке значения свойства list-style-positio n равным inside, как показано в следующем примере, маркер элемента списка становить —

ся его частью:









Глава 4. Каскадные списки стилей 219





Свойство list-style-typ e во втором списке, показанном на рис. 4.20, уста —

новлено равным inside. Обратите внимание, что маркеры (графические точки)

во втором списке выравниваются по первым буквам элементов фрвого и третьего

списков. Причиной сдвига вправо явилось то, что Web-браузер визуализирует

маркеры элементов списка внутри (т. е. в качестве части) каждого элемента списка.

Несмотря на то что примеры в этом совете показывают, 4to стили списков

можно задавать в самих дескрипторах списков, тем не менеЬ, рекомендуется пользоваться форматированием списков одновременно для всех страниц сайта.

Вместо индивидуального форматирования каждого неупорядоченного и упорядо- ченного списка выберите единственный формат, который будет самым подходя —

щим для вашего сайта. Затем напишите правила списка стилей, которое будет

одинаковым образом форматировать все списки. Например, еф и вам нравится,

как выглядит список при установке значения свойства list-styjie-positio n рав —

ным inside, И, при ЭТОМ ХОТИТе ИСПОЛЬЗОВаТЬ маркеры ИЗ фай|та FancyDot. gif, напишите следующее правило:



ul {list-style:url(images/FancyDot. gif) inside}

. . .

Обратите внимание, что синтаксис каскадных списков стилей позволяет ис —

пользовать сокращения. Если значения, объявленные в правил^, являются уни —

кальными для данного конкретного свойства, Web-браузер применяет к свойству указанное значение автоматически. Сокращенная форма записи, используемая в

приведенном выше примере, в развернутом виде может быть Записана следую — щим образом:

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

list-style-position:inside}



Создание эффектов текста и изображений

с помощью фильтров

При создании эффекта отбрасывания тени с помощью текста вместо исполь — зования графических изображений Web-браузер может загружать и выводить на

экран Web-страницу несколько быстрее. К сожалению, некоторое Web-браузеры

еще не поддерживают каскадные списки стилей. Как результат, |при использова —

нии таких средств списков стилей, как абсолютное позиционирование, некото —

рые посетители не будут видеть созданных вами эффектов. Фактически, в зави —

симости от свойств каскадных списков стилей, используемых для создания

эффекта, отдельные посетители увидят часть Web-страницы в в^де перекрываю —

щегося текста. Другим словами, эффекты на основе каскадных Списков стилей в

браузерах, не поддерживающих списков, не исчезают бесследно.

Компания Microsoft расширила каскадные списки стилей зр счет введения

свойств фильтрации, которые позволяют браузерам Internet Explorer (версии 4 и

выше) визуализировать эффекты как на основе графики, так и цг основе текста.

Web-браузеры, которые не могут использовать содержащиеся в кеде фильтры (со — держащиеся как в дескрипторе элемента Web-страницы, так и в списке стилей), выведут на экран элемент без специального эффекта. Как результат, несмотря на