Списки в CSS



Работа со списками при использовании CSS дает большие возможности, чтобы изменить внешний вид списков. Универсальными свойствами являются:

  • list-style-type - изменяет вид маркера;
  • list-style-position - определяет размещение маркера относительно текста;
  • list-style-image - устанавливает адрес изображения вместо маркера;
  • list-style - универсальное средство, позволяющее объединить три предыдущих свойства одновременно;

Свойство LIST-STYLE-TYPE


Это свойство позволяет устанавливать вид маркера списка. Основными значениями являются:


  • disk - закрашенный кружок.
  • circle - незакрашенный кружок.
  • square - закрашенный квадрат.

Также используют для нумерации следующие основные значения:


  • decimal - десятичные числа.
  • lower-roman - строчные римские цифры.
  • upper-roman - прописные римские цифры.
  • lower-alpha - строчные латинские буквы.

Пример записи кода:

<html> <head> <title></title> <style type="text/css"> ul {list-style-type:circle;} ol {list-style-type:lower-alpha;} </style> </head> </html>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


Свойство LIST-STYLE-POSITION


Свойство определяет положение маркера.

  • outside - маркер расположен за пределами блока списка;
  • inside - маркер расположен внутри блока текста;

Пример записи кода:

<html> <head> <title></title> <style type="text/css"> #spisok1{ list-style-position:inside; } #spisok2{ list-style-position:outside; } </style> </head> <body> <div> <ol id="spisok1"> <li>Первый пункт первого списка</li> <li>Второй пункт первого списка</li> <li>Третий пункт первого списка</li> </ol> <ol id="spisok2"> <li>Первый пункт второго списка</li> <li>Второй пункт второго списка</li> <li>Третий пункт второго списка</li> </ol> </div> </body> </html>

РЕЗУЛЬТАТ:



Свойство LIST-STYLE-IMAGE


Это свойство list-style-image позволяет заменить маркер любым изображением. Создаем рисунок, который будем использовать вместо маркера.

Пример записи кода:

<html> <head> <title></title> <style type="text/css"> #spisok{ list-style-image:url(../Poleznoe/marker.gif); } </style> </head> <body> <ul id="spisok"> <li>Первый пункт первого списка</li> <li>Второй пункт первого списка</li> <li>Третий пункт первого списка</li> </ul> </body> </html>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


Сокращенная форма LIST-STYLE


C помощью этого свойства list-style можно сделать запись более компактной.


Пример записи кода:

<html> <head> ul { list-style-type:disk ; list-style-position: inside; list-style-image: url(marka.gif); } </head> </html>

Все три строки можно заменить вот так:

Пример записи кода:

<html> <head> <style type="text/css"> ul{ list-style:disk inside url(../Poleznoe/marka.gif)} </style> </head> </html>

Запись производится через пробел в любом порядке.

Далее рассмотрим: Ссылки в CSS