Оформление списков и ссылок с помощью CSS

Оформление списков

Базовые маркеры и числа: свойство list-style-type

Для управления видом маркера используется свойство list-style-type. Данное свойство применяется и к маркированному (элемент HTML UL) и нумерованному (элемент HTML OL) спискам, однако аргументы для этих двух видов списка различаются. Для маркированного списка используются аргументы circle, disc и square, которые устанавливают маркер в виде незакрашенного кружка, закрашенного кружка и квадрата соответственно. Для нумерованного списка аргументов свойства list-style-type намного больше, и с ними можно самостоятельно ознакомиться в Спецификации CSS2.1. На рисунке 14.1 представлены несколько распространенных типов маркированного и нумерованного списков. Аргумент none устанавливает тип маркера, как у родительского элемента. По умолчанию данное свойство принимает значение disk для маркированного списка и decimal для нумерованного списка.

Например, следующие правила задают для всех маркированных списков на сайте квадратные маркеры, а для нумерованных - десятичные числа:

ul li {list-style-type: square;}
ol li {list-style-type: decimal;}

Маркеры-изображения: свойство list-style-image

Хотя количество значений атрибута свойства list-style-type для элемента UL, т.е. для маркированного списка, ограничено тремя, это не значит, что в распоряжении разработчика или дизайнера всего три вида маркера. CSS позволяет установить в качестве маркера любое подходящее изображение с помощью свойства list-style-image. В качестве аргумента используется относительный или абсолютный адрес графического файла, содержащего изображение, которое должно служить в качестве маркера. В следующем примере для каждого элемента списка в качестве маркера устанавливается изображение marker.png:

UL {list-style-image: url("marker.png");}

Этот атрибут наследуется, поэтому для отдельных элементов списка для восстановления первоначально вида маркера используется значение атрибута none, которое отменяет изображение в качестве маркера для родительского элемента.

Следует заметить, что это свойство имеет ограниченные возможности позиционирования для фонового изображения и в некоторых ситуациях вообще не работает в браузере Internet Explorer. Поэтому значительно более распространенной практикой является просто задание фонового изображения в пунктах списка.

Прежде всего, необходимо определить для списка отсутствие маркера и удалить поле и заполнение:

UL {
    margin: 0;
    padding: 0;
    list-style-type: none;
   }

Затем можно добавить фоновое изображение для каждого пункта списка, некоторое заполнение слева и снизу, чтобы сместить текст, позволяя вывести изображение, и растянуть пространство между пунктами списка:

UL LI {
       background: #fff url("icon.gif") 0 3px no-repeat;
       padding: 0 0 5px 15px;
      }

Размещение маркера: свойство list-style-position

Существует два способа размещения маркера относительно текста: маркер выносится за границу элементов списка или обтекается текстом. Чтобы управлять положением маркера относительно текста, применяется свойство list-style-position. Это свойство имеет два значения: outside и inside. Значение outside (значение по умолчанию) размещает маркеры за пределами текстового блока. Значение inside включает маркеры в текстовый блок и отображает их в элементе списка. Пример использования этих значений показан на рисунке 14.2.

Оформление списков определений

Обычно списки определений не требуют большого внимания, за исключением задания стиля DT (обычно жирный текст) и управления отступом определений:

DT {font-weight: bold;}
DD {margin-left: 2em;}

В CSS предусмотрена возможность одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера. Для этой цели используется свойство list-style. В качестве аргументов данного свойства могут выступать любые комбинации трех значений, определяющих стиль маркеров, в произвольном порядке. Значения разделяются между собой пробелом. Ни один аргумент не является обязательным, поэтому неиспользуемые значения можно опустить.

Оформление ссылок

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

Таким образом, при оформлении ссылок разработчик должен задавать оформление для всех состояний ссылок и использовать подчеркивание только для ссылок

Оформление состояния ссылок

Стили ссылок всегда должны быть заданы в таблице стилей в следующем порядке: link, visited, focus, hover и active. Если стили ссылок будут размещены в другом порядке, то настройки будут переопределять друг друга, и состояния ссылок не будут работать.

