Урок 8. Оформление списков

Здравствуй, уважаемый читатель.

Это восьмой урок изучения CSS. В этом уроке мы рассмотрим как задать стиль спискам и как вставить картинку вместо значка списка.

Перед изучением данного урока пройдите предыдущие уроки:

Урок 1. Что такое CSS?
Урок 2. Базовые селекторы
Урок 3. Групповые селекторы и селекторы потомков
Урок 4. Псевдоселекторы ссылок
Урок 5. Шрифты
Урок 6. Оформление текста
Урок 7. Рамки

Теория и практика

В html мы изучали списки <ul>, <li>. В CSS существует несколько свойств для работы со списками. Но в CSS свойств больше и возможностей больше, чем в html.

list-style-type, list-style-position, list-style-image

Пример html кода:

<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>Фрукты</p>
    <ul class="fruits">
        <li>Банан</li>
        <li>Яблоко</li>
        <li>Апельсин</li>
        <li>Груша</li>
    </ul>
    <p>Фрукты</p>
    <ul class="fruits_o">
        <li>Банан</li>
        <li>Яблоко</li>
        <li>Апельсин</li>
        <li>Груша</li>
    </ul>
</body>
</html>

Пример CSS кода:

.fruits{
    list-style-type:upper-roman;
    list-style-position:outside;
}
 
.fruits_o{
    list-style-type:upper-roman;
    list-style-position:inside;
}

Как это выглядит в браузере:

Также вместо обычных значков можно вставить изображение. Делается это с помощью свойства list-style-image.

Изменим наш CSS код:

.fruits{
    list-style-image:url('hand_point.png');
    list-style-position:outside;
}
 
.fruits_o{
    list-style-image:url('hand_point.png');
    list-style-position:inside;
}

Как это выглядит в браузере:

Посмотреть пример Скачать

Но так как и в прошлом уроке данную запись можно сократить.

Сегодня мы рассмотрели как оформить список, как добавить изображение вместо обычного значка, а также как написать сокращенную форму. Чтобы лучше запомнить материал пробуйте всё написать руками.