Приветствую вас на своем блоге. Сегодня я хотел бы затронуть тему, как через css у маркированных пунктов списка (ul li) убрать маркеры, потому что они зачастую не нужны и только мешают оформлять сайт.
Убираем маркеры по умолчанию
Иногда нужно просто убрать их. Например, при оформлении меню или чего-то другого. За отображение маркеров отвечает свойство list-style-type или сокращенное list-style . Значением по умолчанию выступает circle , то есть черный закрашенный кружочек. Чтобы убрать его, всего лишь нужно написать так:
Ul{
List-style-type: none;
}
Ul{
List-style: none;
}
Заметьте, что свойство записывается всему списку в общем, а не отдельным его пунктам. Это очень важно. Вышеприведенная запись убирает маркеры у всех списков на вашем сайте, но может быть так, что у вас будет несколько оформлений списков.
В таком случае справиться с их стилизацией помогут классы. Нужным спискам просто вешаете стилевой класс и оформляете их.
Как поставить свою картинку маркера
Css позволяет создать свой, гораздо более привлекательный маркер. Его можно задать также с помощью свойства list-style-image , либо упрощенно с помощью list-style . В значении в скобках прописывается путь к файлу, а перед ним нужно поставить ключевое слово url .
Ul{
List-style: url(marker.png);
}
CSS-списки
— набор свойств, отвечающих за оформление списков. Использование HTML-списков очень распространено при создании панелей навигации по сайту. Элементы списка представляют набор блочных элементов.
С помощью стандартных CSS-свойств можно изменить внешний вид маркера списка
, добавить изображение для маркера
, а также изменить местоположение маркера
. Высоту блока маркера можно задать свойством line-height .
Оформление списков с помощью CSS-стилей
1. Тип маркера списка list-style-type
Свойство изменяет типа маркера или удаляет маркер
для маркированного и нумерованного списков. Наследуется.
list-style-type
|
---|
Значения:
|
|
disc
|
Значение по умолчанию. В качестве маркера элементов списка выступает закрашенный кружок.
|
armenian
|
Традиционная армянская нумерация.
|
circle
|
В качестве маркера выступает незакрашенный кружок.
|
cjk-ideographic
|
Идеографическая нумерация.
|
decimal
|
1, 2, 3, 4, 5, …
|
decimal-leading-zero
|
01, 02, 03, 04, 05, …
|
georgian
|
Традиционная грузинская нумерация.
|
hebrew
|
Традиционная еврейская нумерация.
|
hiragana
|
Японская нумерация: a, i, u, e, o, …
|
hiragana-iroha
|
Японская нумерация: i, ro, ha, ni, ho, …
|
katakana
|
Японская нумерация: A, I, U, E, O, …
|
katakana-iroha
|
Японская нумерация: I, RO, HA, NI, HO, …
|
lower-alpha
|
a, b, c, d, e, …
|
lower-greek
|
Строчные символы греческого алфавита.
|
lower-latin
|
a, b, c, d, e, …
|
lower-roman
|
i, ii, iii, iv, v, …
|
none
|
Маркер отсутствует.
|
square
|
В качестве маркера выступает закрашенный или незакрашенный квадрат.
|
upper-alpha
|
A, B, C, D, E, …
|
upper-latin
|
A, B, C, D, E, …
|
upper-roman
|
I, II, III, IV, V, …
|
initial
|
Устанавливает значение свойства в значение по умолчанию.
|
inherit
|
Наследует значение свойства от родительского элемента.
|
Синтаксис
Ul {list-style-type: none;}
ul {list-style-type: square;}
ol {list-style-type: none;}
ol {list-style-type: lower-alpha;}
Рис. 1. Пример оформления маркированного и нумерованного списков
2. Изображения для элементов списка list-style-image
В качестве маркера элементов списка можно использовать изображения и градиентые заливки. Наследуется.
Синтаксис
Ul {list-style-image: url("images/romb.png");}
ul {list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);}
Рис. 2. Оформление маркированного списка с помощью изображения
Рис. 3. Оформление маркированного списка с помощью градиента
3. Местоположение маркера списка list-style-position
Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка. Наследуется.
Существует возможность установки внешнего вида маркера элементов списка. В том числе, можно вообще убрать
маркер списка CSS. Для этого есть свойство
list-style-type
. У него достаточно много значений. Часть значений применяется для
маркированного, другая часть для нумерованного списка.
Для маркированного списка:
list-style-type: disc
- в виде диска (по умолчанию)
list-style-type: circle
- в виде круга
list-style-type: square
- в виде квадрата
Для нумерованного списка
list-style-type: decimal
- арабские цифры (по умолчанию)
list-style-type: decimal-leading-zero
- арабские цифры c 0 впереди для чисел 1-9
list-style-type: upper-roman
- заглавные римские цифры
list-style-type: lower-roman
- строчные римские цифры
list-style-type: upper-latin
- заглавные латинские буквы
list-style-type: upper-alpha
- то же, что и upper-latin
list-style-type: lower-latin
- строчные латинские буквы
list-style-type: lower-alpha
- то же, что и lower-latin
list-style-type: lower-greek
- строчные греческие буквы
list-style-type: armenian
- армянские числа
list-style-type: georgean
- грузинские числа
list-style-type: none
- позволяет убрать маркеры списка. Для обоих списков
list-style-type: inherit
- значение принимается от родительского элемента.
Для обоих списков
Создадим на странице маркированный и нумерованный списки и установим для них тип маркера:
Стиль:
1 2 3 4 5 6
|
Страница
- Сепульки
- Сепулькарии
- Сепуление
В примере показано создание маркированного списка, где в качестве значка маркера используется небольшой однотонный квадрат. Хотя количество значений ограничено тремя, это не значит, что в нашем распоряжении всего три вида маркера. Существует множество спецсимволов, которые с успехом могут выступать в качестве значка маркера. «Прикрутить» их непосредственно к
не получится, поэтому придётся действовать в обход. Для этого прячем маркеры списка с помощью свойства list-style
со значением none
и в тексте перед содержимым
добавляем свой собственный символ с помощью псевдоэлемента ::before
. В примере 2 в качестве такого маркера выступает треугольник.Пример 2. Использование::before
Списки
- Сепульки
- Сепулькарии
- Сепуление
Результат данного примера показан на рис. 2. Поскольку использование свойства list-style
со значением none
не убирает маркеры совсем, а только скрывает их от просмотра, то список получается смещённым вправо. Чтобы избавиться от этой особенности, в примере добавляется свойство text-indent
с отрицательным значением. Его задача - переместить текст левее на один символ. Рис. 2. Произвольные маркеры в списке Символ не обязательно должен быть в шестнадцатеричном формате, его можно вставить и непосредственно в текст. Главное, сохранить документ в кодировке UTF-8 и чтобы редактор её поддерживал. Сами символы и их коды можно взять, например, из LibreOffice Writer (рис. 3). Рис. 3. Выбор символа в LibreOffice Список с рисованными маркерамиСтили позволяют установить в качестве маркера любое подходящее изображение через свойство list-style-image
. В качестве значения используется относительный или абсолютный путь к графическому файлу, как показано в примере 3. Пример 3. Использование изображения в качестве маркера
Списки
- Сепульки
- Сепулькарии
- Сепуление
Рисунок лучше всего выбирать небольшого размера, чтобы не превращать элементы списка в подрисуночные подписи. На рис. 4 показан результат действия примера по использованию в качестве маркеров небольших картинок. Рис. 4. Рисунок в качестве маркера Применение list-style-image
обладает некоторыми недостатками: - рисунок нельзя сдвинуть вверх или вниз;
- в разных браузерах положение рисунка относительно текста может отличаться.
Этих недочётов можно избежать с помощью свойства background
, оно устанавливает фоновое изображение. Для каждого элемента списка
мы убираем исходные маркеры и устанавливаем фоновую картинку без повторения. А чтобы текст не выводился поверх рисунка, смещаем его вправо через padding-left
(пример 4).Пример 4. Использование background Ul {
margin-left: -1em;
}
li {
list-style: none;
background: url(images/bullet.png) no-repeat 0 2px;
padding-left: 20px;
}
Положение текста и маркераСуществует два способа размещения маркера относительно текста: маркер выносится за границу элементов списка или обтекается текстом (рис. 5).
|
|
inside
| outside
|
Рис. 5. Размещение маркеров относительно текста Чтобы управлять положением маркеров, применяется свойство list-style-position
. Оно имеет два значения: outside
- маркеры размещаются за пределами текстового блока (это значение по умолчанию) и inside
- маркеры являются частью текстового блока и отображаются в элементе списка (пример 5). Пример 5. Изменение положения маркеров
Списки
- Перед началом работы проверьте наличие оборудования, входящего
в комплект 3BM.
- При отсутствии одного или нескольких периферийных устройств
следует сразу же обратиться к техническому персоналу ВЦ.
- После осмотра визуальными методами своего рабочего места можно
осторожно включить питание 3BM.
Результат данного примера показан на рис. 6.
Допустим у нас имеется нумерованный список OL (.our-list) такого вида:
- Пункт 1
- Пункт 2
- Пункт 3
А нам необходимо, чтобы номера строк были без точек. Тогда нам необходимо прописать в css-коде следующие правила:
.our-list
{
counter-reset
:
item;
//item - переменная,
которая будет содержать значение счетчика
list-style-type
:
none
;
// убираем нумерование списка
width
:
150px
;
//необходимо задать ширину,
чтобы отталкиваться от этого значения
}
.our-list
li:
before
{
content
:
counter(item)
"
";
//заново вставляем счетчик пунктов уже другим способом и без точки
counter-increment
:
item;
//увеличиваем значение счетчика
color
:
#ff0000
;
//можем задать другой цвет цифрам
}
|
Our-list {
counter-reset: item; //item - переменная, которая будет содержать значение счетчика
list-style-type: none; // убираем нумерование списка
width: 150px; //необходимо задать ширину, чтобы отталкиваться от этого значения
}
.our-list li:before {
content: counter(item) ""; //заново вставляем счетчик пунктов уже другим способом и без точки
counter-increment: item; //увеличиваем значение счетчика
color: #ff0000; //можем задать другой цвет цифрам
}
В результате мы можем наблюдать следующее:
- Пункт 1
- Пункт 2
- Пункт 3
Казалось бы, проблема решена. Но пока это хорошо работает только для однострочных пунктов. Если мы добавим строк к каждому пункту списка, то увидим, что пока еще все не так хорошо… Вот что получится:
- Пункт 1
Строка 2
Строка 3
- Пункт 2
Строка 2
Строка 3
- Пункт 3
Строка 2
Строка 3
Я думаю, это не совсем то, что требуется. Получается, что в данном случае номер принадлежит первой строке пункта списка. Чтобы решить этот вопрос окончательно, стоит добавить еще 3 строки в css-код
Our-list {
counter-reset: item;
list-style-type: none;
width: 150px;
}
.our-list li:before {
content: counter(item) "";
counter-increment: item;
color: #ff0000;
float:right; //делаем обтекание справа
position:relative; //и перемещаем цифры влево, чтобы они встали перед списком
left:-165px;
}
Еще статьи из этой рубрики
|