CSS для списков: свойство list-style и его производные. Примеры стильного оформление ul li списков CSS Элементы списка css
Читайте также
Мы с Вами уже знакомились с таким немаловажным элементом как список и действительно хорошее средство для структуризации данных. Однако списки организованные одними средствами HTML весьма убоги в плане дизайна и не радуют глаз человека.
В этой главе мы немного поколдуем над списками с помощью свойств CSS. Так мы будем говорить о стиле списка, то для обучения Вам понадобится базовая информация о тегах:
- изложенная в учебнике HTML глава 9 - рекомендую освежить в голове информацию о данных элементах, прежде чем приступать к работе.
Ну а если в голове и так свежо тогда начнем!
Вид маркера в списке.
Если Вы помните, то в чистом HTML вид маркера в списке определял атрибут type и одно из его возможных значений, в CSS данную задачу берёт на себя свойство: list-style-type которое, в свою очередь, тоже имеет свои стандартные значения определяющие вид маркера как всего списка сразу, так и его отдельного "пункта".
Значения list-style-type:
- disc
- Диск. (по умолчанию для
- circle - Полый круг.
- square - Квадрат.
- decimal
- Арабские цифры. (по умолчанию для
- lower-roman - Строчные римские цифры.
- lower-alpha - Строчные буквы.
- upper-roman - Заглавные римские цифры.
- upper-alpha - Заглавные буквы.
- none - Маркер отсутствует.
- Пункт 1.
- Пункт 2.
- Пункт 3 (особенный).
- Пункт 1.
- Пункт 2.
- Пункт 3.
Пользовательский маркер рисунок.
Наиболее интересным CSS инструментом для работы со стилем списка является, на мой взгляд, возможность вместо стандартных "скучных" маркеров описанных выше использовать свои собственные нестандартные изображения - небольшие рисунки, вписывающиеся в общий дизайн Вашего сайта.
Эту задачу выполняет свойство list-style-image которое определяет в качестве маркера списка некое графическое изображение с указанием пути к нему.
Значений данного свойства всего два:
- none - Отменяет графическое изображение маркера.
- url - Путь к файлу с рисунком маркера.
Путь к рисунку после url указывается в круглых скобках.
Такая запись будет говорить о том, что рядом с документом есть папка graphics в которой лежит файлик-рисунок: " " - под названьем marker.gif
Теперь попрубуем сделать так, что бы каждый пункт нашего списока был промаркерован этим рисунком. Смотрим пример:
- Первый любимый пункт.
- Второй любимый пункт.
- И не менее любимый третий пункт.
Стиль обтекания маркера списком.
Свойство list-style-position указывает браузеру на то, как следует отображать текст в списке относительно его маркеров. По умолчанию маркеры находятся в стороне от текста списка, но можно сделать так, что они будут обтекаться текстом.
Возможных значений свойства list-style-position всего два:
- outside - Маркер находится в стороне от списка.(по умолчанию)
- inside - Маркер обтекается текстом.
Пример для наглядности:
Здесь маркер обтекается текстом:
А здесь нет:
- Пункт, в котором говорится о том, что хорошо бы было сделать, что-то там, где это что-то еще не сделано.
- Пункт, в котором говорится о том, что неплохо бы было сделать, нечто там, где это нечто еще не сделано.
list-style
Базовое свойство list-style используется, когда стилю списка необходимо одновременно присвоить несколько значений. Может иметь от одного до трёх значений из свойств применяемых к стилю списка, в любой последовательности через пробел.
Все три свойства и их возможные значения мы рассмотрели выше, поэтому повторятся не буду, а просто выложу внутри страничную навигацию:
Если в голове остались какие то пробелы можете вернуться и перечитать.
- - Этот список использует в качестве маркера рисунок.
- - Текст этого списка обтекает маркер.
Списки наряду с заголовками, выделенным текстом и картинками, являются элементами, которые приковывают взгляд посетителя при беглом просмотре страницы. Умелое и ненавязчивое размещение таковых элементов залог того, что посетитель окунётся в чтение Вашего документа более глубоко.
Так как списки являются великолепным инструментом для структуризации данных, а свойства CSS позволяют создать практически любой их дизайн, используйте списки, помимо их основного назначения, в качестве "меню" - навигации по сайту, где каждый пункт является ссылкой на ту или иную страницу Вашего сайта.
Свойство list-style-type устанавливает вид маркера. Вот таблица допустимых значений для этого свойства:
| Значение | Пример |
|---|---|
| disc |
|
| circle |
|
| square |
|
| decimal |
|
| decimal-leading-zero |
|
| lower-roman |
|
| upper-roman |
|
| lower-alpha |
|
| upper-alpha |
|
| georgian |
|
| cjk-ideographic |
|
| none |
|
В таблице я указал два весьма необычных свойства: georgian и cjk-ideographic . Эти свойства используются регионально. Есть ещё несколько похожих любопытных значений этого свойства, например armenian или hiragana , но все их перечислять нет смысла.
Теперь пример использования этого свойства:
- Первый пункт.
- Второй пункт.
- Третий пункт.
Обратите внимание, мы превратили нумерованный список
-
в маркированный.
- Первый пункт.
- Второй пункт.
- Третий пункт.
-
, обрамлённого красной границей. Это может привести к неожиданным результатам, вот например обнулим внутренние отступы
-
.
- Первый пункт.
- Второй пункт.
- Третий пункт.
-
. Это бы решило данную проблему. Вот для этого и существует свойство list-style-position
.
Свойство list-style-position устанавливает положение маркера относительно блока
-
. Это свойство имеет два значения:
По умолчания используется значение outside .
Применим это свойство к нашему примеру и поместим маркеры в блок
-
, установив этому свойству значение inside
.
Свойство list-style-position. - Первый пункт.
- Второй пункт.
- Третий пункт.
Вот что мы получили:
Рисунок 5. Свойство list-style-position.
Теперь маркеры списка вложены в блок
-
.
Свойство list-style
Свойство list-style является сокращённой формой, позволяющей использовать значения всех трёх предыдущих свойств.
Пример: сделаем картинку маркером и поместим маркер внутрь блока пункта списка.
Свойство list-style. - Первый пункт.
- Второй пункт.
- Третий пункт.
Вот результат:
Рисунок 6. Свойство list-style.
Мы в одном свойстве list-style указали два значения: положение маркера и путь графичекого файла маркера.
Свойство list-style используют чаще всего, даже для задания одного значения. Оно короткое, его легко написать.
Рецепты CSS по теме
- Как сделать ниспадающее меню на CSS , сложный пример с тенями.
Маркированный список определяется тем, что перед каждым элементом списка добавляется небольшой маркер, обычно в виде закрашенного кружка. Сам список формируется с помощью контейнера
-
, а каждый пункт списка начинается с тега
-
, как показано ниже.
- Первый пункт
- Второй пункт
- Третий пункт
В списке непременно должен присутствовать закрывающий тег
хотя и не обязателен, но советуем всегда его добавлять, чтобы четко разделять элементы списка.
- Чебурашка
- Крокодил Гена
- Шапокляк
- Крыса Лариса
- Первый
- Второй
- Третий
- Первый
- Второй
- Третий
- Первый
- Второй
- Третий
- изменение религиозной веры (на выбор: буддизм, конфуцианство, индуизм). Специальное предложение - иудаизм и мусульманство вместе;
- изменение веры в непогрешимость любимой партии;
- убеждение в том, что инопланетяне существуют;
- предпочтение политического строя, как самого лучшего в своем роде (на выбор: феодализм, социализм, коммунизм, капитализм).
- в том месте, где встречается
-
, браузер автоматически добавляет перенос строки;
- у списка имеются отступы сверху и снизу;
- маркеры по умолчанию отображаются в виде закрашенного кружка;
- каждый элемент списка сдвигается вправо по отношению к основному тексту.
- disc - маркеры в виде закрашенного кружка;
- circle - маркеры в виде незакрашенного кружка;
- square - квадратные маркеры.
- Сепульки
- Сепулькарии
- Сепуление
- не получится, поэтому придётся действовать в обход. Для этого прячем маркеры списка с помощью свойства 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. Размещение маркеров относительно текста
Если решили изменить стандартные списки ul и li, то это тема вам будет интересно. Так как здесь узнаете несколько оригинальных решений. Которые вам безусловно помогут изменить стандартный вид на уникальный, где идет стилистика CSS, для оформления списков. Плюс в том, что мы будем использовать во всем, только один класс, который кардинально изменит вид. В дополнение к этим параметрам вы можете указать, на каком номере должен начинаться список, здесь все можно сделать самостоятельно. Начальное значение по умолчанию для пронумерованных списков находится на первом или буква A.Исходя из основ, мы теперь более подробно рассмотрим элементы, используемые для обеспечения структуры и значения для различных частей дизайн. Если кто не знает, то ul и li, это гораздо лучший вариант, чем простой текстовый текст, потому что, когда текст обертывается, особенно в мобильном телефоне, он отлично отступы и не обтекает маркер.
Считается, что списки, это отличный способ изложения информации на страницах, потому что они просты для чтения и выглядят хорошо. Многие люди, похоже, думают, что точки пули, это маленькие изображения, но на самом деле все они созданы через довольно простой HTML код. Вы можете вставлять разные типы списков друг в друга, если хотите, просто не забудьте закрыть их правильно. Вы можете играть с текстом, который вы хотите, во всех этих командах списка.
Также нужно знать, что списки изначально содержат несколько элементов:
1 . Неупорядоченная информация.
2 . Упорядоченная информация.
3 . Определения.Приступаем к установке:
1. Вариант:
- Элемент списка
- Уникальный список
- Оригинальные списки
- ZORNET.RU - Вебмастеру
- Еще один список
CSSKsangelopan {
margin: 19px 0 0;
padding:0;
list-style: none;
counter-reset: li;
}
.ksangelopan li {
border: 2px solid #3575ad;
background: #d7dee4;
position: relative;
margin-bottom: 17px;
padding: 15px 9px;
}
.ksangelopan li:hover {
z-index: 1;
}
.ksangelopan li:before {
border: 2px solid #2270b3;
position: absolute;
top: -14px;
padding: 3px 9px;
font-size: 11px;
font-weight: bold;
color: #246eaf;
background: #f2f4f7;
counter-increment: li;
content: counter(li);
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.ksangelopan li:hover:before {
background: #2672b3;
color: #f7f9fb;
-webkit-transform: translate(-11px, 0);
-ms-transform: translate(-11px, 0);
-o-transform: translate(-11px, 0);
transform: translate(-11px, 0);
}
.ksangelopan li:after {
content: "";
position: absolute;
transition-duration: 0.3s;
-webkit-transition-property: width;
transition-property: width;
z-index: -1;
background: #FFF;
height: 100%;
left: 0;
top: 0;
width: 0;
}
.ksangelopan li:hover:after {
width: 100%;
}
На этом вся установка.2 Второй вариант:
- Элемент списка
- Уникальный список
- Оригинальные списки
- ZORNET.RU - Вебмастеру
- Еще один список
CSSBeleduzlopamges {
margin-bottom: 8px;
padding:0;
list-style: none;
counter-reset: li;
}
.beleduzlopamges li {
position: relative;
border: 2px solid #195588;
background: #eff3f7;
padding: 15px 19px 15px 27px;
margin: 12px 0 12px 40px;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.beleduzlopamges li:hover {
background: #FFF;
}
.beleduzlopamges li:before {
line-height: 32px;
position: absolute;
top: 4px;
left: -39px;
width: 39px;
text-align: center;
font-size: 16px;
font-weight: bold;
color: #f9f5f5;
background: #275b88;
counter-increment: li;
content: counter(li);
transition-duration: 0.2s;
}
.beleduzlopamges li:hover:before {
width:46px;
}
.beleduzlopamges li:after {
position: absolute;
left: 0;
top: 4px;
content: "";
height: 0;
width: 0;
border: 16px solid transparent;
border-left-color: #275b88;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
}
.beleduzlopamges li:hover:after {
margin-left: 6px;
}
Центровую гамму можно самостоятельно выставить под основной стиль сайта.3 Третий вариант:
- Скрипты для uCoz
- Шаблоны для uCoz
- Дизайн для сайта
- Стили для сайта
- Стилистика на CSS
CSSNizualisanelag {
padding:0;
list-style: none;
counter-reset: li;
}
.nizualisanelag li {
position: relative;
padding: 9px 17px 17px 25px;
margin-left: 39px;
transition-duration: 0.2s;
cursor: pointer;
font-weight: bold;
color: #343638;
}
.nizualisanelag li:before {
border: 3px solid transparent;
line-height: 35px;
position: absolute;
top: 0;
left:-29px;
width:41px;
text-align:center;
font-size: 14px;
font-weight: bold;
color: #619dce;
counter-increment: li;
content: counter(li);
transition-duration: 0.3s;
box-sizing: border-box;
}
.nizualisanelag li:hover:before {
color: #337AB7;
}
.nizualisanelag li:after {
position: absolute;
top: 0;
left: -29px;
width: 41px;
height: 41px;
border: 5px solid #468bd0;
border-radius: 50%;
content: "";
opacity: 0.5;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.nizualisanelag li:hover:after {
animation: 500ms ease-in-out 0s bounceIn;
opacity: 1;
}@keyframes bounceIn {
0% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
20% {
transform: scale3d(1.3, 1.3, 1.3);
}
40% {
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
Идет с красивой анимацией.4 Четвертый вариант:
- Первый элемент для сайта
- Второй элемент для сайта
- Третий элемент для сайта
- Четвертый элемент для сайта
- Пятый элемент для сайта
CSSPadding:0;
list-style: none;
}
.kudezamuden li{
padding:6px;
}
.kudezamuden li:before {
padding-right: 11px;
font-weight: bold;
color: #4979a0;
content: "\2606";
transition-duration: 0.4s;
}
.kudezamuden li:hover:before {
color: #235e90;
content: "\2605";
}
Аналогичен предыдущей версий, только сам значок изменен.Вообщем это небольшая подборка списков, даст веб мастеру сделать красивый список на портале, где сам может его больше оформить, как он сам хочет его видеть.
Если вам нужно помещать предметы в нумерованный список вместо маркированного, то здесь будет использоваться упорядоченных HTML. Этот список создается с помощью ol тега. Нумерация начинается с единицы и увеличивается на единицу для каждого последующего упорядоченного элемента списка с li тегом.
Форматируем список. Вот что мы получим:
Рисунок 4. Форматируем блок - .
Теперь маркеры списка вышли за пределы контейнера
-
. Таким образом маркеры могут выйти и за пределы контейнера статьи, к которой принадлежит список, что нарушит внешний вид сайта.
Лучше бы поместить их внутрь контейнера
В примере 11.1 приведен код HTML для добавления маркированного списка на веб-странице.
Пример 11.1. Создание маркированного списка
Маркированный список
Результат данного примера показан на рис. 11.1.
Рис. 11.1. Вид маркированного списка
Обратите внимание на отступы сверху, снизу и слева от списка. Такие отступы добавляются автоматически.
Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора стиля маркера используется атрибут type тега
-
. Допустимые значения приведены в табл. 11.1
Табл. 11.1. Стили маркеров списка
Тип списка Код HTML Пример Список с маркерами в виде круга
Список с маркерами в виде окружности
Список с квадратными маркерами
Вид маркеров может незначительно различаться в разных браузерах, а также при смене шрифта и размера текста.
Создание списка с квадратными маркерами показано в примере 11.2.
Пример 11.2. Вид маркеров
Маркированный список Изменение убеждений
Результат данного примера показан на рис. 11.2.
Маркированные списки позволяют разбить большой текст на отдельные блоки, каждый из которых начинается с маркера - обычно в его качестве выступает небольшая точка. Это привлекает внимание читателя к тексту и повышает его читабельность.
С элементом
-
связаны следующие особенности:
На рис.1 показан результат примера, иллюстрирующий приведённые особенности маркированного списка.
Рис. 1. Вид маркированного списка
Вид маркера
Маркеры могут принимать один из трёх видов: закрашенный кружок (по умолчанию), незакрашенный кружок и квадрат. Для выбора типа маркера используется свойство list-style-type или универсальное list-style (пример 1). Применяются следующие значения:
Пример 1. Изменение вида маркера
Списки В примере показано создание маркированного списка, где в качестве значка маркера используется небольшой однотонный квадрат. Хотя количество значений ограничено тремя, это не значит, что в нашем распоряжении всего три вида маркера. Существует множество спецсимволов, которые с успехом могут выступать в качестве значка маркера. «Прикрутить» их непосредственно к
Рисунок 1. Свойство list-style-type.
Обязательно обратите внимание на значение none , это значение убирает маркеры вообще. Это свойство часто используется для форматирования списков при помощи CSS.
Свойство list-style-type достаточно простое, как и остальные свойства по работе со списками.
Свойство list-style-image устанавливает символом маркера графический файл.
Вот что мы видим:
Рисунок 3. Форматируем блок - .
Тут важно обратить внимание на то, что маркеры списка выходят за границу блока элемента