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

Здрастуй, шановний читачу.

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

Перед вивченням даного уроку пройдіть попередні уроки:

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

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

В html ми вивчали списки,. У CSS існує кілька властивостей для роботи зі списками. Але в CSS властивостей більше і можливостей більше, ніж в html.

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

Приклад html коду:

1234567891011121314151617181920212223

lt;htmlgt;lt;headgt;lt;titlegt; Головнаlt;/titlegt;lt;meta http-equiv="Content-Type" content="Text / html- charset = utf-8"gt;lt;link rel="Stylesheet" type="Text / css" href="Style.css"gt;lt;/headgt;lt;bodygt;lt;pgt; Фруктиlt;/pgt;lt;ul class="Fruits"gt;lt;ligt; Бананlt;/ligt;lt;ligt; Яблукоlt;/ligt;lt;ligt; Апельсинlt;/ligt;lt;ligt; Грушаlt;/ligt;lt;/ulgt;lt;pgt; Фруктиlt;/pgt;lt;ul class="Fruits_o"gt;lt;ligt; Бананlt;/ligt;lt;ligt; Яблукоlt;/ligt;lt;ligt; Апельсинlt;/ligt;lt;ligt; Грушаlt;/ligt;lt;/ulgt;lt;/bodygt;lt;/htmlgt;

Відео: Урок 8: Динамічні списки

Приклад CSS коду:

123456789

.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 код:

123456789

.fruits{list-style-image:url(`Hand_point.jpg`)-list-style-position:outside-}.fruits_o{list-style-image:url(`Hand_point.jpg`)-list-style-position:inside-}

Як це виглядає в браузері:

Подивитися прімерСкачать

Але так як і в минулому уроці даний запис можна скоротити.

Відео: Уроки HTML і CSS (відео Уроки)

Сьогодні ми розглянули як оформити список, як додати зображення замість звичайного значка, а також як написати скорочену форму. Щоб краще запам`ятати матеріал пробуйте все написати руками.

Більше практикуйтеся!