Дата и время публикации:
Установка пользовательского маркера
1. Что такое маркированный список?
Как показано в таблице 1.1, в документе HTML данный тип списка является ненумерованным, так как в нем каждый элемент списка помечен не цифрой, а маркером. По умолчанию, это небольшой кружок, похожий на бублик (circle).
| Код разметки HTML | Реализация |
|---|---|
<p>В нашем ассортименте :</p> <ul> <li>Мягкий Хлеб,</li> <li>Свежее Молоко,</li> <li>Вкусные плюшки,</li> <li>Мед и Варенье</li> </ul> |
В нашем ассортименте :
|
Ненумерованный список объявляется тэгом <ul>, а каждый элемент списка через тег <li>;
2. Способы задания маркеров
2.1 Простой способ
Как показано в таблице 2.1.1, путем использования свойства СSS list-style-type, с помощью которого можно задать два дополнительных маркера в виде диска (disk), квадрата (square) или отменить совсем (none), что и будем делать далее в п.2.3 "Как в офисном редакторе документов".
| Код разметки HTML | Реализация |
|---|---|
<p>Учащиееся общеобразовательных школ делятся на</p> <ul style="list-style-type:disc"> <li>отличников,</li> <li>хорошистов,</li> <li>троечников и двоечников.</li> </ul> <p>В жизни,первые две категории составляют:</p> <ul style="list-style-type:square"> <li>Мелких и среднего звена начальников</li> <li>Ученых-теоретиков</li> <li>Прочую нечисть</li> </ul> |
Учащиееся общеобразовательных школ делятся на:
В жизни, первые две категории составляют:
|
2.2 Путем замены на картинку(иконку)
Данный способ позволяет отдельно маркировать каждый элемент списка своим собственным маркером, как показано в таблице 2.2.2
| Код разметки HTML | Реализация |
|---|---|
|
Определяем два квалификатора класса .folder_icon и .article_icon для тега </li>, так же как и для тега </ul> изменяем некоторые свойства СSS.
<style>
ul{
line-height: 1.5em; /* Устанавливаем межстрочный полуторный интервал */
font-size: 1.2em; /* Размер шрифта */
vertical-align: middle;/* выравнивание понизу + семейство шрифтов */
font-family: Georgia, 'Times New Roman', Times, serif;
}
li.folder_icon{
list-style-image: url(https://rjaan.narod.ru/icons/folder.gif);
margin: 10px;
}
li.article_icon{
list-style-image: url(https://rjaan.narod.ru/icons/article.gif);
margin: 10px;
}
</style>
Затем, непосредственно и сам маркированный список <pre style="font-size: 0.8em"> <p class="as_section_ul" style="font-weight:bold;font-size:1.6em">Содержание</p> <ul> <li class="folder_icon"> <a href="#">Раздел I. "Администрирование"</a></li> <li class="folder_icon"> <a href="#">Раздел II. "Программирование"</a></li> <li class="folder_icon"> <a href="#">Раздел III."WEB разработка"</a></li> <li class="article_icon"><a href="#">Алфавитный указатель</a></li> <li class="article_icon"><a href="#">Библиография</a></li> </ul> |
Содержание |
Для замены маркера на иконку 
или 
используется свойство СSS list-style-image, которое замещает на изображение установленный маркер свойством СSS list-style-type.
2.3 Как в офисном редакторе документов
Для того, чтобы маркированный список привести к виду, как в офисе, когда маркер вынесен вперед перед блоком текста для повышения читабельности элементов списка, необходимо выполнить следующее:
- использовать псевдоэлемент :before и свойства СSS content для установки собственного маркера, как показано в таблице 2.3.1 на примере установки в качестве маркера символа тире (—)
- выделение блока текста и смещение его относительно установленного маркера с использованием тега span свойств СSS display, padding-left и margin-top.
Что и показано в таблице 2.3.1 .
| Код разметки HTML | Реализация |
|---|---|
<p>Как показывает практика двоечники и троечники имеют больше шансов на успех из-за <ul class="dashmrk"> <li> <span class="span_bullet">нерастраченной энергии в ходе учебного процесса, </span> </li> <li> <span class="span_bullet">постоянных нарушений принятых правил, </span> </li> <li> <span class="span_bullet">привитых навыков решать проблемы в авральном режиме </span> </li> </ul> <p>Чем Вам не портрет антикризисного менеджера?!</p> |
Как показывает практика двоечники и троечники имеют больше шансов на успех из-за
|
- Помните, что связка псевдоэлемента :before и свойства СSS content не поддерживается в MSIE, начиная с 7-мой версии и ниже.
- Для связки установленного маркера с текстом, последний предствляется как блок, что не минуемо приводит к переносу строки не только в конце, но и в начале содержимого блока, что компенсируется свойством СSS margin-top, обеспечивающее смещение на 1.25 строки вверх при заданных свойствах СSS font-size и line-height, имеющих одно и тоже значение 1.0em в li:before для ul.dashmrk, как показано в листинге 2.3.1.1
...
span.span_bullet{
display: block;
vertical-align: middle;
padding-left: 1.8em;
margin-top: -1.25em;
}
...
3. Библиография
1) W3CSchool. Unordered HTML List
2) W3C. CSS property list-style-type
3) W3C. CSS property list-style-image