Как делать маркеры в HTML

Использование маркеров помогает разбивать большие куски текста и выделять списки полезной информации. Маркеры легко создавать в текстовом редакторе, но когда вы печатаете HTML-документ, вам нужно знать код для их создания. Для создания маркированного списка требуется не так много кода. Оберните каждый список в

, а затем оберните весь список тегами

или «неупорядоченный список». Затем вы можете делать со списком маркеров все, что захотите, используя код каскадной таблицы стилей.

Шаг 1

Напишите текст для ваших пунктов списка. Начинайте каждую точку с отдельной строки. Оберните каждую строку в

и

такие теги:

Это маркированный пункт

Это еще один пункт.

Шаг 2

Создайте пустую строку над маркированным списком и введите ввод

Тег

в этой строке. Найдите конец маркированного списка и создайте там еще одну пустую строку. Введите закрывающий

тег в этой строке. Если вы хотите позже оформить список с помощью CSS, добавьте атрибут class или ID в открывающий тег

. Вот пример короткого маркированного списка с атрибутом ID:

• Первый маркер
• Второй маркер

Шаг 3

Используйте «стиль», чтобы создать свой маркированный список с помощью кода CSS. Добавьте код CSS между

теги между <голова> и теги, или вы можете написать код CSS во внешнем файле .CSS и встроить файл, используя такой тег:. Измените «path/to/stylesheet.css» на путь к созданному вами файлу .CSS. Используйте атрибут ID или class для выбора маркированных списков, например:

#mylist li {стиль шрифта:курсив;

Приведенный выше код выбирает все

Теги

внутри тега с идентификатором «mylist». Замените решетку точкой при выборе по атрибуту класса.

Шаг 4

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

#mylist li {стиль списка:квадрат;

Совет

Используйте

Тег

вместо
для создания упорядоченных списков. Затем вы можете установить тип «стиль списка» для различных типов цифр или букв.

Создайте маркеры изображений, указав «нет» для атрибута «стиль списка», а затем укажите каждый

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