Списки в CSS - CSS по кроках

Як Ви вже знаєте з HTML, є нумеровані списки, представлені тегом

    , та марковані списки, представлені тегом
      . Кожен пункт в обох списках позначається тегом.

Крім цього у ряді випадків знаходять застосування списки визначень, у побудові яких беруть участь теги , та .

Властивості CSS, які задають для списків стильове оформлення, застосовуються до тегів

    ,
      , , і .

Маркер списку

Властивість list-style-type визначає вид маркера для елементів списку.

Умовно значення цієї властивості можна поділити на маркери:

- для нумерованого списку:

- upper-alpha - великі літери: A, B, C..., - lower-alpha - малі літери: a, b, c..., - upper-roman - великі римські числа: I, II, III …, - lower-roman – малі римські числа: i , ii , iii …, - decimal – арабські цифри: 1 , 2 , 3 …

- і для маркованого списку:

- disk - зафарбоване коло, - circle - не зафарбоване коло, - square - квадрат.

Як бачите, маркування списків в HTML і в CSS те саме.

Але особливістю списків CSS є універсальність наведених вище значень властивості list-style-type у тому плані, що вони можуть бути застосовані до будь-якого списку або пункту списку.

Тобто з маркованого списку можна зробити нумерований і навпаки.

При значенні none маркер списку відсутній.

  1. Це нумерований список
  2. Пункти списку - арабські цифри (за замовчуванням)
  3. : square ; "> Я вибрав як маркер для третього пункту списку квадрат
  4. Четвертий пункт
  5. : none ; "> П'ятий пункт списку не позначений

Маркер -зображення

Властивість list-style-image дозволяє задати як маркер для пунктів списку зображення.

При значенні none маркер списку відсутній.

Моря півдня європейської частини України:

    : url(img/Greendaw.gif); ">
  • Чорне море
  • Азовське море
  • : url(img/Redcross.gif); "> Каспійське море

Моря півдня європейської частини України:

  • Чорне море
  • Азовське море
  • Каспійське море

Позиція маркеру

Властивість list-style-position задає позицію маркера у списку.

І тут лише два варіанти: маркер знаходиться або за кордоном списку - значення outside (значення за умовчанням), або всередині списку при значенні inside .

    : inside ; ">
  • У попередньому прикладі навпроти Каспійського моря стоїть хрест. Якщо Ви не знаєте чому, то
  • Каспійське море – це озеро.
  • : outside ; >

Універсальна властивість

Властивість list-style є універсальною властивістю, яка дозволяє одночасно вказати значення всіх властивостей, пов'язаних зі списками.

Значення властивостей вказують через пробіл у будь-якому порядку. А браузер автоматично визначає належність значення якості.

Не обов'язково вказувати значення всіх властивостей. Не використовуваним властивостям надаються значення за замовчуванням.

    : upper-roman ins >; ">
  • До цього списку за допомогою властивості list-style я застосував дві властивості, що відповідають за оформлення списків, вказавши через пропуск лише значення властивостей.
  • upper-roman – пункти списку позначені великими римськими цифрами.
  • ins >