phpjsJqueryhtmlcssblog

list-style-type

"list-style-type" - это свойство css, которое меняет вид маркера для элемента списка. Маркеры бывают двух типов: маркированного списка (тег <ul>) и нумерованного (тег <ol>).

Подробно о "list-style-type"

1. Что такое "list-style-type" + синтаксис.
2. Значения свойства "list-style-type".
3. Что такое "list-style-type" = disk.
4. Пример c "list-style-type" = circle.
5. Пример c "list-style-type" = square.
6. Пример c "list-style-type" = decimal.
7. Пример c "list-style-type" = decimal-leading-zero.
8. Пример c "list-style-type" = lower-greek.
9. Пример c "list-style-type" = lower-roman.
10. Пример c "list-style-type" = upper-roman.
11. Пример c "list-style-type" = lower-latin.
12. Пример c "list-style-type" = upper-latin.

Скопировать ссылку



Что такое "list-style-type" + синтаксис.

Как уже выше было сказано о то, "что такое list-style-type" :

"list-style-type" - это свойство css для создания двух типов списков.


Пример синтаксиса "list-style-type".

ul.class { list-style-type: circle }

Объяснение синтаксиса "list-style-type".

ul.class - элемент списка(класс приведен в качестве примара универсального атрибута).

list-style-type - свойство.

circle - значение свойства(в данном примере круг).

Пример "list-style-type" по умолчанию.

Как вы наверное знаете, что у каждого свойства(и др.) ... есть значения по умолчанию.

Не буду повторять как это делать - см.здесь

Скопировать ссылку



Значения свойства "list-style-type".

Значения зависят от того, к какому типу списка они применяются: маркированному или нумерованному.

"list-style-type" для тега <ul>

list-style-type : disc

Маркер в виде точки.




---

list-style-type : circle

Маркер в виде кружка.




---

list-style-type : square

Маркер в виде квадрата.




---

armenian - Традиционная армянская нумерация.




---

list-style-type : decimal

Арабские числа (1, 2, 3, 4,...).




---

list-style-type : decimal-leading-zero

Арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03,...).




---

georgian : Традиционная грузинская нумерация.




---

"list-style-type" для тега <ol>

list-style-type : lower-alpha

Это значение аналогично lower-alpha.




---

list-style-type : lower-greek

Строчные греческие буквы (α, β, γ, δ,...).




---

list-style-type : lower-roman

Римские числа в нижнем регистре (i, ii, iii, iv, v,...).




---

list-style-type : upper-roman

Римские числа в верхнем регистре (I, II, III, IV, V,...).




---

list-style-type : lower-latin

Строчные латинские буквы (a, b, c, d,...).




---

list-style-type : upper-latin[p]


Заглавные латинские буквы (A, B, C, D,...).




---

list-style-type : upper-alpha

Это значение аналогично upper-latin.




---

list-style-type : none

Отменяет маркеры для списка.




---

list-style-type : inherit

Наследует значение родителя.




---

Скопировать ссылку



Для "list-style-type" значение по умолчанию - "disc"(тег <ul>)

Для того, чтобы показать начертание свойства "ist-style-type" со значением "disc", нам потребуется:

Тег: <ul>

Тег: <li>

Далее возьмем выше приведенный пример из синтаксиса:

<ul>
<li>list-style-type = disc</li>
<li>list-style-type = disc</li>
</ul>


И далее поместим приведенный код прямо здесь и получим:

Пример свойства "list-style-type" тега <ul> по умолчанию.

То получим вот такой пример "list-style-type = disc":

• list-style-type = disc
• list-style-type = disc
Скопировать ссылку



Пример свойства "list-style-type" = circle(тег <ul>).

В этом пункте, для того, чтобы показать начертание свойства "ist-style-type" со значением "circle", нам опять потребуется:

Тег: <ul>

Тег: <li>

Код с вшитым list-style-type по умолчанию...

Добавим в наш тег <ul> класс - "example_circle" и наш код будет иметь новый вид:

<ul class="example_circle">
<li>list-style-type = circle</li>
<li>list-style-type = circle</li>
</ul>


Есть "3 способа css" - используем один из них, пропишем новые свойства для list-style-type:

<style>
ul.example_circle {
list-style-type: circle;
}
</style>


Всё соберем вместе и поместим приведенный код прямо здесь и получим:

Пример свойства "list-style-type" тега <ul>= circle.

• list-style-type = circle
• list-style-type = circle
Скопировать ссылку



Пример c "list-style-type" = square(тег <ul>).

Возьмем предыдущий пункт и заменим circle на square...

Нам опять потребуется:

Тег: <ul>

Тег: <li>

Код с вшитым list-style-type по умолчанию...

Добавим в <ul> класс - "example_square" и новый вид:

<ul class="example_square">
<li>list-style-type = square</li>
<li>list-style-type = square</li>
</ul>


Прописываем новые свойства :

<style>
ul.example_square {
list-style-type: square;
}
</style>


Всё соберем вместе и поместим приведенный код прямо здесь и получим:

Пример свойства "list-style-type" тега <ul>= square.

• list-style-type = square
• list-style-type = square
Скопировать ссылку



Пример c "list-style-type" = decimal(тег <ol>).

