Правила CSS для налаштування зовнішнього вигляду списку на сторінці HTML. Властивість list style (type, image, position)

Правила CSS для налаштування зовнішнього вигляду списку на сторінці HTML. Властивість list style (type, image, position)
15.07.2021

Опис

Універсальна властивість, що дозволяє одночасно встановити стиль маркера, його положення, а також зображення, яке буде використовуватися як маркера. Для детального ознайомлення дивіться інформацію про кожну властивість і окремо.

Синтаксис

list-style: list-style-type || list-style-position || list-style-image | inherit

Значення

Будь-які комбінації трьох значень визначальних стиль маркерів, вони поділяються між собою пропуском. Комбінації значень повинні слідувати у вказаному порядку: спочатку йде тип маркера, потім положення та картинка. Жодне значення не є обов'язковим, тому не можна опустити.

Inherit Наслідує значення батька.

HTML5 CSS2.1 IE Cr Op Sa Fx

list-style

  • Lorem ipsum dolor sit amet
  • Consectetuer adipiscing elit
  • Sed diem nonummy nibh euismod
  • Тінціндент при лакорозінній долоні magna aliguam ерет volutpat. У wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Результат даного прикладупоказано на рис. 1.

Мал. 1. Застосування якості list-style

Об'єктна модель

document.getElementById("elementID ").style.listStyle

Браузери

Internet Explorer до версії 7.0 включно не підтримує значення inherit.

Матеріал із Довідник Web-мов

Використовувані значення

sLocation Рядокяка може визначати та приймати одне з наступних значень:

Ця властивість читається/записується всім об'єктів, крім currentStyle (тільки читання). Значення за умовчанням є none. Атрибут каскадних таблиць стилів (CSS) успадковується.

Зауваження

Властивість listStyleImageзастосовується до всіх елементів, для яких задані margin та display:list-item.

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

Для показу зображення маркера списку для властивості marginмає бути встановлене значення мінімум 30 pt.

Приклади

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

У першому прикладі використовується селектор ulта атрибут list-style-image.

