logo

TechCodeview

Стилі списку CSS

Список у CSS визначає, як вміст або елементи перераховуються певним чином, тобто вони можуть бути впорядковані акуратно або випадково, що допомагає створити чисту веб-сторінку. Оскільки вони адаптивні та прості у використанні, їх можна використовувати для організації великих обсягів матеріалу. Типовий стиль списку без полів. Список можна розділити на дві категорії:

    Невпорядкований список:За замовчуванням елементи списку в невпорядкованих списках позначаються маркерами, які є крихітними чорними кружечками.Упорядкований список:Елементи списків у впорядкованих списках позначаються цифрами та літерами.

Для керування списками CSS доступні такі властивості списків CSS:

    List-style-type:Ця властивість використовується для визначення зовнішнього вигляду маркера елемента списку, наприклад диска, символу або спеціального стилю лічильника.List-style-image:За допомогою цього параметра можна вказати зображення, які будуть служити маркерами елементів списку.List-style-position:Він описує, де поле маркера має бути відносно основного поля блоку.Стиль списку:Стиль списку налаштовується за допомогою цього атрибута.

Тепер ми дізнаємося більше про ці характеристики на прикладах.

Властивість типу стилю списку

Тип маркера списку за замовчуванням можна змінити на інші типи, включаючи квадрат, коло, римські цифри, латинські літери та багато іншого. Записи в невпорядкованому списку позначаються круглими маркерами (•), а елементи в упорядкованому списку нумеруються за замовчуванням арабськими цифрами (1, 2, 3 тощо).

Маркування або маркери буде видалено, якщо ми встановимо для них значення none.

Синтаксис:

list-style-type:value;

powershell менше або дорівнює

Ми можемо використовувати значення таким чином:

  1. коло
  2. десятковий, наприклад:1,2,3 тощо
  3. десяткові перші нулі, наприклад: 01,02,03,04 тощо
  4. нижньорим
  5. верхньорим
  6. нижчий альфа, наприклад, a,b,c тощо
  7. верхній альфа, наприклад, A, B, C тощо
  8. Майдан

Примітка. Стандартні відступи та поля також включено до списку. Необхідно додати padding:0 і margin:0 до
    і
      теги, щоб усунути це.

приклад

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

 Example for CSS Lists .num{ list-style-type:decimal; } .alpha{ list-style-type:upper-alpha; } .circle{ list-style-type:circle; } .square{ list-style-type:square; } .disc{ list-style-type:disc; } <h2> Ordered Lists </h2> <ol class="order"> <li>ONE</li> <li>TWO</li> </ol> <h2> Unordered lists </h2> <ul> <li>ONE</li> <li>TWO</li> </ul>

Вихід

Стилі списку CSS