Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Статьи по CSS » Статья по CSS 3. Оформление списков
Не нравится(-) 11 Нравится(+)
Статья по CSS 3. Оформление списков

Здравствуйте уважаемые посетители! Наша очередная статья по CSS, будет посвящена правилам оформления списков и различным областям их применения...


Общие сведения


Итак, начнём с того, что мы понимаем под списком. Вообще в html различается 2 вида списков: нумерованный и ненумерованный (маркированный). Они задаются тегами "ol" и "ul" соответственно. Элементы обоих видов списков задаются тегом "li". Для примера, составим простой маркированный список (именно с ними чаще всего приходится работать в CSS):

<ul>
   <li>Пункт 1</li>
   <li>Пункт 2</li>
   <li>Пункт 3</li>
</ul>

Теперь, разберёмся, для чего используются списки. Ну, думаю, что первое применение будет понятно и так - список элементов без специального оформления. Но есть и другие: меню, галерея изображений, облако тегов, даже последовательность блоков...
На самом деле, меню или галерею можно оформить и без списков, с помощью тегов div, span, em и т.д. Однако, использование списков позволяет сократить html код и код стилей. Это происходит благодаря ряду причин:
- Простым атрибутом CSS можно отменить или изменить оформление у списка (об этом - ниже);
- Конструкция уже содержит один уровень вложения (li), что позволяет задать



Простое оформление


В этой главе, мы поговорим об оформлении списка как списка. Здесь мы будем работать с двумя видами материала: текстом (содержанием) пунктов и обозначениями пунктов (последовательности для нумерованных списков и символы для маркированных).
Начнём с обозначений. Их оформление (стиль) задаётся одним атрибутом:
list-style-type. Значения этого атрибута – фиксированы и различны для нумерованных и маркированных списков.

Для нумерованных (ol):
decimal – арабские цифры (по умолчанию);
lower-roman – малые римские цифры;
upper-roman – большие римские цифры;
lower-alpha – малые (строчные) латинские буквы;
upper-alpha – большие (прописные) латинские буквы.

Для маркированных (ul):
disk – простой круг (по умолчанию);
circle – кольцо;
square – квадрат;
lower-alpha – малые (строчные) латинские буквы;
none – отмена оформление (благодаря этому значению атрибута маркированные списки удобно использовать как меню и т.д.).

Также, можно задать рисунок как маркер списка. Делается это так:
list-style-image: url(Адрес рисунка)


С помощью стилей можно задать и положение маркера относительно текста. Это задаётся атрибутом list-style-position. Он имеет следующие значения:

outside – вне текста (по умолчанию);
inside – внутри текста;

Все стили могут быть заданы в одном атрибуте list-style.
Например:
list-style: inside circle;


Текстовая составляющая оформляется по стандартным правилам для текста, описанным в соответствующей главе нашего справочника.


Меню с помощью списка


Последняя глава нашей статьи посвящена практическому применению списков. Главу можно считать уроком CSS по созданию вертикального меню таким способом.
Итак, по традиции, начинаем с создания файла стилей style.css и файла index.html с таким начальным кодом (содержанием):
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

Теперь, в этот же файл запишем наш список и завершим работу с html:
<ul>
   <li><a href="#">Пункт 1</a></li>
   <li><a href="#">Пункт 2</a></li>
   <li><a href="#">Пункт 3</a></li>
</body>
</html>

У нас получился вот такой простой маркированный список:
Статья по CSS 3. Оформление списков

Итак, дальше нам предстоит работа только с CSS. Начнём её, запишем в css файл такой код:
ul {
list-style:none;
}

li a {
color:#fff;
text-decoration:none;
padding: 4px 7px;
width:120px;
background:#0076ba;
display:block;
border:1px solid #fff;
font-weight:bold;
}
Мы задали сразу стили для всего списка и его элементов в случае, если они – ссылки. Должно получиться так:
Статья по CSS 3. Оформление списков

Теперь добавим эффектов при наведении мыши на кнопку:
li a:hover {
background:#d36800;
}

Вот, и всё. Наше меню готово.
Статья по CSS 3. Оформление списков

Думаю, что общий принцип его создания с помощью списков понятен. Демо – смотрите внизу статьи.

Итак, мы разобрались с основными правилами оформления списков и сферами их использования. Желаю Вам приятной и успешной работы с CSS. Спасибо за внимание!


Автор: Российская школа CSS
-----------------------------------
Демо
Правила копирования материалов статьи
Перейти в категорию статей по CSS


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 34006 раз(а) и написали 21 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Октябрь 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!