23.02.2017
Пока нет
Всем привет!
В сегодняшнем уроке я расскажу о том, как в CSS можно управлять внешним видом , а именно, создавать маркированные и нумерованные списки, оформлять списки маркеров изображением, а также, если нужно, вообще убирать любые обозначение маркированного списка.
Постараюсь этот урок не затягивать и не писать много информации. Но это только постараюсь, а там как получится.
Вид маркера в списке
Свойство «LIST-STYLE-TYPE»
Правилом «list-style-type
» можно задать вид маркера, например, чтобы отображались цифры, буквы, квадратики, кружочки и др.
Свойство:
- none – без маркера
- маркированные списки:
- disk – маркер в виде закрашенного круга;
- circle – маркер в виде незакрашенного круга;
- square – маркер в виде закрашенного квадрата;
- нумерованные списки:
- decimal – обычные десятичные числа (1,2,3,4,5 и т. д.);
- upper-roman – большие римские цифры (I, II, III, IV, V и т.д.);
- lower-roman – маленькие римские цифры (i, ii, iii, iv, v и т.д.);
- upper-alpha – большие буквы (A, B, C, D, E и т. д.);
- lower-alpha – малые буквы (a,b,c,d,e и т.д.)
Li { list-style-type: circle; /* Маркеры в виде незакрашенного кружочка */ }
Полный пример:
- текст №1
- текст №2
Результат:
Если нужно убрать маркер из списка, тогда воспользуйтесь свойством «none »:
Li { list-style-type: none; /* Убираем маркеры */ }
Результат:
Положение маркера в списке
Свойство «
LIST-STYLE-POSITION
»
Правилом «list-style-position
» можно указать положение маркера.
Свойство:
- outside – за пределами основного блока списка;
- inside – внутри основного блока списка.
Li { list-style-position: inside; /* положение маркера */ }
Цвет маркера в списке
Свойство «
COLOR
»
Вам уже известно правило «color
», с помощью которого можно не только менять цвет текста, но и цвет маркера. Посмотрите .
- Текст №1
- Текст №2
Результат:
Картинка вместо маркера в списке
Свойство «
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) ". "; /* Выводим число */ }
Результат:
Жду вас на следующих уроках! Не забывайте подписываться!
Предыдущая запись
Следующая запись
Здравствуйте, уважаемые читатели блога сайт. Сегодня будет очередная статья о свойствах каскадных таблиц стилей. В ней речь пойдет об оформлении с помощью правил CSS.
Вообще списки среди блочных элементов стоят особняком. Это связано с тем, что они включают в себя маркеры и нумерацию, которые расставляет сам браузер.
Свойство List style — оформление списка на html странице
В языке CSS существует три свойства начинающихся с list-style, которые отвечают за оформление маркированных и нумерованных списков. Плюс еще есть сборное правило list-style, позволяющее сократить количество кода.
Все эти свойства допустимо использовать как для html элементов li, так и для элементов ul и ol. Единственное отличие, если правила прописать для конкретного значения списка li, то оно только для него и применится. А если эти же css правила прописать для контейнеров ul или ul, то они применятся для всех элементов li заключенных в этих контейнерах.
Начнем с атрибута list-style-type , который задает вид маркеров или нумерации у пунктов списка:
list-style-type: disc|circle|square|decimal|decimal-leading-zero|lower-roman|upper-roman|lower-greek|lower-alpha|lower-latin|upper-alpha|upper-latin|armenian|georgian|none|inherit
Как видно, свойство list-style-type имеет много доступных значений, которые могут задавать как вид маркера, так и различные виды нумерации.
- disc - маркер в виде черного кружка (значение по умолчанию для маркированных списков).
- circle - маркер в виде не закрашенного кружка.
- square - маркер в виде квадратика. Он может быть светлым или темным, в зависимости от браузера.
- decimal - нумерация арабскими цифрами (значение по умолчанию для нумерованных списков).
- decimal-leading-zero - нумерация арабскими цифрами от 01 до 99 с начальным нулем.
- lower-roman - нумерация маленькими римскими цифрами.
- upper-roman - нумерация большими римскими цифрами.
- lower-greek - нумерация маленькими греческими буквами.
- lower-alpha и lower-latin - нумерация маленькими латинскими буквами.
- upper-alpha и upper-latin - нумерация большими латинскими буквами.
- armenian - нумерация традиционными армянскими цифрами.
- georgian - нумерация традиционными грузинскими цифрами.
- none - маркерация и нумерация осуществляться вообще не будет.
Так примерно будут выглядеть элементы списка в браузере с различными значениями list-style-type:
При использовании CSS стилей не важно какой элемент (OL или UL) используется для создания списка. OL и UL отличаются только поведением по умолчанию и с помощью свойства list-style-type вы можете легко превратить один вид списка в другой.
Атрибут стиля list-style-image позволяет задавать в качестве маркера пунктов списка графическое изображение . При использовании атрибута list-style-image значение атрибута list-style-type игнорируется:
list-style-image: none|<интернет-адрес файла изображения>|inherit
Значение none убирает маркер изображение и устанавливает обычный, не графический. Это поведение по умолчанию.
При указании адреса файла изображения, на место маркера будет вставлена картинка. Как и при использовании , в качестве адреса картинки можно использовать как абсолютные так и относительные адреса. В случае если браузер не сможет подгрузить изображение, то будет использоваться маркер или нумерация по умолчанию или то, что прописано в свойстве в list-style-type.
Пример списка с картинкой в качестве маркера:
- первый пункт списка;
- второй пункт списка;
- третий пункт списка.
А вот как это выглядит:
- первый пункт списка;
- второй пункт списка;
- третий пункт списка.
Понятно, что при выборе картинки в качестве маркера лучше подбирать небольшое изображение.
И последнее свойство CSS из серии list-style — list-style-position,
которое позволяет указать местоположение маркера или нумерации в пункте списка. В качестве значения может быть два варианта:
list-style-position: inside|outside
В случае значения inside маркер или нумерация помещается как бы внутри списка, а в случае outside за пределами элементов li. По умолчанию используется значение outside и маркер выносится за пределы.
Пример списка с различными значениями list-style-position:
- в первом пункте все по умолчанию;
- во втором пункте list-style-position установлен в inside. В этом случае, обратите внимание, вторая строка размещается на одном уровне с маркером;
- в этом пункте list-style-position равен outside.
Сборное CSS правило list-style
Следующее свойство CSS list-style является сборным для оформления списков. Оно позволяет записать все три рассмотренных выше CSS правила в одно единое. Порядок указания значений в нем может быть любым и параметры, которые вы не зададите в list-style браузер возьмет принятые по умолчанию.
Разделять значения в сборном правиле list-style следует пробелами:
list-style: list-style-type list-style-image list-style-position;
Реальное CSS правило для оформления списков может выглядеть примерно вот так:
list-style: circle url (http://сайт/images/marker.png) outside;
Таким образом свойство list-style позволяет значительно сократить объем кода, ведь вместо трех правил достаточно задать лишь одно.
Как уже говорилось выше, значения можно указывать в любом порядке и любом количестве. Так, например, для того чтобы убрать маркеры из списка меню достаточно записи:
list-style: none;
Тоже самое можно сделать используя свойство list-style-type:
list-style-type: none;
На этом рассказ об оформлении html списков при помощи каскадных таблиц стилей я закончу. Чтобы узнать о других CSS свойствах вы можете почитать статьи из раздела « » и не забудьте подписаться на обновления блога . До новых встреч!
С помощью CSS можно создать маркированные и нумерованные списки, а также использовать в качестве маркера подходящее изображение.
В табл. 1 перечислены свойства элементов, предназначенных для создания и изменения списков.
Свойство | Значение | Описание | Пример |
---|---|---|---|
list-style-type | disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none |
Вид маркера. Первые три используются для создания маркированного списка, а остальные — для нумерованного. | LI {list-style-type: circle}
LI {list-style-type: upper-alpha} |
list-style-image | none
URL |
Устанавливает символом маркера любую картинку. | LI {list-style-image: url(check.gif)} |
list-style-position | outside inside |
Выбор положения маркера относительно блока строк текста. | LI {list-style-position: inside} |
list-style | Универсальное свойство, включает одновременно все вышеперечисленные свойства. |
Поскольку тег
-
или
- Заголовок должен быть короче трех строк.
- При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие.
- Перед использованием специального термина или слова, решите, будет ли оно понятно читателю.
- работоспособность всех ссылок
- поддержку разных браузеров
- читабельность текста
- работоспособность всех ссылок
- поддержку разных браузеров
- читабельность текста
- работоспособность всех ссылок
- поддержку разных браузеров
- читабельность текста
- первый
- второй
- третий
- первый
- второй
- третий
- первый
- второй
- третий
- первый
- второй
- третий
- первый
- второй
- третий
- Элемент нумерованного списка #1
- Элемент нумерованного списка #2
- Элемент нумерованного списка #3
- Элемент ненумерованного списка #1
- Элемент ненумерованного списка #2
- Элемент ненумерованного списка #3
- Java
- .NET
- C++
- PHP
- Picasa
- Feedburner
- Youtube
- Microsoft
- Corel Corporation
- Zignals
- ByteTaxi
- Yahoo!
- Xoopit
- BuzzTracker
- MyBlogLog
- Lorem ipsum dolor sit amet, ...
- Aenean placerat lectus tristique...
- Mauris eget sapien arcu, vitae...
- Phasellus feugiat lacus ...
- First inline item
- Second inline item
- Third inline item
- Fourth inline item
- About
- Contact
-
,
который выступает в качестве его родителя, то можно устанавливать стиль как
для селектора UL
, так и для селектора LI
.
Так, в примере 1 используется селектор UL
, для
него и задаются стилевые параметры.
Пример 1. Создание маркированного списка
Результат данного примера показан на рис. 1. Используются квадратные маркеры и их внешнее размещение относительно текста.
Рис. 1. Вид списка, измененого с помощью стилей
Чтобы установить свое собственное изображение в качестве маркера применяется свойство list-style-image , как показано в примере 2.
Пример 2. Использование изображений в качестве маркера
Результат данного примера показан на рис. 2. В качестве маркеров используется маленькая картинка.
Рис. 2. Изображения в качестве маркеров
Некоторые примеры создания различных списков приведен в табл. 2.
Код HTML | Пример |
---|---|
|
|
Что следует учитывать при тестировании сайта:
|
|
Что следует учитывать при тестировании сайта:
|
|
Нумерованный список с арабскими цифрами: |
|
Нумерованный список со строчными римскими цифрами: |
|
Нумерованный список с заглавными римскими цифрами: |
|
Нумерованный список со строчными буквами латинского алфавита: |
|
Нумерованный список с заглавными буквами латинского алфавита: |
Cписки HTML (
-
для нумерованных
,
- для ненумерованных списков) используются очень часто. В этом уроке мы пойдем дальше создания обычных списков, и покажем вам 8 разных эффектных способов оформления списков HTML, используя CSS. Мы будем использовать чистый CSS, чтобы скучный список выглядел здорово и даже приобрел дополнительную функциональность.
Вот как выглядят стандартные нумерованный и ненумерованный списки:
Посмотрите пример, чтобы увидеть, что мы создадим.
Выглядит гораздо лучше, не правда ли? И Вы сможете создать все это, просто добавив немного кода CSS. Хотите знать, как это сделать? Приступим!
Список №1: Простое меню
Наиболее часто списки на веб-сайтах используются, чтобы создать меню. В этом примере показан код, который создаст простое, минималистичное, но в то же время элегантное меню.
HTML
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: Другой шрифт для цифр
Сложность со списками заключается в том, что все в списке должно выглядеть одинаково. Числа в списке должны иметь тот же цвет и шрифт, что и текст.
Но добавив дополнительный элемент list-item, Вы сможете обойти эти ограничения и создать очень необычный список. Вот как это сделать:
HTML
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 ...
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
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
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
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
Fusce sit amet ...
Vivamus interdum ...
Phasellus neque risus...
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
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. Когда Вы наводите указатель мыши на блочный элемент, он перейдет в активное повернутое состояние. Этот способ может быть не очень полезным, но на него приятно посмотреть.