У цьому розділі:
Можливості властивостей CSS для стилізації списків
- Зміна виду стандартного маркера для нумерованих списків
- Установка типу маркера для маркованих списків
- Установка зображення замість маркера для елементів списку
За допомогою HTML-тегів можна створити два типи списків, які мають маркери: нумеровані і маркіровані. За замовчуванням більшість браузерів відображає маркери маркованих списків у вигляді кола, а маркери нумерованих у вигляді чисел, що йдуть по порядку. CSS надає можливість зміни зовнішнього вигляду стандартних маркерів. Далі будуть продемонстровані приклади з різними видами маркерів, за допомогою яких, ви зможете змінити зовнішній вигляд своїх списків.
Зміна та видалення маркерів
Для зміни стандартного зовнішнього вигляду маркера в CSS використовується властивість list-style-type. в якості значення задається той вид маркера, на який ви хочете замінити стандартний.
Приклад, що демонструє деякі види маркерів для нумерованих списків:
- Натисніть на значення властивості list-style-type
- Спостерігайте за зміною маркерів
- Використовуйте для своїх списків найбільш підходящі маркери
ol # myList list-style-type: decimal;
>
Натисніть на будь-яке значення властивості, щоб побачити результат
Для маркованих списків існує всього три види маркерів, які можна задати за допомогою значень circle, disk і squred:
За допомогою значення none можна видалити маркери у пунктів в списку, але відступ зліва при цьому все одно залишиться:
Заміна маркерів картинками
Якщо вам не підходить жоден із запропонованих за замовчуванням маркерів, то CSS надає можливість замінити їх будь-картинкою, в цьому вам допоможе властивість list-style-image. в значенні якого потрібно прописати шлях до обраного зображенню.
Візьміть до уваги той факт, що зображення не буде автоматично масштабуватися під список і буде відображено власним розміром, тому доведеться підбирати зображення підходяще за розміром або редагувати існуюче, зменшивши або збільшивши його до потрібного:
відступ списку
При видаленні маркерів у пунктів списку можна також видалити або зменшити розмір лівого відступу, встановлюваний браузером за замовчуванням. Для повного видалення відступу потрібно буде скористатися властивістю padding-left. яке дозволяє регулювати внутрішній відступ:
У прикладі ми повністю прибрали відступ з лівого боку, тому пункти списку тепер впритул прилягають до краю вікна браузера. І як видно з прикладу маркований список матиме такий самий вигляд, як і було задумано, але в нумерованому списку зникли маркери. Причина криється в самих маркерах - за замовчуванням маркери не є частиною вмісту пунктів списку, тому якщо прибрати відступ зліва вони не зрушуються разом з вмістом елементів
Властивість list-style-position вказує, чи повинен маркер розташовуватися всередині або зовні пунктів списку. Дана властивість може приймати два значення:
- outside - маркер розташовується зліва від вмісту (є значенням за замовчуванням)
- inside - маркер розташовується всередині пункту списку разом з вмістом
Тепер можна переписати попередній приклад так, щоб відступ з лівого боку був прибраний, але маркери при цьому не виїжджали за край браузера:
У прикладі до кожного пункту списку була додана рамка, щоб візуально показати кордону пунктів списку.