На сьогоднішній день я розумію, що різні елементи HTML розділені за своєю функціональністю стилем CSS за замовчуванням, осторонь семантики.

Використовуючи користувальницький CSS, ви можете (небажано) змусити будь-який елемент HTML поводитися як будь-який інший.

Якщо це правильно, єдине, що я не можу врахувати, це кулі на <li>елементах. Що CSS викликає їх? Як ви можете додати це до інших елементів?

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

Кулі містяться "в межах" заповнення <ul>елемента:

Набивка позначена зеленим кольором, а поле - помаранчевим:

Зменшення заповнення показує, що кулі знаходяться в межах цього заповнення:

Збільшення поля, <ul>наприклад, зміщує його вправо.

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

ul
{
    list-style: none;
}

Якщо ви хочете позбутися всіх полів / відступів та крапок, використовуйте це:

ul
{
    list-style: none;
    margin: 0;
    padding: 0;
}

Звичайно, ви також можете застосувати маркери до інших елементів керування HTML:

div
{
    padding-left: 40px;
}
a
{
    display: list-item;
    list-style: disc;
}

<div>
    <a href="#">Item #1</a>
    <a href="#">Item #2</a>
    <a href="#">Item #3</a>
    <a href="#">Item #4</a>
</div>

Зазвичай браузери мають "таблицю стилів за замовчуванням" - набір стилів CSS, що застосовуються до певних елементів HTML. Погляньте на стилі Firefox по замовчуванням , стилі Chrome за умовчанням , а також стилі IE за замовчуванням .

Як правило, <ul>тег має наступні стилі CSS, що перезаписуються:

ul {
  display: block;
  list-style-type: disc;
  margin-before: 1em; /* equivalent to margin-top in most languages */
  margin-after: 1em;  /* equivalent to margin-bottom in most languages */
  margin-start: 0px;  /* equivalent to margin-left in LTR */
  margin-end: 0px;    /* equivalent to margin-right in LTR */
  padding-start: 40px;/* equivalent to padding-left in LTR*/
}

• list-style-type: disc призводить до появи значка диска поруч із елементом.
• list-style-positionі list-style-imageне встановлені. Їх за замовчуванням - outsideі none, відповідно. Це означає, що discпіктограма, визначена вище, з'явиться зліва від liелемента (на більшості мов) і не заважатиме самому liвікні відображення.
• Параметри marginта і paddingправильно розміщують вміст.

<li>Тег в наступному:

li {
  display: list-item;
}

• display: list-itemподібний display: block;і дозволяє окремим елементам списку відображатися в різних рядках.

Дивіться цю сторінку https://css-tricks.com/almanac/properties/l/list-style/

Кулі походять від елементів ул. Ви можете змінити їх, використовуючи властивості list-style-type або list-style-image

Круглі маркери для <li>елементів - це лише браузер за замовчуванням. Так само, як він має шрифт за замовчуванням, розмір шрифту, підкреслення для посилань (синій) тощо. Щоб переконатись, що ви перезаписали за замовчуванням браузер, скористайтеся деяким css reset http://cssreset.com/ або bootstrap css.

Стиль для <li>визначається <ul>або <ol>навколо нього. наприклад

ul.circle {list-style-type: circle;}
ul.square {list-style-type: square;}
ol.upper-roman {list-style-type: upper-roman;}
ol.lower-alpha {list-style-type: lower-alpha;} 
ul.image{ list-style-image: url("//cdn.sstatic.net/stackoverflow/img/favicon.ico?v=6cd6089ee7f6");} 
ul.singleline { display:flex; list-style:none; } // css3 only

<ul class="circle">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
<ul class="square">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
<ol class="upper-roman">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ol>
<ol class="lower-alpha">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ol>
<ul class="image">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
<ul class="singleline">
    <li>One </li>
    <li>Two </li>
    <li>Three </li>
</ul>

Я думаю, що оригінальним питанням було насправді, "як я можу додати маркери до ІНШИХ елементів, оскільки CSS нібито дозволяє вам стилювати будь-що (як p елементи), щоб виглядати як щось інше (як LI).

Відповідь здається такою: LI - це особливий випадок, AFAIK. Може бути помилковим. Я намагався додати <style="display: list-item; list-style-type:disc;">на <p>елементи, і не отримали кулі. (Протестовано лише з Chrome).

Ви могли б насправді додати символи маркера ( •) вручну або програмно на початок кожного елемента p і встановити поля та відступи, щоб виглядати як блок UL / LI, я думаю.

Маркери в елементах списку є прикладом створеного вмісту . Інші приклади генерованого вмісту включають цифри в упорядкованих списках, лічильники CSS :beforeта :afterпсевдоелементи.

Що CSS викликає їх?

Встановлення display: list-itemелемента змусить його відображати кулі. Ви також можете змінити зовнішній вигляд і положення .

Як ви можете додати це до інших елементів?

Див. Приклади нижче:

.mylist.type1 > span {
  display: list-item;
  /* inside: the marker is placed inside the element box before its content */
  list-style-position: inside;
}
.mylist.type2 > span {
  display: list-item;
  /* outside (default): the marker is placed outside the element box towards left */
  /* by the way you are not restricted to just bullets */
  list-style-type: lower-roman;
}
.mylist.type2 {
  /* add some room on left for bullets positioned outside */
  padding-left: 2em;
}

<div class="mylist type1">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</div>
<hr>
<div class="mylist type2">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</div>

Для більш точного контролю я б запропонував використовувати псевдоелементи (і лічильники CSS, якщо ви хочете рахувати).