Для оформления различных состояний ссылок используются псевдоклассы :link, :visited, :focus, :hover и :active, которые добавляют к селектору элемента A:

A:link{}
A:visited{}
A:focus{}
A:hover{}
A:active{}

Если необходимо задать оформление для всех ссылок во всех состояниях, то можно оформлять непосредственно элемент A. Однако базовое правило должно быть определено в первую очередь:

A {}
A:link{}
A:visited{}
A:focus{}
A:hover{}
A:active{}

Такая запись полезна, если необходимо убрать используемое по умолчанию подчеркивание ссылок.

Управление поведением по умолчанию

По умолчанию, большинство браузеров задает для всех ссылок подчеркивание, а состояние фокуса клавиатуры создает вокруг ссылок рамку. Данное оформление можно заменить или вообще отключить.

Подчеркивание задается с помощью свойства text-decoration, рассмотренного в лекции 11. Напомним, что подчеркивание задается с помощью значения свойства text-decoration, равного underline:

A {text-decoration: underline;}

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

A {text-decoration: none;}

Установленное по умолчанию подчеркивание является толстоватым и пересекает нижние выносные элементы строчных букв. Если необходимо сохранить стиль подчеркивания ссылок, но сделать подчеркивание тоньше и запретить пересечение нижних выносных элементов, можно использовать ложное подчеркивание.

Прежде чем создавать ложное подчеркивание, необходимо отключить подчеркивание всех состояний ссылок:

A {text-decoration: none;}

Отключив заданное по умолчанию подчеркивание, можно задать свое подчеркивание с помощью свойства border-bottom:

A:link {border-bottom: 1px solid #00c;}

Результат применения описанных выше свойств к состоянию ссылки представлен на рисунке 14.3. Для сравнения представлена также ссылка, оформленная по умолчанию.

При использовании метода ложного подчеркивания необходимо следить за тем, чтобы было задано достаточно большое значение line-height, чтобы избежать наложения подчеркивания на следующую строку текста.

Ложное подчеркивание позволяет создавать дизайн, в котором состояния ссылок можно отличать не только по цветам. Задавая различный стиль подчеркивания, можно гарантировать, что пользователь сможет различить состояния ссылок даже в черно-белом представлении.

Изображения возле ссылок

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

Чтобы добавить изображение к внешним ссылкам, вначале необходимо определить принадлежность такой ссылки к некоторому классу, в приведенном ниже примере это класс external:

<A href="http://www.somewhere.com /"
 class="external">external link</A>

Затем необходимо задать фоновое изображение для этого класса:

A.external {
  background: #fff url("arrow.gif") center right no-repeat;
  padding-right: 30px;
}

Этот пример будет применять выбранное изображение ко всем экземплярам посещенных ссылок во всех состояниях. Если необходимо выделять с помощью изображений только непосещенные внешние ссылки, то можно объединить классы и псевдоклассы состояний ссылок следующим образом:

A.external:link{
  background: #fff url("arrow.gif") center right no-repeat;
  padding-right: 30px;
}

Объединение классов и состояний открывает широкие возможности для ссылок, в чем слушателю предлагается убедиться самостоятельно.

Практическое занятие 5

Целью практического занятия является закрепление материала лекции 14. В ходе практического занятия слушатель осваивает основные методы оформления ссылок и списков с помощью CSS.

Слушателю предлагается средствами CSS установить базовые маркеры для нумерованных и маркированных списков, а также специальные маркеры, использующие графические изображения. Также рекомендуется создать горизонтальный список и список без маркеров.

Используя псевдоклассы, предлагается оформить различные состояния ссылок с помощью различного вида подчеркиваний, а также установить индивидуальные цвета. Необходимо установить для ссылок, указывающих на ресурсы Сети, определенное графическое изображение и предусмотреть смену изображения для уже посещенной ссылки. Также необходимо предусмотреть изменения вида ссылки при наведении на нее курсора: сделать ссылку перечеркнутой и изменить цвет фона ссылки.