Оформление маркированного списка css. Правила CSS для настройки внешнего вида списка на html странице. Свойство list style (type, image, position)
Оформление маркированного списка css. Правила CSS для настройки внешнего вида списка на html странице. Свойство list style (type, image, position)
25.05.2019
Cписки HTML (
для нумерованных
,
для ненумерованных списков) используются очень часто. В этом уроке мы пойдем дальше создания обычных списков, и покажем вам 8 разных эффектных способов оформления списков HTML, используя CSS. Мы будем использовать чистый CSS, чтобы скучный список выглядел здорово и даже приобрел дополнительную функциональность.
Вот как выглядят стандартные нумерованный и ненумерованный списки:
Элемент нумерованного списка #1
Элемент нумерованного списка #2
Элемент нумерованного списка #3
Элемент ненумерованного списка #1
Элемент ненумерованного списка #2
Элемент ненумерованного списка #3
Посмотрите пример, чтобы увидеть, что мы создадим.
Выглядит гораздо лучше, не правда ли? И Вы сможете создать все это, просто добавив немного кода CSS. Хотите знать, как это сделать? Приступим!
Список №1: Простое меню
Наиболее часто списки на веб-сайтах используются, чтобы создать меню. В этом примере показан код, который создаст простое, минималистичное, но в то же время элегантное меню.
HTML
Home
Blog
About
Contact
CSS
/* Список #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 United States of America is a federal constitutional ...
The Philippines officially known as the Republic ...
The United Kingdom of Great Britain and ...
CSS
/* Список #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: Список с указателями
Вы можете изменить стиль указателей для ненумерованного списка на некоторые встроенные виды, но Вы также можете изменить его и на изображение. Этот способ сделает список еще привлекательней. Давайте рассмотрим, как это сделать.
HTML
Java
.NET
C++
PHP
CSS
/* Список #3 */
#list3
{
}
#list3
ul {
list-style-image
: url
("../images/arrow.png"
)
; color
:#eee
; font-size:18px
; }
#list3
ul li {
line-height:30px
; }
Список №4: Список в стиле iPhone
Этот список взят из статьи «Приложение «Контакты» iPhone с использованием CSS и Jquery ». Он выглядит, как список из приложения «Контакты» iPhone. Еще немного стиля для Вашего веб-сайта.
HTML
Toronto2004
Beijing2008
London2012
Rio de Janeiro2016
CSS
/* Список #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 , но тут мы рассмотрим только CSS.
HTML
Google
Picasa
Feedburner
Youtube
Microsoft
Corel Corporation
Zignals
ByteTaxi
Yahoo!
Xoopit
BuzzTracker
MyBlogLog
CSS
/* Список #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 и т. д.) для нумерации. Изменяя значение свойства list-style-type, Вы можете выбрать другие стили нумерации, например, римские цифры.
Также по умолчанию указатели списка размещены за пределами списка, Вы можете увидеть это во втором примере, другом шрифте для цифр. Чтобы обойти это ограничение, Вы можете изменить значение свойства list-style-position, чтобы нумерация располагалась внутри списка.
HTML
Lorem ipsum dolor sit amet, ... Fusce sit amet ...
Aenean placerat lectus tristique... Vivamus interdum ...
Mauris eget sapien arcu, vitae... Phasellus neque risus...
Phasellus feugiat lacus ... Duis rhoncus ...
CSS
/* Список #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.
HTML
First inline item
Second inline item
Third inline item
Fourth inline item
CSS
/* Список #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. Когда Вы наводите указатель мыши на блочный элемент, он перейдет в активное повернутое состояние. Этот способ может быть не очень полезным, но на него приятно посмотреть.
About
Contact
CSS
/* Список #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
; }
Заключение
В этом уроке Вы узнали, как можно делать необычные вещи с обычным списком. И все это, используя только CSS. Надеемся, Вам понравится использование этих списков!
Перевод — Дежурка
Продолжаем изучать CSS
свойства различных элементов. И в этом уроке пойдет речь об оформлении списков. Списки на практике используются достаточно часто, поэтому эти свойства нужно запомнить.
Обычный вид маркера
И, первое - задать внешний вид маркеров. Маркеры у списков бывают разные. В уроках по HTML
Нумерованных списках
показывается, как менять маркеры с помощью атрибута type
.
Но зная CSS
данный атрибут больше не нужен, так как все это делается, куда удобней, благодаря таблице стилей CSS
.
Для демонстрации давайте создадим список, с использованием CSS
. Особо не имеет значения какой нумерованный список
или ненумерованный список
, так как с помощью свойства list-style-typet
мы можем добавить маркеры или удалить их.
HTML
HTML страница
Ненумерованный список
Ненумерованный список
Ненумерованный список
Ненумерованный список
И так, обычный список создали, и по умолчанию у него создались маркеры в виде закрашенных кругов. И очень часто возникает вопрос, как убрать маркеры списка
?
Убирается маркер у списка с помощью свойства list-style-typet
и присваивая ему значение none
. Это является самым популярным вариантом по удалению маркеров у списка.
И для списка зададим то самое свойство.
Ul{
list-style-type: none;
}
Теперь если обновить страницу то увидим, что данное свойство убрало маркеры из списка.
none
- Удаляет маркеры у списка
circle
- Маркер в виде круга
disc"
- Маркер в виде заполненного круга. Значение по умолчанию
square
- Маркер в виде квадрата
armenian
- Армянская нумерация
decimal
- Маркер в виде цифры
decimal-leading-zero
- Цифры с «0» перед началом (01, 02, 03, и т.д.)
georgian
- Грузинская нумерация
lower-alpha
- (а, Ь, с, d, е, и т.д.)
lower-greek
- (alpha, beta, gamma, и т.д.)
lower-latin
- (a, b, с, d, e, и т.д.)
Iower-roman
- (i, ii, iii, iv, v, и т.д.)
upper-alpha
- (А, В, С, D, Е, и т.д.)
upper-latin
- (А, В, С, D, Е, и т.д.)
upper-roman
- (I, II, III, IV, V, и т.Д.)
inherit
- Значение должно быть унаследовано от элемента родителя
Это все вида маркеров для списков. Первые четыре вида самые распространённые, остальные виды применяются достаточно редко.
Ну и для примера давайте выберем и зададим маркер в виде больших римских цифр. Делается это просто: в место значения none
ставим название нашего маркера upper-roman
.
Ul{
list-style-type: upper-roman;
}
Если обновить страницу, то у списков в виде маркеров появились римские большие цифры. Вот таким способом можно менять внешний вид маркеров списков, задавая нужный вид через свойство list-style-type
.
Маркер в виде изображения
Второй, достаточно важный момент, и часто используемый маркер - это изображение в виде маркера. Часто нужно использовать маркер в виде красивой картинки и обычные варианты маркеров представленных CSS
не подходят. Для этого используется изображения. И делается это с помощью специального свойства, которое называется list-style-image
. Это будет указывать браузеру, что маркером у нас будет картинка.
Возьмите любую картинку в интернете размером (15px x 15px)
, которую планируется использовать в качестве маркера и поместите ее в ранее уже созданную папку с картинками images
. После этого, остается свойству list-style-image
указать путь к картинке и браузер вместо маркера подставит картинку.
В CSS
путь указывается с помощью ключевого словаurl()
. В скобках указываем путь к картинке ../images/Название картинки.jpg
, относительно таблицы стилей.
То есть, что значит относительно таблицы стилей? Наша таблица стилей - файл style.css
, лежит в каталоге CSS
, а картинка лежит в каталоге images
.
Это значит, что браузеру нужно указать, что ему сначала нужно выйти из каталога CSS
, это делается так: ../
, а затем зайти в в каталог с картинкой images
и уже затем найти нужную картинку.
Если вы указали правильный путь к картинке, то браузер вместо обычных маркеров подгрузит Вашу картинку.
Применяя в качестве маркера картинки Вам понадобится знать еще одно свойство, которое отвечает за расположение маркера картинки. Чтобы увидеть, как это свойство работает, мы сделаем рамку
красного цвета для всех элементов
.
Ul li{
border: 2px solid #ff0000;
}
Теперь, если вы посмотрите, то Ваш маркер-картинка находится за пределами элемента списка, той самой рамки, что мы создали выше. Поэтому бывают моменты, когда нужно чтобы маркер находился внутри элемента списка. Для этого и существует свойство list-style-position
, в которое изначально установлено значение outside
, то есть устанавливать маркеры за пределами элемента.
Чтобы внедрить маркер внутрь элемента, используется значение inside
. Теперь, если установить это свойство в значение inside
, то маркер окажется внутри элемента списка и красная рамка это наглядно нам показывает.
Вот таким образом работают три этих свойства. Существует и сокращенный вариант записи, который объединяет все эти свойства.
То есть, указывается свойство list-style
и затем, по порядку, значения типа маркера, позиции маркера и, если нужно путь к картинке, которая и будет маркером. И, картина у нас получится следующая:
Вот таким образом записывается краткий вариант правил, относящихся к внешнему виду списков. Данная запись говорит, что маркер должен находится внутри элемента, а маркером, будет является, та самая картинка
На этом со списками все, но уделите немного больше времени спискам, по тренируйтесь сами с установкой различных маркеров почувствуйте, как это все работает. В демо
будут показаны варианты установок маркера, где Вы сможете, путем сравнения, проверить корректность своей работы.
Здравствуйте, уважаемые читатели блога сайт. Сегодня будет очередная статья в копилку . Речь в ней пойдет об оформлении с помощью правил таблиц каскадных стилей. Здесь все очень просто, но тем не менее я решил посвятить этой теме отдельный пост.
Чуть раньше мы уже успели узнать как , как и как можно работать со . Ну, а еще чуть раньше мы во всех подробностях рассмотрели всевозможные и их различные комбинации для указания именно того элемента Html кода, для которого нужно будет применить определенные свойства стилевого оформления.
List style — оформление списков в Html коде
Итак, в языке стилевой разметки существует три отдельных правила начинающихся с list-style, которые служат для настройки внешнего вида списков (нумерованных или маркированных) в коде веб документов. Кроме этого существует сборное Css правило list-style, которое позволяет несколько сократить количество кода. Но обо всем по порядку.
То, что мы сейчас будем с вами рассматривать, допустимо использовать как для Html элементов LI, так и для элементов Ul и Ol (маркированный и нумерованный списки, соответственно). В чем будет разница применения list-style для этих тегов?
Собственно, узнать, наследуется ли свойство или нет, можно на сайте валидатора (читайте про по приведенной ссылке) в разделе посвященном спецификации таблиц каскадных стилей. В столбце «Inherited» напротив наследуемых правил будет стоять «Yes»:
Давайте начнем с list-style-type
, которое позволяет задать тип маркирации для отдельных элементов Html списка. Для этого правила допустимы следующие значения:
None — маркирация осуществляться вообще не будет (list-style-type:none; применено для этого пункта и поэтому у него нет маркера)
Disc — закрашенный кружок (для этой строки как раз применено list-style-type:disc;)
Как вы думаете, с помощью каких элементов Ul или Ol был создан расположенный чуть выше список? Вопрос на засыпку. Оказывается, что это уже не важно, хотя в данном конкретном случае я использовал Ol, но изменив его на Ul — внешний вид останется прежним, ибо он задается для каждого элемента своим значением CSS правила list style type.
По сути Ul и Ol отличаются только поведением по умолчанию (Ul — маркирует, а Ol — нумерует). Но если вы захотите, то сможете легко превратить один вид списка в другой с помощью list-style-type. Шрифт для маркирования цифрами или буквами используется точно такой же, какой был вами определен для содержимого тегов LI. Например, поменяв цвет шрифта для списка мы поменяем и цвет маркеров
:
Поменяли цвет текста (list-style-type:lower-roman;color:red) и поменялся цвет маркера
Давайте перейдем с следующему CSS свойству — list-style-position
. С помощью него можно задать позицию (размещение) области с маркером. Для него предусмотрено всего два варианта значений:
Т.е. по сути в list-style-position мы указываем, где нужно размещать область с маркерам — за пределами элемента LI (outside) или внутри него (inside). По умолчанию область с маркером выносится за пределы, т.е. используется значение outside.
Давайте посмотрим это на примере. В первом элементе списка я специально пропишу list-style-position:inside и мы посмотрим, что из этого выйдет:
Здесь все по умолчанию
Вот так будет выглядеть размещение области маркера с inside. Обратите внимание, что вторая строка в этом элементе и маркер расположены на одном уровне
Здесь все по умолчанию
List-style-image и сборное Css правило
Далее у нас на очереди List-style-image — позволяет задать картинку, которая будет использоваться в качестве маркера. Это правило по умолчанию имеет значение None (т.е. никакой картинки в качестве маркера не используется), но вы можете прописать функционал Url (), указав в нем путь до изображения, которое в последствие будет выполнять роль маркера в этом списке:
Вот так может выглядеть использование картинки в качестве маркера. Понятно, что можно подобрать более подходящее для этой цели изображение
Например, как здесь.
Как вы помните, в статье про я говорил, что картинки относятся к строчным элементам (собственно, для браузера эта та же самая буква, но иногда очень большого размера).
Вот картинка и встает на место маркера (буквы или цифры). При этом высота строки с элементом списка будет увеличена, если вы вставите в качестве маркера большую картинку (как это произошло во втором элементе приведенного чуть выше примера).
В функционале для list style image можно указывать как на изображения. Если картинка не подгрузится, то будет использоваться маркер или нумерация по умолчанию, либо то, что прописано в list-style-type для этого элемента списка.
Чтобы записать все три описанных выше CSS правила в одно единое, можно будет использовать List-style, которое является сборным для оформления списков. Порядок указания значений в нем не имеет никакого значения. Те значения, которые вы не зададите в List-style, в явном виде будут интерпретированы браузером со значениями принятыми по умолчанию.
Где посмотреть значения по умолчанию? Да все там же — в спецификации CSS валидатора W3C в столбце «Initial value» напротив интересующих вас свойств:
Значения для отдельных свойств в сборном правиле List-style разделяются пробелами. Места расположения, как уже упоминал, не важны:
Можно использовать значения в любом порядке и любом количестве (начиная от одного). Кстати говоря, с помощью списков чаще всего формируются на сайтах меню и свойство List-style при этом используется для того, чтобы убрать маркеры из списков меню
, которые там совершенно не нужны:
Display (block, none, inline) в CSS - задаем тип отображения Html элементов на вебстранице
Как настроить чередование фонового цвета строк таблиц, списков и прочих Html элементов на сайте с помощью псевдокласса nth-child
Float и clear в CSS - инструменты блочной верстки Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка
Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши
Position (absolute, relative и fixed) - способы позиционирования Html элементов в CSS (правила left, right, top и bottom)
CSS свойства text-decoration, vertical-align, text-align, text-indent для оформления текста в Html
Помню как в июле 1999 года я просвещал людей в мейл-листах о прелестях стилевой вёрстки. С тех пор мало что поменялось.
Впрочем, кое-что поменялось. Поменялся мой взгляд на CSS и на (X)HTML, который выступает в роли каркаса для стилей. Например, я обнаружил, что большинство страниц содержат панель навигации. Чаще всего она оформляются как простая текстовая строка со ссылками, разделенными тегами
или
Структурно же они представляют собой списки ссылок, и следовательно должны оформляться как таковые.
Причина, по которой мы не оформляем их как списки, состоит в том, что нам не очень хочется перед каждой ссылкой в меню видеть маркер. Ранее я рассказал о некоторых приемах верстки страниц с помощью CSS. В одном из тех приемов мы научились выводить списки в строку, а не вертикально.
В данной же статье я покажу, как с помощью CSS можно укротить эти неповоротливые и неуклюжие списки. Хватит им беспризорно шататься по вашим веб-страницам. Настало ваше время командовать им, как себя вести.
Готовим арену
В качестве предмета дрессировки я выбрал простые ненумерованные списки. Все упомянутые тут правила CSS можно применить и к нумерованным спискам с тем же результатом. Во всех примерах (кроме специально оговоренных случаев) используется следующий список:
Item 1
Item 2
Item 3
Item 4
Item 5 сделаем этот пункт немного длиннее,
чтобы он переходил на следующую строку
, и поведение списка определяется с помощью этого DIV-а. Базовое правило, действующее на все DIV-ы, таково:
Без каких-либо дополнительных стилевых правил, список в базовом DIV-е будет выглядеть так:
Позиционирование
Иногда для вашего дизайна отступ в списке принятый по умолчанию может оказаться слишком большим. Но изменение только свойства margin или padding для элемента
срабатывает не для всех броузеров. Для того, чтобы список полностью передвинулся скажем влево, вам необходимо поменять оба свойства: и margin, и padding. Связано это с тем, что Internet Explorer и Opera создают левый отступ у списка с помощью левого margin, а Mozilla/Netscape используют для этого левый padding.
В следующем примере свойствам margin-left и padding-left у элемента UL присвоено значение 0:
Обратите внимание, что маркеры лежат за границей DIV-а. Если бы контейнером был не DIV, а документа, маркеры оказались бы за пределами окна броузера, т.е. пропали бы с глаз долой. Если вы хотите, чтобы маркеры лежали внутри границ DIV-а, вдоль левого его края, присвойте либо свойству left-padding либо свойству left-margin значение «1em».
Маркеры
Скажем, вам понадобился список с особыми маркерами. Как вы поступали раньше? Создавали таблицу, в одной колонке размещали gif-картинку маркера и смещали ее в ячейке вверх и вправо. В другой колонке размещали текст, который должен был бы находится в элементах
. Теперь CSS позволяет использовать изображение в качестве маркера. Если броузер не поддерживает эту функцию CSS (или не поддерживает вывод графики), будет использован маркер по умолчанию (либо тот, который вы укажите на этот случай).
Стилевое правило выглядит так:
ul {
list-style-image: url(bullet.gif);
}
А броузер покажет список так:
Для тех броузеров, которые не поддерживают вывод графики, добавьте в правила следующую строчку:
list-style-type: disc;
Изображения, выбранное вами в качестве маркера, может «выползти» за границы списка. Чтобы этого не произошло, поместите изображение внутрь блока
. Для этого добавьте следующую строку:
list-style-position: inside;
Все три декларации можно объединить в одно краткое правило:
ul {
list-style: disc url(bullet.gif) inside;
}
что эквивалентно
ul {
list-style-type: disc;
list-style-image: url(bullet.gif);
list-style-position: inside;
}
Список в результате будет выглядеть так:
Бывает так, что у вас есть список, но вам не нужны маркеры, или вы хотите использовать в качестве маркера какой-то другой символ. Опять-таки CSS спешит к вам на помощь. Добавьте правило list-style: none; и сделайте элементы
«надвисающими». Всё правило целиком будет выглядеть так:
Либо свойство левый padding, либо свойство левый margin должно иметь значение 0, а другое — значение 1em. Меняя это свойство вы можете подогнать размер отступа от вашего маркера до приемлемого. Отрицательное значение в свойстве text-indent приводит к тому, что первая строка каждого пункта списка сдвигается влево и «надвисает» над остальным текстом.
Следующий наш список будет обычным, только в качестве маркера будет использован стандартный HML-символ, например », который соответствует закрывающей типографской кавычке: «.
Здесь следует отметить, что Netscape6/7/Mozilla (и другие производные Gecko-броузеры), а также Opera умеют генерировать контент с помощью псевдо элемента:before из стандарта CSS2. Воспользуемся этой функцией и сгенерируем автоматически символ » или какой другой символ в качестве маркера. Таким образом нам не надо будет вписывать его вручную в каждый LI элемент. Если вы работает с броузером Opera или с семейством броузеров Gecko, нижеприведенный CSS создаст такой же список, что и предыдущий, при этом в сам список ничего дополнительно добавлять не нужно.
#custom-gen ul li:before {
content: "0BB 020";
}
Свойству content может быть присвоена текстовая строка, URL или что-то другое, включая специальные символы. Если вы остановили свой выбор на символе типа », в свойстве надо прописать шестнадцатеричный код этого символа. У правой типографской кавычки это код 0BB (другой символ 020 — это пробел, добавлен из эстетических соображений). Конечный результат представлен ниже (смотрите броузером Opera или Mozilla/Netscape):
Выстраиваем список в ряд
Кто сказал, что списки должны идти вертикально и оформляться слева маркерами? К примеру вам нужен нумерованный список ссылок, но визуально вы хотите, чтобы этот список на странице выглядел как вертикальная панель навигации. Или скажем, вы хотите, чтобы ссылки располагались горизонтально вдоль верхнего края страницы.
Это касается не только списка ссылок. Вам может понадобиться привести список несколько раз внутри абзаца (например, список книг). Структурно — это список, но раньше если бы вы такое сделали, этот список разорвал бы ваш абзац. CSS опять приходит к вам на помощь!
Так как данный список не будет являться на странице чем-то отдельным, я не буду помещать его в базовый DIV, как предыдущие списки. На этот раз разметка будет выглядеть так: абзац, список, следующий абзац.
Уже слышу крики: «Болван! Мы думали ты научишь нас, как помещать списки внутри абзаца, а не между двумя абзацами.»
И на это я отвечу: «Ну да, вы правы. К сожалению (X)HTML не разрешает помещать списки внутрь абзаца. Однако с помощью стилей вы можете сделать вот что».
. В нем находится абзац, потом стандартный список UL, и за ним — еще один абзац. Список UL был отредактирован таким образом, чтобы после каждого пункта была запятая, а за последним пунктом шла точка.
Результат выглядит так (список выделен синим цветом):
Как и в примере выше с маркером мы можем с помощью CSS автоматически генерировать запятые и точки. Если ваши посетители пользуются только броузерами Opera и Gecko, вам не о чем беспокоиться. Стилевые правила будут выглядеть вот так:
#inline-list-gen ul li:after {
content: ", ";
}
#inline-list-gen ul li.last:after {
content: ". ";
}
Здесь мы используем псевдо-элемент:after для добавления запятой в конце каждого пункта списка, а точку ставим с помощью класса class=»last». Результат будет таким (помните, он работает только в Opera или Mozilla/Netscape):
Навигация
Как я уже сказал в самом начале меню ссылок, которые мы видим на каждом сайте, должны быть оформлены как списки, чем они по сути и являются. Так как мы не хотим видеть этот список так, как его выводит броузер по умолчанию, воспользуемся CSS для внесения косметических изменений. Мы уже знаем, что списки можно специально выводить горизонтально (в одну строчку), а не только вертикально (как они выводятся по умолчанию). С помощью стилей маркеры можно убрать, а в ваших руках появляется широкий набор возможностей, как визуально отделить один пункт списка от другого.
Вот примеры горизонтальных списков, помещенных в один и тот же базовый DIV со следующими правилами.
Два примера ниже используют все тот же UL только без длинного текста в последнем пункте. Добавлен также дополнительный класс, который позволяет отдельно работать с одним из LI в списке.
Границы
Символ | часто используется для обозначения различных вариантов выбора. Вполне естественно использовать его в меню. Сымитируем этот символ с помощью границ у LI.
Примечание: этот прием был предложен Ренделом Растом (Randal Rust), а затем его улучшили подписчики списка рассылки css-discuss
Ссылки-цепочки
Еще один тип ссылок, которые обычно располагаются горизонтально на веб-странице — это известные всем нам ссылки-цепочки (breadcrumb links). Эти ссылки показывают наглядно, где в иерархии сайта вы сейчас находитесь — весь ваш путь от главной страницы до текущего раздела или страницы. Если вы действительно хотите сделать код вашей страницы семантически правильным, этот тип ссылок следует оформить как серию вложенных списков, так как каждый раздел является частью предыдущего раздела:
И опять-таки символ «»» (или любой другой подходящий символ) можно генерировать автоматически с помощью псевдо-элемента:before в сочетании с классом class=»first», чтобы первый пункт LI не имел этого символа.
Закончу свою статью реальным примером, в котором использован вышеописанный трюк. Мы возьмем стандартный список UL со ссылками и создадим динамическое меню с эффектами перекатывания. Для создания эффекта перекатывания визуальные стили будут применяться к элементам A, а элементы UL и LI будут служить лишь как структурный каркас.
Это меню — фактически ответ на вопрос, заданный Майклом Эффордом (Michael Efford) в списке рассылки css-discuss. Майкл создал в точности такое же меню с помощью таблиц, графики и JavaScript. Затем он спросил в списке рассылки, можно ли то же самое получить с помощью CSS.
Home
Hidden Cameras
CCTV Cameras
Employee Theft
Helpful Hints
F.A.Q
About Us
Contact Us
Дайте разберем стилевую таблицу правило за правилом, и я объясню для чего нужно каждое из них.
Первое правило — для DIV-а #button. Оно задает, сколько места будет занимать меню, и создает контекст, чтобы мы могли управлять поведением ссылок и пунктов списка. Я предпочел сделать меню гибким и зависимым от установок броузера, поэтому (почти) все значения заданы в "em"-ах. Включая ширину меню. Черная граница была взята из исходного дизайна Майкла. Большой нижний отступ (padding) у меню сделан для того, чтобы вы могли видеть фон у DIV. Опять таки, это было сделано, чтобы повторить исходный дизайн. Нижнее поле (margin) используется для того, чтобы отделить меню от того, что за ним идет. Все цвета взяты из исходного дизайна.
Тут я определил, как должен выглядеть список. Так как все пункты списка у нас являются ссылками, а эффект перекатывания пока имеется только у ссылок, я намеренно удалил все стилистические правила из списков. Я добавил лишь границу шириной в один пиксель, у которой цвет совпадает с цветом фона DIV-а #button. Эта граница служит разделителем между пунктами меню. В исходном дизайне для этого использовалась отдельная картинка.
Списки - важный элемент веб-страницы. Они помогают структурировать информацию и преподносить ее в удобном для пользователя виде. Кроме того, в виде списков часто оформляются меню и навигационные панели. Управлять положением и внешним видом маркирующего элемента позволяет группа свойств
Виды списков
Различают упорядоченные и неупорядоченные списки. В первых маркером может служить любой символ, не изменяющийся от пункта к пункту, во вторых каждый элемент списка имеет собственный маркер, определяющий его местоположение среди остальных.
В упорядоченных списках для маркировки обычно используют цифры или буквы разных систем и алфавитов.
В зависимости от степени вложенности различают одноуровневые и Каждый уровень часто имеет собственный маркирующий элемент.
Использование списков при создании меню или панелей навигации поощряется последней версией стандарта HTML, так как этот элемент обладает важным семантическим значением.
Отображение в CSS
Каждый пункт является блочным контейнером с особым типом отображения display: list-item. По умолчанию это значение устанавливается для элементов li, расположенных внутри контейнеров ul и ol, и обеспечивает отображение маркера перед блоком.
При необходимости такой тип отображения можно установить для любого HTML-контейнера. Появившийся маркирующий элемент стилизуется с помощью группы свойств CSS list-style.
P {
display: list-item;
list-style-type: decimal;
}
Все три перечисленные ниже свойства наследуются дочерними элементами, имеющими display: list-item, и в случае необходимости требуют явного переопределения.
Положение маркера списка
Первое свойство группы - list-style-position. Оно определяет, остается ли маркер в блоке текста или выносится за его пределы.
Свойство принимает одно из двух значений:
inside,
outside.
Разница между ними особенно хорошо заметна на многострочных пунктах.
По умолчанию установлено значение outside, и маркер списка выносится за границу блока.
Внешний вид маркера
Второе свойство - list-style-type - управляет типом маркирующего элемента и может принимать больше пятнадцати значений.
По умолчанию для нумерованного списка используются арабские цифры, а для маркированного - точки. Но свойства list-style в CSS позволяют изменить эти установки и даже вовсе удалить маркеры.
различные японские стили нумерации, заглавные символы
cjk-ideographic
восточная идеографическая нумерация
Некоторые значения дублируют друг друга, например lower-alpha и lower-latin, а другие не поддерживаются рядом браузеров и шрифтов.
При необходимости маркеры упорядоченного типа могут быть применены к неупорядоченным спискам ul и наоборот.
Отдельно следует выделить значение none, которое скрывает маркеры у списка любого типа. Оно особенно полезно при создании навигационных панелей, когда требуется сохранить семантику списка, но маркирующие элементы не вписываются в дизайн. Также свойство часто используется для пользовательской стилизации.
List {
list-style-type: none;
}
Пользовательский маркер
Вместо определенных CSS видов маркирующих элементов можно использовать любое изображение. Для этого необходимо передать ссылку на него свойству list-style-image.
Можно использовать даже изображения в формате gif - анимация будет сохранена. Важно помнить, что отображает изображение в натуральную величину.
List {
list-style-image: url(image.jpg);
line-height: 25px;
}
Например:
Помимо файлов изображений, можно использовать CSS-функции радиальных или линейных градиентов:
List {
list-style-image: radial-gradient(lightblue, aqua, blue);
}
Форма маркера при этом остается квадратной.
Объединенный синтаксис
Все свойства, определяющие отображение маркера списка, могут быть объединены в одном - CSS list-style.
Информация о марке, модели и альтернативных названиях конкретного устройства, если таковые имеются. ДизайнИнформация о размерах и весе устройства, представленная в разных единицах измерения. Использованные материалы, предлагаемые цвета,...
Сегодня компьютерные технологии, стремительно развиваются, совершенствуя другие отрасли производства. Для развития других технологий, с помощью компьютерных, нужны специальные программы. Эти программы устанавливают на многие заводы и фабрики, чтобы...
Инструкция Два сравнительно небольших экрана могут с легкостью заменить один широкоформатный с большой диагональю. Иногда подключение второго позволяет использовать одновременно несколько функций одного компьютера. Современные видеоадаптеры в...