Стили для списков

Здравствуйте! На прошлом уроке мы разбирались как задать стили для абзацев. Сегодня поговорим о стилизации списков.

CSS предоставляет специальные свойства по стилизации списков. Одним из таких свойств является list-style-type. Оно может принимать следующие значения для нумерованных списков:

decimal: десятичные числа, отсчет идет от 1
decimal-leading-zero: десятичные числа, которые предваряются нулем, например, 01, 02, 03, … 98, 99
lower-roman: строчные латинские цифры, например, i, ii, iii, iv, v
upper-roman: заглавные латинские цифры, например, I, II, III, IV, V…
lower-alpha: строчные латинские буквы, например, a, b, c..., z
upper-alpha: заглавные латинские буквы, например, A, B, C, … Z

Для ненумерованных списков:

disk: черный диск
circle: пустой кружочек
square: черный квадратик

Например:

ul{
  list-style-type: square;
}

Чтобы вообще отключить маркеры у элементов списка, используется значение none:

ul{
    list-style-type: none;
}

Данное свойство может применяться как ко всему списку, так и к отдельным элементам. Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Стилизация списков в CSS3</title>
        <style>
             
            .decimal{
                list-style-type: decimal;
            }
            ol{
                list-style-type: lower-roman;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>Элемент 1</li>
            <li class="decimal">Элемент 2</li>
            <li>Элемент 3</li>
            <li>Элемент 4</li>
        </ol>
    </body>
</html>

Читать далее

		Это интересно Это интересно +1 +1	Как всё будет выглядеть в блоге: Стили для списков Здравствуйте! На прошлом уроке мы разбирались как задать стили для абзацев Скопируйте код для блога: <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/uchimsya-rabotat-v-kompyuternyih-programmah/12947100/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;"> Стили для списков </a> <div class="insert-intro" style="font-family:trebuchet MS;">Здравствуйте! На прошлом уроке мы разбирались как задать стили для абзацев </div> </div> Стили для списков <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/uchimsya-rabotat-v-kompyuternyih-programmah/12947100/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;">Стили для списков</a> <div style="font-family:trebuchet MS;">Здравствуйте! На прошлом уроке мы разбирались как задать стили для абзацев </div> </div>

webguru

04.12.2016

В избранное Пожаловаться Просмотров: 447

Следить

Комментарии ⁰

Учимся работать в компьютерных программах 1086

Последние откомментированные темы:

Стили для списков

Комментарии временно отключены

Открытая группа
54215 участников