У другому прикладі використовується властивість listStyleImageдля зміни стилю маркера, коли відбувається подія onmouseover.

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

    Взагалі списки серед блокових елементів стоять окремо. Це пов'язано з тим, що вони включають маркери і нумерацію, які розставляє сам браузер.

    List style - оформлення списку на html сторінці

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

    Всі ці властивості можна використовувати як для html елементів li, і для елементів ul і ol. Єдина відмінність, якщо правила прописати для конкретного значення списку li, воно тільки для нього і застосовується. Якщо ж ці css правила прописати для контейнерів ul чи ul, всі вони застосовуються всім елементів li укладених у цих контейнерах.

    Почнемо з атрибуту list-style-type, який задає вид маркерівабо нумераціїу пунктів списку:

    list-style-type: disc| circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | georgian|none|inherit

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

    • disc - маркер у вигляді чорного кружка (значення за промовчанням для маркованих списків).
    • circle - маркер у вигляді незабарвленого кружка.
    • square – маркер у вигляді квадратика. Він може бути світлим чи темним, залежно від браузера.
    • decimal - нумерація арабськими цифрами (за замовчуванням значення для нумерованих списків).
    • decimal-leading-zero – нумерація арабськими цифрами від 01 до 99 з початковим нулем.
    • lower-roman – нумерація маленькими римськими цифрами.
    • upper-roman – нумерація великими римськими цифрами.
    • lower-greek – нумерація маленькими грецькими літерами.
    • lower-alpha та lower-latin - нумерація маленькими латинськими літерами.
    • upper-alpha та upper-latin - нумерація великими латинськими літерами.
    • armenian - нумерація традиційними вірменськими цифрами.
    • georgian – нумерація традиційними грузинськими цифрами.
    • none - маркерація та нумерація здійснюватися взагалі не буде.

    Так приблизно виглядатимуть елементи списку в браузері з різними значеннями list-style-type:

    При використання CSSстилів не важливо, який елемент (OL або UL) використовується для створення списку. OL і UL відрізняються лише стандартною поведінкою і за допомогою властивості list-style-type ви можете легко перетворити один вид списку на інший.

    Атрибут стилю list-style-imageдозволяє задавати як маркерапунктів списку графічне зображення. У разі використання атрибуту list-style-image значення атрибуту list-style-type ігнорується:

    list-style-image: none|<интернет-адрес файла изображения>|inherit

    Значення noneприбирає маркер зображення та встановлює звичайний, не графічний. Це стандартна поведінка.

    При вказівці адреси файлу зображення на місце маркера буде вставлена ​​картинка. Як і при використанні , як адресу картинки можна використовувати абсолютні так і відносні адреси. Якщо браузер не зможе підвантажити зображення, то використовуватиметься маркер або нумерація за замовчуванням або те, що прописано у властивості list-style-type.

    Приклад списку з картинкою як маркер:


    • перший пункт списку;

    • другий пункт списку;

    • третій пункт списку.

    А ось як це виглядає:

    • перший пункт списку;
    • другий пункт списку;
    • третій пункт списку.

    Зрозуміло, що при виборі картинки як маркер краще підбирати невелике зображення.

    І остання властивість CSS із серії list-style list-style-position,яке дозволяє вказати місцезнаходження маркера або нумерації у списку. Як значення може бути два варіанти:

    list-style-position: inside|outside

    У разі значення insideмаркер або нумерація міститься як би всередині списку, а у випадку outsideза межами елементів li. За промовчанням використовується значення outside і маркер виноситься за межі.

    Приклад списку з різними значеннями list-style-position:

    • у першому пункті все за замовчуванням;
    • у другому пункті list-style-position встановлено у inside. В цьому випадку, зверніть увагу, другий рядок розміщується на одному рівні з маркером;
    • у цьому пункті list-style-position дорівнює outside.

    Збірне CSS правило list-style

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

    Розділяти значення у збірному правилі list-style слід пробілами:

    list-style: list-style-type list-style-image list-style-position;

    Реальне CSS правило для оформлення списків може виглядати приблизно так:

    list-style: circle url (//сайт/images/marker.png) outside;

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

    Як уже говорилося вище, значення можна вказувати у будь-якому порядку та будь-якій кількості. Так, наприклад, для того щоб прибрати маркери зі списку менюдостатньо запису:

    list-style: none;

    Те саме можна зробити, використовуючи властивість list-style-type:

    list-style-type: none;

    На цьому розповідь про оформлення html списківза допомогою каскадних таблиць стилів закінчу. Щоб дізнатися про інших CSS властивостяхВи можете прочитати статті з розділу « » і не забудьте підписатися на оновлення блогу . До нових зустрічей!

    Матеріал із Довідник Web-мов

    Використовувані значення

    sStyle Рядокяка може визначати та приймати від одного до трьох з наступних значень:

    Ця властивість читається/записується всім об'єктів. Значення за умовчанням є disc outside none. Атрибут каскадних таблиць стилів (CSS) успадковується.

    Зауваження

    Властивість listStyle- це універсальна складова властивість. Коли встановлюються обидва значення для типу, а також для зображення, то значення для зображення має пріоритет (буде показаний малюнок, а не один із стандартних маркерів списку), крім випадків, коли для listStyleImage встановлено значення noneабо посилання ( URL) на зображення встановлено неправильно або застаріла.

    Властивість listStyleтакож застосовується до всіх елементів, для яких встановлено значення list-itemдля якості display. Щоб задати показ маркера списку у вигляді жирних точок, ви обов'язково маєте докладно описати властивість margin або задати значення insideдля властивості listStylePosition у цих елементах.

    Значення у властивості listStyleможуть бути описані у будь-якому порядку. Їх необхідно розділяти пробілом.

    Приклади

    Наступні приклади ілюструють застосування властивості listStyleта атрибуту list-styleдля завдання стиль списку.

    У прикладі використовуються класи ulі UL.compact, а також атрибут list-styleдля завдання двох невпорядкованих списків. Для класу UL.compactщоб замінити малюнок, описаний у ulвам потрібно задати значення noneдля атрибуту list-style-image.

    • ...
    • ...
    • ...
    • ...

    У другому прикладі використовується властивість listStyle. Якщо задане для списку зображення буде недоступним, то використовуватиметься маркер hollow circle(Порожній гурток).

      У третьому прикладі показано, що властивість listStyleзастосовується для елементів, у яких властивість displayприймає значення list-item.

      letter-spacing line-height list-style margin max-height max-width min-height min-width outline overflow padding position right text-align text-decoration text-indent text-transform top vertical-align white-space word z-index
    • Довідник HTML Уроки HTML Відеокурси щодо створення сайту

      • Властивість LIST-STYLE

      Властивість Значення Пр* Нc*
      list-style [list-style-image; list-style-position; list-style-type ], inherit * +
      list-style-type диск , circle, шквар, decimal, decimal-leading-zero, lowel-roman, upper-roman, lowel-latin, upper-latin, armenian, georgian, none, inherit * +
      list-style-position inside, outside , inherit * +
      list-style-image URL, none , inherit * +

      Властивість List-style- Скорочена форма запису властивостей, які задають всі стилі маркерів для елементів списку. Ці властивості застосовуються як до нумерованих, так і маркованих списків - їх потрібно розглядати окремо. Скорочена форма запису може не включати будь-яку окрему властивість, але порядок їх запису повинен дотримуватися: тип маркера - його позиція - шлях до зображення.

      Галузь застосування*: елементи списків та будь-які інші, для яких значенням властивості Displayє list-item.

      List-style-type

      Властивість встановлює тип маркерадля кожного списку. Типи маркерів відрізняються для маркованих та нумерованих списків.

      Значення:

      disk- Маркер-точка.
      circle- Маркер-кружок.
      square- Маркер-квадратик.
      decimal- Арабські числа: 1, 2, 3 ….
      decimal-leading-zero- Арабські числа, починаючи з нуля: 01, 02, 03 ... 09.
      lowel-roman- Римська нумерація в нижньому регістрі.
      upper-roman- Римська нумерація у верхньому регістрі.
      lowel-latin- Малі латинські літери: a, b, c ….
      upper-latin- Великі латинські букви: A, B, C ….
      armenian- Вірменська нумерація.
      georgian- Грузинська нумерація.
      none- Відміна.
      inherit

      У прикладі використовується два різних значеннявластивості List-style-type:

      List-style-position

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

      Значення:

      inside— маркер розташований усередині списку.
      outsideмаркер винесений за межі текстового блоку.
      inherit- Спадкування від батьківського елемента.

      У прикладі наочно видно різниця між значеннями insideі outsideвластивості List-style-position:

      List-style-image

      Властивість задає шлях до картинки, яка буде маркером елемента нумерованого або маркованого списку. Розташуванням картинки-маркера можна керувати за допомогою якості List-style-position.

      Значення:

      URLшлях до графічного файлу.
      none- скасовує картинку-маркер, наприклад, для батьківського елемента.
      inherit- Спадкування від батьківського елемента.

      Ul (list-style-image: url(papka/find.png); list-style-position:inside;)

      У прикладі ми використовували як маркер картинку невеликого розміру, що наочно демонструє можливості якості List-style-image: