Здрастуйте, шановні читачі блогу . Сьогодні чергова стаття в скарбничку CSS довідника. Мова в ній піде про оформлення нумерованих і маркованих списків в Html за допомогою правил таблиць каскадних стилів. Тут все дуже просто, але тим не менше я вирішив присвятити цій темі окремий пост.
Трохи раніше ми вже встигли дізнатися як фон задається через background, як оформляється текст за допомогою text-decoration, vertical-align, align та indent і як можна працювати зі шрифтами з допомогою Font (Weight, Family, Size, Style). Ну, а ще трохи раніше ми у всіх подробицях розглянули всілякі селектори CSS і їх різні комбінації для вказівки саме того елемента Html коду, для якого потрібно буде застосувати певні властивості стильового оформлення.
List style — оформлення списків в Html коді
Отже, в мові стильової розмітки існує три окремих правила починаються з list-style, які служать для налаштування зовнішнього вигляду списків (нумерованих або маркованих) в коді веб документів. Крім цього існує збірне Css правило list-style, яке дозволяє дещо скоротити кількість коду. Але про все по порядку.
Те, що ми зараз з вами будемо розглядати, допустимо використовувати як для Html елементів LI, так і для елементів Ul і Ol (маркіровані та нумеровані списки, відповідно). У чому буде різниця застосування list-style для цих тегів?
Якщо прописати його тільки для конкретного елемента списку LI, то, відповідно, воно тільки для нього і застосувати (або взагалі для всіх елементів LI). А якщо аналогічне правило прописати для контейнерів Ul або Ol, то воно застосувати для всіх тегів LI ув’язнених у цих контейнерах. Тобто воно перейде до елемента LI спадково (читайте більш докладно про спадкування в CSS).
Власне, дізнатися, чи успадковується властивість або немає, можна на сайті валідатора (читайте про валідатор W3C по наведеній посиланням) у розділі присвяченому специфікації таблиць каскадних стилів. У стовпці «Inherited» навпроти успадкованих правил буде стояти «Yes»:
Давайте почнемо з list-style-type, що дозволяє задати тип маркирации для окремих елементів Html списку. Для цього правила допустимі значення:
Як ви думаєте, з допомогою яких елементів Ul або Ol був створений розташований трохи вище список? Питання на засипку. Виявляється, що в сучасній верстці це вже не важливо, хоча в даному конкретному випадку я використав Ol, але змінивши його на Ul — зовнішній вигляд залишиться колишнім, бо він задається для кожного елемента своїм значенням CSS правила list style type.
По суті Ul і Ol відрізняються тільки поведінкою за замовчуванням (Ul — маркує, а Ol — нумерує). Але якщо ви захочете, то зможете легко перетворити один вид списку в інший за допомогою list-style-type. Шрифт для маркування цифрами або літерами використовується точно такий же, який був визначений вами для вмісту тегів LI. Наприклад, помінявши колір шрифту для списку ми поміняємо і колір маркерів:
Давайте перейдемо до наступного CSS властивості — list-style-position. За допомогою нього можна задати позицію (розміщення) області з маркером. Для нього передбачено лише два варіанти значень:
Тобто, по суті, в list-style-position ми вказуємо, де потрібно розміщувати область з маркерами — за межами елемента LI (outside) або всередині нього (inside). За замовчуванням область з маркером виноситься за межі, тобто використовується значення outside.
Давайте подивимося на прикладі. У першому елементі списку я спеціально пропишу list-style-position:inside і ми подивимося, що з цього вийде:
List-style-image і збірне правило Css
Далі у нас на черзі List-style-image — дозволяє задати картинку, яка буде використовуватися в якості маркера. Це правило за замовчуванням має значення None (тобто ніякої картинки в якості маркера використовується), але ви можете прописати функціонал Url (), вказавши в ньому шлях до зображення, що в наслідок буде виконувати роль маркера в цьому списку:
Виглядати це може таким чином:
list-style-image: url(https:///images/list_star.png);
Як ви пам’ятаєте, у статті про тег зображення Img я говорив, що картинки відносяться до рядковим елементів (власне, для браузера ця та ж сама буква, але іноді дуже великого розміру).
Ось картинка і встає на місце маркера (букви або цифри). При цьому висота рядка з елементом списку, буде збільшена, якщо ви вставите в якості маркера велику картинку (як це сталося у другому елементі трохи вище наведеного прикладу).
У функціоналі для list style image можна вказувати як абсолютні так і відносні посилання на зображення. Якщо картинка не довантажити, то буде використовуватися маркер або нумерація за замовчуванням, або те, що прописано в list-style-type для цього елемента списку.
Щоб записати всі три описаних вище CSS правила в одне єдине, можна буде використовувати List-style, що є збірним для оформлення списків. Порядок вказівки значень в ньому не має ніякого значення. Ті значення, які ви не поставите в List-style, в явному вигляді будуть інтерпретовані браузером зі значеннями прийнятими за замовчуванням.
Де подивитися значення за замовчуванням? Та все там же — у специфікації CSS валідатора W3C у стовпці «Initial value» навпроти вакансій, що вас властивостей:
Значення для окремих властивостей у загальному правилі List-style розділяються пробілами. Місця розташування, як вже згадував, не важливі:
На практиці це може виглядати, наприклад, так:
list-style:inside upper-roman url(https:///images/list_star.png);
Можна використовувати значення в будь-якому порядку і будь-якій кількості (починаючи від одного). До речі кажучи, з допомогою списків найчастіше формуються на сайтах меню і властивість List-style при цьому використовується для того, щоб прибрати маркери списків меню, які там абсолютно не потрібні:
list-style-type:none;
або
list-style:none;
Удачі вам! До зустрічей на сторінках блогу
