Сегодня нет практически ни одного сайта, где бы не использовались HTML списки (
А теперь посмотрите демо-версию, чтобы увидеть, что же мы с вами будем создавать.
Выглядят гораздо лучше, не так ли? И вы тоже можете создать такие списки при помощи простого CSS кода. Хотите знать как? Читайте!
Список #1: Простая система навигации
Чаще всего списки используются при создании навигационного меню. Код данного HTML/CSS примера позволяет создать простую, даже немного скромную, но привлекательную систему навигации.
/* LIST #1 */ #list1 { } #list1 ul { list-style:none; text-align:center; border-top:1px solid #eee; border-bottom:1px solid #eee; padding:10px 0; } #list1 ul li { display:inline; text-transform:uppercase; padding:0 10px; letter-spacing:10px; } #list1 ul li a { text-decoration:none; color:#eee; } #list1 ul li a:hover { text-decoration:underline; }
Список #2: Использование различного шрифта при нумерации
Проблема при использовании списка в том, что он сливается с текстом. А цифры всегда того же цвета, что и текст.
Но стоит добавить немного стилей, и вы забудете о вышеперечисленных ограничениях, а ваши списки станут гораздо привлекательнее. Вот как это делается:
The Netherlands is a country in ...
The United States of America is a federal constitutional ...
The Philippines officially known as the Republic ...
The United Kingdom of Great Britain and ...
/* LIST #2 */ #list2 { width:320px; } #list2 ol { font-style:italic; font-family:Georgia, Times, serif; font-size:24px; color:#bfe1f1; } #list2 ol li { } #list2 ol li p { padding:8px; font-style:normal; font-family:Arial; font-size:13px; color:#eee; border-left: 1px solid #999; } #list2 ol li p em { display:block; }
Список #3: Изображения-маркеры
Вы легко можете поменять вид маркеров неупорядоченного списка, указав одно из стандартных значений, но ведь можно в качестве маркеров использовать и изображения. Такое решение поможет сделать ваши списки более оригинальными. А вот и код:
/* LIST #3 */ #list3 { } #list3 ul { list-style-image: url("../images/arrow.png"); color:#eee; font-size:18px; } #list3 ul li { line-height:30px; }
Список #4: iPhone-стиль
Данный список взят из статьи the iPhone Contacts App, созданный при помощи CSS и jQuery. Так выглядят списки на iPhone. Очень привлекательно, не так ли? Хотите такой на свой сайт?
/* LIST #4 */ #list4 { width:320px; font-family:Georgia, Times, serif; font-size:15px; } #list4 ul { list-style: none; } #list4 ul li { } #list4 ul li a { display:block; text-decoration:none; color:#000000; background-color:#FFFFFF; line-height:30px; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#CCCCCC; padding-left:10px; cursor:pointer; } #list4 ul li a:hover { color:#FFFFFF; background-image:url(../images/hover.png); background-repeat:repeat-x; } #list4 ul li a strong { margin-right:10px; }
Список #5: Вложенные списки
Вложенные списки могут быть необыкновенно полезны и выглядят красиво. Изменив третью технику (Изображения-маркеры), мы можем создать «расширенный список». Конечно же не без помощи jQuery:
/* LIST #5 */ #list5 { color:#eee; } #list5 ol { font-size:18px; } #list5 ol li { } #list5 ol li ol { list-style-image: url("../images/nested.png"); padding:5px 0 5px 18px; font-size:15px; } #list5 ol li ol li { color:#bfe1f1; height:15px; margin-left:10px; }
Список #6: Римская нумерация + многострочный тип
По умолчанию в списке используются стандартная нумерация (1, 2, 3, 4 и т.д.). Изменив значение в CSS, вы можете задать другой тип нумерации, к примеру, римский.
Так же по умолчанию, нумерация и маркеры располагаются вне списка (отличный пример тому - наш список под номером 2). Но и это исправимо, всего лишь нужно изменить значение list-style-position свойства на inside.
/* LIST #6 */ #list6 { font-family: "Trebuchet MS", "Lucida Grande", Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; } #list6 ol { list-style-type: upper-roman; color:#eee; font-size:14px; list-style-position: inside; } #list6 ol li { }
Список #7: Линейный список, в котором пункты перечисляются через запятую
Обычно списки используются для отображения количества чего-либо и отражаются в виде столбика. Но как быть, если вам нужен линейный список? Это достигается путем смены значения display свойства на inline. Но если вам вдруг понадобится встроить список в текст, то по правилам, пунктики списка должны быть разделены запятой. Как этого добиться? А, просто, при помощи элемента:after символического кода.
/* LIST #7 */ #list7 { } #list7 ul { color:#eee; font-size:18px; font-family:Georgia, Times, serif; } #list7 ul li { display: inline; } #list7 ul li:after { content: ", "; } #list7 ul li.last:after { content: ". "; }
Список #8: Вращающееся навигационное меню
Вот и последняя техника, для работы которой понадобится CSS3 (поддерживается только последними версиями Firefox, Safari и Chrome). При наведении курсора на один из элементов блока включается эффект - вращение. Конечно не самый удобный способ, но очень красивый.
/* LIST #8 */ #list8 { } #list8 ul { list-style:none; } #list8 ul li { font-family:Georgia,serif,Times; font-size:18px; } #list8 ul li a { display:block; width:300px; height:28px; background-color:#333; border-left:5px solid #222; border-right:5px solid #222; padding-left:10px; text-decoration:none; color:#bfe1f1; } #list8 ul li a:hover { -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000; -webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000; transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }
Заключение
Как видите, реально создать уникальные вещи из обычного html-списка. И все это силами CSS. Очень рад, если вы узнали много интересного для себя.
CSS дает возможность создавать маркированные и нумерованные списки, оформлять списки маркеров изображением, а также, если нужно, вообще убирать любые обозначения маркированного списка.
CSS стили списка маркера.
list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none ;
Значение :
disk – маркированный список в виде закрашенного кружка
circle – маркированный список в виде не закрашенного кружка
square – маркированный список в виде закрашенного квадратика
decimal – нумерованный список арабскими числами (1,2,3 и т.д.)
upper-roman – нумерованный список большими римскими цифрами (I,II,III,IV и т.д.)
lower-roman – нумерованный список маленькими римскими цифрами (i,ii,iii,iv и т.д.)
upper-alpha – нумерованный список заглавными буквами (A,B,C и т.д.)
lower-alpha – нумерованный список строчными буквами (a,b,c и т. д.)
none – без маркера.
Пример :
Результат :
Бывают такие случаи, когда отображения маркера в списке нужно убрать. Для этого в коде CSS пропишите
list-style-type: none;
Пример :
Результат :
Можно обычные маркеры в списке заменить собственными изображениями. Это можно сделать с помощью свойства list-style-image .
list-style-image: url(картинка.png);
Пример :
Результат :
Можно также задать маркированному списку расстояние от текста. Это можно сделать с помощью свойства padding-left для селектора li.
Пример :
Результат :
Следующая задача состоит в том, чтобы изменить цвет маркера, но при этом не изменять цвет текста. Как это возможно сделать? Цвет маркера можно изменить, если к тесту добавить тег .
Это выглядит вот так:
Пример :
Результат :
Дополнение к общей теме.
Если вам нужно, по каким-либо причинам, задать нумерацию списка маркера не с нуля, а, допустим, с 8, вы можете сделать такой ход.
Пример :
Результат :
Вот и подошла к завершению тема .
Доброго времени суток!
В этой статье вы узнаете о всех возможностях списков, поймете как сделать нумерованный список, освоите теги, которые помогут сделать из простого маркированного списка более интересный и заметный с произвольными маркерами. После прохождения урока у вас придет понимание того, где применяются списки и при каких обстоятельствах их можно использовать.
Данная статья — третья в данном небольшом курсе по основам HTML. Перед прочтением данного урока рекомендую пройти предыдущие два:
Только началась статья, а вы уже можете заметить использование стандартного маркированного списка. У меня на сайте он выглядит достаточно просто: слева есть небольшой отступ с линией и квадратный маркер. Далее в статье мы подробно рассмотрим какие бывают маркеры, как сделать цифры, а также как сделать собственный маркер.
В каждой части статьи создание тех или иных списков будет сопровождаться подробными пояснениями по вставке того или иного списка.
Данный вид списков используется для перечисления в тексте набора похожих по значению элементов. Это может быть перечисление ссылок, которые связаны одной тематикой, подробное объяснение для отдельных частей текста. Но давайте посмотрим как в коде выглядит маркированные списки:
А вот так выглядит в браузере:
Рис. 1.1. Стандартный вид маркированного ненумерованного списка HTML в браузереНа изображении выше (Рис 1.1.) можно заметить кружки в начале каждого элемента меню. Это и есть маркер. По умолчанию он в браузере в виде закрашенного круга. Всего есть несколько видов маркеров в HTML: закрашенный круг, пустой круг и квадрат. Они не требуют ни CSS ни подключения сторонних изображений:
Значения атрибута вы знаете, а сейчас посмотрим как сделать маркированный список HTML в коде. Из таблицы выше мы выбрали второе значение "circle" для атрибута type и задали его нашему маркированному списку:
| <html > <head > <title > Пример маркированного списка с маркером в виде пустого круга</ title > </ head > <body > <p > Звезды:</ p > <ul type = "circle" > <li > Сириус</ li > <li > Арктур</ li > <li > Поллукс</ li > <li > Бетельгейзе</ li > <li > Солнце</ li > </ ul > </ body > </ html > |
Сразу смотрим как этот код будет выглядеть в браузере:
Рис. 1.2. Вид маркера для списка в виде окружности в браузереПосмотрим также и последний пример с квадратным маркером для HTML списка:
Обратите внимание на маркер, он стал квадратным:
Рис. 1.3. Вид маркера для списка в виде квадрата в браузереВажное замечание: сейчас уже не используется такой способ для создания стилей маркированным спискам. Существует четкое разделение CSS (что такое CSS читайте ) и HTML. HTML — для разметки, а CSS — для создания привлекательного внешнего вида.
Код, который содержит данный атрибут, при указания типа текущего документа как HTML5 (""), выдаст ошибку при валидации. Если не слышали что такое валидация, то вам сюда — .
Ошибка будет следующая:
Рис. 1.4. Ошибка на валидаторе при использовании атрибута "type" у спискаС маркированными списками разобрались. Сейчас перейдем к нумерованным, а затем рассмотрим вложенные списки и несколько готовых примеров, которые используются чаще всего на реальных сайтах.
В отличие от предыдущего вида списков, в нумерованных списков есть одна важная особенность: они автоматически проставляют нумерацию. Это бывает полезно когда необходимо пронумеровать большой список. Вручную это займет очень много времени, при этом еще можно сбиться. Нумерованный список задается с помощью тега . Как это выглядит на практике:
Пример нумерованного списка:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html > <head > <title > Пример стандартного нумерованного списка</ title > </ head > <body > <p > От одного до пяти:</ p > <ol > <li > Первый</ li > <li > Второй</ li > <li > Третий</ li > <li > Четвертый</ li > <li > Пятый</ li > </ ol > </ body > </ html > |
Таким образом выглядит нумерованный список со стандартными настройками в браузере:
Рис. 2.1. Нумерованный список в браузере со стандартными настройкамиКак и у его предшественника (маркированного списка) у него есть свои стили для вывода цифр. Обычная нумерация — это не единственный вид маркеров у нумерованного списка в HTML.
Здесь у нас есть выбор не из трех видов маркеров, а из пяти:
| Название маркера | Значение атрибута "type" | Пример списка |
|---|---|---|
| Маркеры в виде арабских чисел | 1 |
|
| Маркеры в виде строчных латинских букв | a |
|
| Маркеры в виде заглавных латинских букв | A |
|
| Маркеры в виде римских цифр в нижнем регистре | i |
|
| Маркеры в виде римских цифр в верхнем регистре | I |
|
Кроме обычного вывода нумерованного списка мы также можем начать свою нумерацию с любой цифры. Для этого необходимо задать дополнительный атрибут "start" . Такая нумерация работает на всех видах маркеров у нумерованных списков. Как это выглядит на практике:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html > <head > <title > Произвольная нумерация для нумерованного списка</ title > </ head > <body > <p > Начинаем нумерацию с двенадцати:</ p > <ol type = "a" start = "12" > <li > Двенадцать</ li > <li > Тринадцать</ li > <li > Четырнадцать</ li > <li > Пятнадцать</ li > <li > Шестнадцать</ li > </ ol > </ body > </ html > |
Вот как это будет отображаться на реальном сайте:
Рис. 2.2. Нумерация с произвольного числа в нумерованном спискеНа изображении выше мы пронумеровали список начиная с двенадцати, при этом сделали маркеры в виде строчных латинских букв. Сейчас, я думаю, стало понятно как использовать данные атрибуты в своих проектах.
Ну а сейчас перейдем к вложенным спискам HTML.
Многоуровневые списки используются на сайте в построении меню. Это меню чаще всего выглядит выпадающим либо вниз (урок по ), либо выпадающим влево или вправо. Такие меню позволяют хранить в себе другие элементы меню в компактном виде.
На примере моделей автомобилей мы построим многоуровневый список в HTML:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html > <head > <title > Вложенный маркированный список HTML</ title > </ head > <body > <ul > <li > Citroen <ul > <li > Berlingo</ li > <li > C1</ li > <li > C2</ li > <li > C3 Picasso</ li > <li > C4 Grand Picasso</ li > </ ul > </ li > <li > KIA</ li > <li > Toyota</ li > <li > Audi</ li > <li > Lexus</ li > </ ul > </ body > </ html > |
Обратите внимание, как выглядит многоуровневый список в браузере:
Рис. 3.1. Пример многоуровневого списка в HTMLМы делали многоуровневый список с помощью маркированного (тег
Но мы можем объединить многоуровневые списки с нумерованными и маркированными следующим образом:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <html > <head > <title > Нумерованные, маркированные и многоуровневые списки в HTML</ title > </ head > <body > <ul > <li > Первая группа тюльпанов <ol > <li > Первый класс <ul > <li > Простые ранние тюльпаны</ li > </ ul > </ li > <li > Второй класс <ul > <li > Махровые тюльпаны</ li > </ ul > </ li > </ ol > </ li > </ ul > </ body > </ html > |
В примере выше у нас двойная вложенность (2 уровня). Сначала вкладывается список из двух классов тюльпанов, он у нас нумерованный. Затем в каждый из элементов нумерованного списка вкладывается маркированный список.
Смотрим его вид в браузере:
Рис. 3.2. Пример многоуровневого нумерованного списка в маркированный список в браузереЗдесь находится информация, для которой необходимо понимание свойств CSS. Для этого рекомендую изучить следующие уроки: . Все примеры будут сразу с исходным кодом и разбиты по вкладкам HTML (структура), CSS (стили) и Result (результат).
Сделать список HTML в строку может понадобиться при создании горизонтального меню. Сделать его очень просто:
За это отвечает свойство list-style-type в CSS (подробнее ):
Элемент списка — это блочный элемент, поэтому по центру его необходимо выравнивать с помощью внешних отступов. Но есть один важный момент — мы должны явно указать ширину, чтобы выравнивание сработало:
Достаточно лишь одного свойства CSS list-style-image . Внутри url указать адрес до иконки. Хочу лишь заметить, что изображение лучше сразу подбирать маленькое, потому что от него зависит высота строки списка:
В этом случае необходимо заранее подключить шрифтовые иконки (например, FontAwesome ). Тогда можно сделать любую иконку вместо стандартного маркера:
Чтобы сделать список в несколько столбцов мы воспользуемся свойством CSS column-count (свойство поддерживается только в следующих браузерах: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Также необходимо задать высоту для списка, чтобы увидеть разбиение на несколько столбцов:
На видео ниже вы можете увидеть всю работу со списками HTML на практике:
В статье представлено несколько способов, которые позволяют установить определенный маркер для ненумерованного списка, а также указаны их достоинства и недостатки
Если проанализировать какой-либо сайт, то можно обнаружить тот факт, что в контенте очень часто присутствуют списки разного рода: меню, список товаров и т. д. В HTML-коде за нумерованный список отвечает тег , а за маркированный – .
Еще стоит отметить тот факт, что на практике маркированные списки встречаются намного чаще, но при этом у них есть один небольшой недостаток. Маркер в списке отображается по-разному, в зависимости от используемого браузера. Для серьезного дизайнера это проблема.
Чтобы устранить этот негативный эффект надо отменить вывод маркера, воспользовавшись свойством list-style :
ol, ul { list- style: none; }
С этого начинается формирование списка с уникальными маркерами и значками. Ниже представлены наиболее распространенные способы представления уникальных и одинаковых для всех браузеров значков элементов списка.
Наиболее распространенный и простой способ указать для списка маркер – это воспользоваться бекграундной картинкой (свойство background). Метод основывается на указании в таблице стилей фонового рисунка для элементов списка, а также внутренний отступ (свойство padding), который зарезервирует место для нового маркера. Ниже представлен пример кода:
ul { list- style: none; } li{ background: url(путь- к- картинке) no- repeat; padding- left: 20px; }
Этот способ радует своей уникальностью, так как позволяет установить абсолютно любой маркер в виде картинки. Ниже показано, как наш код будет выглядеть в браузере:
Главная положительная сторона этого метода заключается в 100%-ной кроссбраузерности, но, не смотря на это, есть маленький недостаток. Использование картинки – это дополнительное обращение к серверу.
Существует вариант, когда можно обойтись без картинки, если дизайнерские условия позволяют это. Такое очень часто допускается при оформлении основного контента, когда список маркируется простейшими элементами, типа квадратик ( ) или стрелочка (→). Таким образом, мы подошли к тому, что в качестве маркера может выступать какой-либо подходящий спецсимвол.
Далее возникает вопрос, каким образом спецсимволы вставлять в элементы списка. Естественно не в ручную, иначе это был бы очень затянутый и нудный процесс, плюс ко всему еще и трудоемкий. Выйти из этой ситуации нам поможет псевдоэлемент before , применение которого привязывается к определенному селектору, что позволяет автоматизировать наш процесс присвоения маркеров из спецсимволов. Такое решение подходит к большинству браузеров, с учетом того, что для IE , будет прописан expression .
Ниже представлен пример кода, который формирует маркированный список с коротким тире:
li{ this. innerHTML = "-" + this. innerHTML) /*хак для IE*/ } li: before{ content: "\201 3" ; }
На практике получим такую картину:
Напоминаю о том, что в реальных условиях хаки подключаются условными комментариями .
При использовании этого метода главное знать кодировку необходимого значка. Также стоит отметить, что для expression спецсимволы прописываются числовой комбинацией или мнемоническим кодом. Что касается свойства content , то в этом случае вначале ставится слеш, а потом идет запись шестнадцатеричного кода.
Вышеупомянутый способ не всегда корректно отрабатывает в легендарном IE (не смотря на хак). Точнее, «костыли» для этого браузера не до конца доработанные. Более действенным является метод, основанный на insertAdjacentHTML , ниже представлен код этого метода:
li{ //z-index: expression(runtimeStyle.zIndex = 1, insertAdjacentHTML("afterBegin", "-")); }
Некоторые квадратные маркеры можно нарисовать с использованием некоторых CSS-свойств. К примеру, квадрат с цветной заливкой рисуется через свойство background-color , а квадратик в виде рамки – border (кстати говоря, квадрат с заливкой можно нарисовать и таким способом). Пример записи в CSS-файле:
li{ //z-index: expression(runtimeStyle.zIndex = 1, this. innerHTML = "" + this. innerHTML) /* хак для ие6 и 7 */ } li: before, . listMarkerBackColor{ background- color: #539127; width: 7px; height: 7px; content: "" ; float: left; margin: 6px 6px 0 0 ; overflow: hidden; } html . listMarkerBackColor{ margin- right: 1px; /* исправляем маленткий косяк в IE6 */ }
Таким образом рисованный CSS-свойствами маркер будет выглядеть на практике:
Такой метод частенько применяется при оформлении хлебных крошек на сайте. Кто не знает о чем речь, смотрим на пример ниже
В таком случае каждая ссылка отделяется друг от друга спецсимволом, но перед первым элементом никакого спецсимвола быть не должно. В этом нам поможет псевдокласс first-child , который обращается только к первому элементу списка. В кодовом виде это должно выглядеть так
HTML
< ul> < li>< a href= "#" > Главная < li>< a href= "#" > Блог < li>< a href= "#" > CSS < li> Валидный код при использовании target= "_blank"
li: before{ content: "\21 92" ; } li: first- child: before{ content: "" ; }
Стоит также отметить, что такой прием используют не только для хлебных крошек, но и для обычных маркированных списков, в зависимости от дизайнерского задания.
| 6.0+ | 4.0+ | 9.5+ | 3.0+ | 3.0+ | - | - |
Подводя итог, можно отметить тот факт, что применение псевдоэлемента before является оправданным и рациональным в основном контенте, так как там не выдвигают особых требований к оформлению списков. Это в свою очередь позволит уменьшить нагрузку на сервер, в сравнении с вариантом, когда используют картинку. А если еще отметить тот факт, что в основном контенте может быть очень много маркированных списков, то разница может стать существеннее. Но картинки значительно выигрывают в плане дизайнерских решений маркера.
23.02.2017
Пока нет
Всем привет!
В сегодняшнем уроке я расскажу о том, как в CSS можно управлять внешним видом , а именно, создавать маркированные и нумерованные списки, оформлять списки маркеров изображением, а также, если нужно, вообще убирать любые обозначение маркированного списка.
Постараюсь этот урок не затягивать и не писать много информации. Но это только постараюсь, а там как получится.
Свойство «LIST-STYLE-TYPE»
Правилом «list-style-type
» можно задать вид маркера, например, чтобы отображались цифры, буквы, квадратики, кружочки и др.
Свойство:
- маркированные списки:
- нумерованные списки:
Li { list-style-type: circle; /* Маркеры в виде незакрашенного кружочка */ }
Полный пример:
Результат:
Если нужно убрать маркер из списка, тогда воспользуйтесь свойством «none »:
Li { list-style-type: none; /* Убираем маркеры */ }
Результат:
Свойство «
LIST-STYLE-POSITION
»
Правилом «list-style-position
» можно указать положение маркера.
Свойство:
Li { list-style-position: inside; /* положение маркера */ }
Свойство «
COLOR
»
Вам уже известно правило «color
», с помощью которого можно не только менять цвет текста, но и цвет маркера. Посмотрите .
Результат:
Свойство «
LIST-STYLE-IMAGE
»
Если вам не нравится стандартный вид нумерованных или маркированных списков, вы можете воспользоваться правилом «list-style-image
» и вместо обычных маркеров поставить картиночные.
Синтаксис:
List-style-image: url(картинка.png);
LI { list-style-image: url("marker1.png"); /* изображение маркера */ }
«marker1.png » - это картинка маркера.
Результат:
Свойство «PADDING-LEFT»
Если вам нужно сделать отступ от маркера до текста, воспользуйтесь правилом «padding-left
».
Li { padding-left: 30px; /* Отступ от маркера до текста */ }
Результат:
Нумерация списка с любой цифры
Это не обязательно знать, но я решил сделать подарок для тех, кто дочитал до этого места. Если вам нужно, задать нумерацию списка не с 1, а, к примеру, с 6, вы можете сделать такой ход:
Li { list-style-type: none; /* Убираем исходную нумерацию у списка */ } ul { counter-reset: list 5; /* Инициируем счетчик */ } ul li:before { counter-increment: list; /* Увеличиваем значение счетчика */ content: counter(list) ". "; /* Выводим число */ }
Результат:
Жду вас на следующих уроках! Не забывайте подписываться!
Предыдущая запись
Следующая запись