С тегом <ul> покончили приходим к тегу <ol>

Нам нужно:

Тег: <ol>

Тег: <li>

Код с вшитым list-style-type по умолчанию...

Добавим в <ol> класс - "example_decimal" и новый вид:

<ol class="example_decimal">
<li>list-style-type = decimal</li>
<li>list-style-type = decimal</li>
</ol>


Прописываем новые свойства :

<style>
ol.example_decimal {
list-style-type: decimal;
}
</style>


Всё соберем вместе и поместим приведенный код прямо здесь и получим:

Пример свойства "list-style-type" тега <ol>= decimal.

1. list-style-type = decimal
2. list-style-type = decimal
Скопировать ссылку



Пример c "list-style-type" = decimal-leading-zero(тег <ol>).

Нам нужно:

Тег: <ol>

Тег: <li>

Код с вшитым list-style-type по умолчанию...

Добавим в <ol> класс - "example_decimal_leading_zero" и новый вид:

<ol class="example_decimal_leading_zero">
<li>list-style-type = decimal-leading-zero</li>
<li>list-style-type = decimal-leading-zero</li>
</ol>


Прописываем новые свойства :

<style>
ol.example_decimal_leading_zero{
list-style-type: decimal-leading-zero;
}
</style>


Всё соберем вместе и поместим приведенный код прямо здесь и получим:

Пример свойства "list-style-type" тега <ol>= decimal-leading-zero.

1. list-style-type = decimal-leading-zero
2. list-style-type = decimal-leading-zero
Скопировать ссылку



Пример c "list-style-type" = lower-greek(тег <ol>).

Нам нужно:

Тег: <ol>

Тег: <li>

Код с вшитым list-style-type по умолчанию...

Добавим в <ol> класс - "lower-greek" и новый вид:

<ol class="lower-greek">
<li>list-style-type = lower-greek</li>
<li>list-style-type = lower-greek</li>
</ol>


Прописываем новые свойства :

<style>
ol.lower-greek{
list-style-type: lower-greek;
}
</style>


Всё соберем вместе и поместим приведенный код прямо здесь и получим:

Пример свойства "list-style-type" тега <ol>= lower-greek.

1. list-style-type = lower-greek
2. list-style-type = lower-greek
Скопировать ссылку



Пример c "list-style-type" = lower-roman(тег <ol>).

Нам нужно:

Тег: <ol>

Тег: <li>

Код с вшитым list-style-type по умолчанию...

Добавим в <ol> класс - "lower-roman" и новый вид:

<ol class="lower-roman">
<li>list-style-type = lower-roman</li>
<li>list-style-type = lower-roman</li>
</ol>


Прописываем новые свойства :

<style>
ol.lower-roman{
list-style-type: lower-roman;
}
</style>


Всё соберем вместе и поместим приведенный код прямо здесь и получим:

Пример свойства "list-style-type" тега <ol>= lower-roman.

1. list-style-type = lower-roman
2. list-style-type = lower-roman
Скопировать ссылку



Пример c "list-style-type" = upper-roman(тег <ol>).

Нам нужно:

Тег: <ol>

Тег: <li>

Код с вшитым list-style-type по умолчанию...

Добавим в <ol> класс - "upper-roman" и новый вид:

<ol class="upper-roman">
<li>list-style-type = upper-roman</li>
<li>list-style-type = upper-roman</li>
</ol>


Прописываем новые свойства :

<style>
ol.upper-roman{
list-style-type: upper-roman;
}
</style>


Всё соберем вместе и поместим приведенный код прямо здесь и получим:

Пример свойства "list-style-type" тега <ol>= upper-roman.

1. list-style-type = upper-roman
2. list-style-type = upper-roman
Скопировать ссылку



Пример c "list-style-type" = lower-latin(тег <ol>).

Возьмем предыдущий пункт и заменим значение на lower-latin... и тег <ol>

Нам потребуется:

Тег: <ol>

Тег: <li>

Код с вшитым list-style-type по умолчанию...

Добавим в <ol> класс - "example_lower_latin" и новый вид:

<ol class="example_lower_latin">
<li>list-style-type = lower-latin</li>
<li>list-style-type = lower-latin</li>
</ol>


Прописываем новые свойства :

<style>
ol.example_lower_latin {
list-style-type: lower-latin;
}
</style>


Всё соберем вместе и поместим приведенный код прямо здесь и получим:

Пример свойства "list-style-type" тега <ol>= lower-latin.

1. list-style-type = lower-latin
2. list-style-type = lower-latin
Скопировать ссылку



Пример c "list-style-type" = upper-latin(тег <ol>).

Нам нужно:

Тег: <ol>

Тег: <li>

Код с вшитым list-style-type по умолчанию...

Добавим в <ol> класс - "upper-latin" и новый вид:

<ol class="upper_latin ">
<li>list-style-type = upper-latin</li>
<li>list-style-type = upper-latin</li>
</ol>


Прописываем новые свойства :

<style>
ol.upper_latin {
list-style-type: upper-latin;
}
</style>


Всё соберем вместе и поместим приведенный код прямо здесь и получим:

Пример свойства "list-style-type" тега <ol>= upper-latin.

1. list-style-type = upper-latin
2. list-style-type = upper-latin

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---