Просмотр архива WAP-ENGINE

CSS - Урок 14. Списки

Как всегда CSS
предоставляет большие возможности при
создании списков, чем только HTML.
Собственно свойств для списков
существует всего три: 
list-style-type -
определяет внешний вид маркера или
нумератора.
list-style-image - определяет
пользовательское изображение
маркера.
list-style-position - определяет
положение маркеров относительно
блока.
Рассмотрим их на
примерах.

list-style-type
Для маркерованных
списков ничего нового, все теже значения,
что и в HTML: 
disk - закрашенный кружок.
circle -
незакрашенный кружок.
square - закрашенный
квадрат.

Давайте посмотрим, как они
выглядят в браузере. Для этого создадим
три одинаковых списка, но каждому в
стилях зададим свое значение свойства.
Итак, код html-страницы: 

<html>
  <head>
   
<title>CSS списки</title>
    <link
rel="stylesheet" type="text/css"
href="style.css">
  </head>
  <body>
    <ul
id="spisok1">
      <li>Первый
пункт</li>
      <li>Второй пункт</li>
  
   <li>Третий пункт</li>
    </ul>
    <ul
id="spisok2">
      <li>Первый
пункт</li>
      <li>Второй пункт</li>
  
   <li>Третий пункт</li>
    </ul>
    <ul
id="spisok3">
      <li>Первый
пункт</li>
      <li>Второй пункт</li>
  
   <li>Третий пункт</li>
    </ul>
 
</body>
</html>
    
Код страницы style.css:


#spisok1{
list-style-type:disk;
}
#spisok2{
list-style-type:circle;
}
#spisok3{
list-style-type:square;
}

   
[img=Uroki_CSS/img/css14-1.gif]

Для нумерованных
списков перечень более широк, чем в HTML, но
не все значения поддерживаются всеми
браузерами. Поэтому пока рекомендуется
использовать только следующие: 
decimal -
десятичные числа.
lower-roman - строчные
римские цифры.
upper-roman - прописные римские
цифры.
lower-alpha - строчные латинские
буквы.

Давайте посмотрим, как они
выглядят в браузере. Для этого создадим
четыре одинаковых списка, но каждому в
стилях зададим свое значение свойства.
Итак, код html-страницы: 

<html>
  <head>
   
<title>CSS списки</title>
    <link
rel="stylesheet" type="text/css"
href="style.css">
  </head>
  <body>
    <ol
id="spisok1">
      <li>Первый
пункт</li>
      <li>Второй пункт</li>
  
   <li>Третий пункт</li>
    </ol>
    <ol
id="spisok2">
      <li>Первый
пункт</li>
      <li>Второй пункт</li>
  
   <li>Третий пункт</li>
    </ol>
    <ol
id="spisok3">
      <li>Первый
пункт</li>
      <li>Второй пункт</li>
  
   <li>Третий пункт</li>
    </ol>
    <ol
id="spisok4">
      <li>Первый
пункт</li>
      <li>Второй пункт</li>
  
   <li>Третий пункт</li>
    </ol>
 
</body>
</html>
    
Код страницы style.css:


#spisok1{
list-style-type:decimal;
}
#spisok2{
list-style-type:lower-roman;
}
#spisok3{
list-style-type:upper-roman;
}
#spisok4{
list-style-type:lower-alpha;
}

   
[img=Uroki_CSS/img/css14-2.gif]

list-style-image
Это
свойство позволяет задать свой вид
маркера. Для этого сначала надо создать
картинку с маркером. Предположим у нас
есть вот такая картинка: и мы хотим, чтобы
она была маркером. Создадим список:


<html>
  <head>
    <title>CSS
списки</title>
    <link rel="stylesheet"
type="text/css" href="style.css">
  </head>
 
<body>
    <ul id="spisok">
     
<li>Первый пункт</li>
      <li>Второй
пункт</li>
      <li>Третий пункт</li>
  
 </ul>
  </body>
</html>
    
На странице
style.css зададим стиль:


#spisok{
list-style-image:url(marker.gif);
}
    
Обратите
внимание, для данного примера картинка
лежит в той же папке, что и наши страницы.
Если же поместить картинку, например, в
папку images, то и путь к ней надо указать,
как list-style-image:url(images/marker.gif);. В общем, где бы
не лежала картинка, вы должны правильно
указать путь к ней.
[img=Uroki_CSS/img/css14-3.gif]

Как
вы понимаете, на внешний вид вашего
списка будет влиять размер картинки.
Помните об этом.

list-style-position
Это свойство
определяет положение маркера: внутри
блока - inside или снаружи - outside. Понятнее
будет на примере. Создадим два списка,
расположенных в div-е: 

<html>
  <head>
   
<title>CSS списки</title>
    <link
rel="stylesheet" type="text/css"
href="style.css">
  </head>
  <body>
    <div
id="sp">

      <ul id="spisok1">
      
<li>Первый пункт первого
списка</li><br>
       <li>Второй пункт
первого списка</li><br>
      
<li>Третий пункт первого
списка</li><br>
      </ul>

      <ul
id="spisok2">
       <li>Первый пункт
второго списка</li><br>
      
<li>Второй пункт второго
списка</li><br>
       <li>Третий пункт
второго списка</li><br>
      </ul>

  
</div>
  </body>
</html>
    
Зададим стили
для списков с разными значениями: 

#sp{

width:150px;
}
#spisok1{
 list-style-position:inside;
}
#spisok2{

list-style-position:outside;
}
    
И посмотрим на
результат в браузере:

[img=Uroki_CSS/img/css63.gif]

Думаю теперь разница
очевидна.
Сокращенная запись свойства
list-style
Как всегда, можно задать все
значения свойств списка через пробел:


#spisok1{
 list-style:circle url(marker.gif) inside;
}
    
Вот
собственно и все, наши уроки подошли к
концу. Мы рассмотрели все свойства CSS.
Теперь ваша задача научиться их
применять для решения конкретных задач.
В этом вам поможет раздел css - полезные
навыки. 

Удачи Вам и творческих успехов!