Опубликован: 31.10.2006 | Уровень: для всех | Доступ: платный
Лекция 9:

Списки в CSS

< Лекция 8 || Лекция 9: 12 || Лекция 10 >
Аннотация: Рассматриваются параметры списков в CSS и способы задания маркеров для элементов списка.

Параметры списков в CSS позволяют разместить и изменять маркеры элементов списка, задавать изображение в качестве маркера элемента списка.

Примеры:

  1. Этот пример показывает, как задать различные маркеры элементов списка.
    <html>
    <head>
    <style type="text/css">
    ol.no {list-style-type: none}
    ul.ds {list-style-type: disc}
    ol.sqr {list-style-type: square}
    ul.crl {list-style-type: circle}
    </style>
    </head>
    
    <body>
    <ol class="no">
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
    </ol>
    
    <ul class="ds">
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
    </ul>
    
    <ol class="sqr">
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
    </ol>
    
    <ul class="crl">
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
    </ul>
    
    </body>
    
    </html>
  2. Этот пример показывает, как задать различные маркеры элементов списка.
    <html>
    <head>
    <style type="text/css">
    ul.dec {list-style-type: decimal}
    ol.lwrm {list-style-type: lower-roman}
    ul.uprm {list-style-type: upper-roman}
    ol.lwalph {list-style-type: lower-alpha}
    ul.upalph {list-style-type: upper-alpha}
    </style>
    </head>
    
    <body>
    
    <ol class="lwalph">
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
    </ol>
    
    <ul class="upalph">
    <li>Первый элемент</li>
    <li>Чай</li>
    <li>Третий элемент</li>
    </ul>
    
    <ol class="lwrm">
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
    </ol>
    
    <ul class="uprm">
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
    </ul>
    
    <ul class="dec">
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
    </ul>
    
    </body>
    
    </html>
  3. Этот пример показывает, как задать изображение в качестве маркера элемента списка.
    <html>
    <head>
    <style type="text/css">
    ol 
    {
    list-style-image: url("http://www.intuit.ru/ssi/html5/img/logo.png")
    }
    </style>
    </head>
    
    <body>
    <ol>
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    </ol>
    </body>
    
    </html>
  4. Этот пример показывает, как можно задать расположение маркера элемента списка.
    <html>
    <head>
    <style type="text/css">
    ol.in
    {
    list-style-position: inside
    }
    
    ul.out
    {
    list-style-position: outside
    }
    </style>
    </head>
    
    <body>
    <ol class="in">
    <li>Это первый элемент списка</li>
    <li>Это второй элемент списка</li>
    <li>Это третий элемент списка</li>
    <pre>Cписок имеет <i><u>list-style-position</u></i> = "<b>inside</b>"</pre>
    </ol>
    
    <ul class="out">
    <li>Это первый элемент списка</li>
    <li>Это второй элемент списка</li>
    <li>Это третий элемент списка</li>
    </ul>
    <pre>Список имеет <i><u>list-style-position</u></i> = "<b>outside</b>"</pre>
    </body>
    </html>
  5. Пример показывает, как задать все параметры списка в одном объявлении.
    <html>
    <head>
    <style type="text/css">
    ol 
    {
    list-style: disc outside url("http://www.intuit.ru/departament/speciality/image.gif")
    }
    </style>
    </head>
    
    <body>
    <ol>
    <li>Первый элемент списка</li>
    <li>Второй элемент списка</li>
    <li>Третий элемент списка</li>
    </ol>
    </body>
    
    </html>
< Лекция 8 || Лекция 9: 12 || Лекция 10 >
Илья Ардов
Илья Ардов

Добрый день!

Я записан на программу. Куда высылать договор и диплом?

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Елена Елаева
Елена Елаева
Россия
Владимир Лагодный
Владимир Лагодный
Россия