CSS для создания привлекательных списков

• May 8, 2024

Списки являются отличным элементом веб-дизайна, поскольку они позволяют легко читать конечному пользователю. Большинство пользователей хотят быстро получить ответы, и сначала они только просматривают сайт, чтобы узнать, отвечает ли он на их вопрос. Это особенно верно, если они заходят на ваш сайт через поисковик.

Использование тегов заголовков и списков - это отличный способ, позволяющий людям легко увидеть основной контент вашего сайта. Если они считают списки и подзаголовки интересными, существует большая вероятность, что они останутся на вашем сайте. Это, конечно, приводит к снижению показателя отказов и помогает повысить авторитет вашего сайта и рейтинг в поисковых системах. Все, что улучшает читабельность, облегчает зрение глаз, всегда будет полезно для сайта. Отличный дизайн всегда учитывает читабельность.

CSS - это простой и очень эффективный способ создания стильных списков с помощью пользовательских маркеров (маркеров). Вы можете включить различные формы или простую пользовательскую графику, которые связаны с логотипом, цветами или темой вашего сайта. Например, на веб-сайте «Призрачные туры» я создал небольшую призрачную иконку, которая использовалась на боковой панели навигации и в неупорядоченных элементах списка на главной странице. Это было просто, но очень мило и связано с темой сайтов, выделяя элементы страницы.

В других случаях маркеры могут отвлекать от важного содержимого в списке. В этом случае свойство стиля списка «none» можно использовать для удаления автоматически сгенерированных маркеров.

Свойства стиля списка

Используйте свойство list-style-type, чтобы выбрать тип маркера, который появляется с каждым элементом списка. Доступны следующие значения: диск, круг, квадрат, десятичное число, нижнеримский, верхнеримский, нижнегреческий, нижнелатинский, верхнелатинский, нижний альфа, верхний альфа и ничего.

Чтобы указать собственное изображение в качестве маркера, используйте свойство list-style-image следующим образом:

ul {list-style-image: url (imagename.jpg);
list-style-position: снаружи;
}

URL относится к таблице стилей и должен указывать на папку, где находится ваше изображение. В этом случае изображение будет находиться в той же папке, что и файлы css и html. Если вы поместите ваши изображения в отдельную папку, вы также включите это: url (images / imagename.jpg)

Позиции маркеров

Вы также можете настроить положение маркеров. В приведенном выше примере свойство outside заставляет маркер появляться вне области содержимого.
list-style-position: inside позволяет использовать маркер внутри области содержимого, чтобы он попадал в содержимое списка.

Техника стенографии

Другой быстрый способ форматирования списка с использованием CSS - это сокращенная техника. При использовании этого метода все свойства списка указываются в одном свойстве:

уль
{
Стиль списка: круг URL ("image.gif");
}

в сокращенном методе все значения должны отображаться в указанном порядке следующим образом:

Список стиле типа
list-style-position (внутри, снаружи)
список-стиль-изображение

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

Пользовательские списки очень полезны, а CSS делает их легко достижимыми. Простые детали превращают обычные веб-сайты в высокопроизводительные.

Видео инструкция: CSS стилизация списков (May 2024).