Як розібратися в CSS

200
  • List style — оформлення списків в Html коді
  • List-style-image і збірне правило Css
  • Здрастуйте, шановні читачі блогу . Сьогодні чергова стаття в скарбничку CSS довідника. Мова в ній піде про оформлення нумерованих і маркованих списків в Html за допомогою правил таблиць каскадних стилів. Тут все дуже просто, але тим не менше я вирішив присвятити цій темі окремий пост.

    Як розібратися в CSS

    Трохи раніше ми вже встигли дізнатися як фон задається через 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»:

    Як розібратися в CSSЯк розібратися в CSS

    Давайте почнемо з list-style-type, що дозволяє задати тип маркирации для окремих елементів Html списку. Для цього правила допустимі значення:

    Як розібратися в CSSЯк розібратися в CSS

  • None — маркирация здійснюватися взагалі не буде (list-style-type:none; застосовано для цього пункту і тому у нього немає маркера)
  • Disc — зафарбований гурток (для цього рядка якраз застосовано list-style-type:disc;)
  • Circle — коло в якості маркера
  • Square — квадратик в якості маркера
  • Decimal — арабські цифри (list-style-type:decimal;)
  • lower-alpha — латинські літери в нижньому регістрі
  • upper-alpha — латинські букви у верхньому регістрі
  • lower-roman — римські цифри в нижньому регістрі
  • upper-roman — римські цифри у верхньому регістрі
  • Як ви думаєте, з допомогою яких елементів Ul або Ol був створений розташований трохи вище список? Питання на засипку. Виявляється, що в сучасній верстці це вже не важливо, хоча в даному конкретному випадку я використав Ol, але змінивши його на Ul — зовнішній вигляд залишиться колишнім, бо він задається для кожного елемента своїм значенням CSS правила list style type.

    По суті Ul і Ol відрізняються тільки поведінкою за замовчуванням (Ul — маркує, а Ol — нумерує). Але якщо ви захочете, то зможете легко перетворити один вид списку в інший за допомогою list-style-type. Шрифт для маркування цифрами або літерами використовується точно такий же, який був визначений вами для вмісту тегів LI. Наприклад, помінявши колір шрифту для списку ми поміняємо і колір маркерів:

  • Поміняли колір тексту (list-style-type:lower-roman;color:red) і змінився колір маркера
  • Давайте перейдемо до наступного CSS властивості — list-style-position. За допомогою нього можна задати позицію (розміщення) області з маркером. Для нього передбачено лише два варіанти значень:

    Як розібратися в CSSЯк розібратися в CSS

    Тобто, по суті, в list-style-position ми вказуємо, де потрібно розміщувати область з маркерами — за межами елемента LI (outside) або всередині нього (inside). За замовчуванням область з маркером виноситься за межі, тобто використовується значення outside.

    Давайте подивимося на прикладі. У першому елементі списку я спеціально пропишу list-style-position:inside і ми подивимося, що з цього вийде:

  • Тут все за замовчуванням
  • Ось так буде виглядати розміщення галузі маркера з inside. Зверніть увагу, що друга рядок у цьому елементі і маркер розташовані на одному рівні
  • Тут все за замовчуванням
  • List-style-image і збірне правило Css

    Далі у нас на черзі List-style-image — дозволяє задати картинку, яка буде використовуватися в якості маркера. Це правило за замовчуванням має значення None (тобто ніякої картинки в якості маркера використовується), але ви можете прописати функціонал Url (), вказавши в ньому шлях до зображення, що в наслідок буде виконувати роль маркера в цьому списку:

    Як розібратися в CSSЯк розібратися в CSS

    Виглядати це може таким чином:

    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» навпроти вакансій, що вас властивостей:

    Як розібратися в CSSЯк розібратися в CSS

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

    Як розібратися в CSSЯк розібратися в CSS

    На практиці це може виглядати, наприклад, так:

    list-style:inside upper-roman url(https:///images/list_star.png);

    Можна використовувати значення в будь-якому порядку і будь-якій кількості (починаючи від одного). До речі кажучи, з допомогою списків найчастіше формуються на сайтах меню і властивість List-style при цьому використовується для того, щоб прибрати маркери списків меню, які там абсолютно не потрібні:

    list-style-type:none;

    або

    list-style:none;

    Удачі вам! До зустрічей на сторінках блогу