|
Здравствуйте! Записался на ваш курс, но не понимаю как произвести оплату. Надо ли писать заявление и, если да, то куда отправлять? как я получу диплом о профессиональной переподготовке? |
Инспектор
Вы можете этот курс.
Опубликован: 31.10.2006 | Уровень: для всех | Доступ: платный
Лекция 9:
Списки в CSS
Аннотация: Рассматриваются параметры списков в CSS и способы задания маркеров для элементов списка.
Ключевые слова: css, 'list-style-type', 'list-style-position', 'list-style-image', decimal-leading-zero, lower-roman, upper-roman, lower-greek, 'lower-latin', upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha, 'marker-offset', BAN, GAN
Параметры списков в CSS позволяют разместить и изменять маркеры элементов списка, задавать изображение в качестве маркера элемента списка.
Примеры:
- Этот пример показывает, как задать различные маркеры элементов списка.
<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> - Этот пример показывает, как задать различные маркеры элементов списка.
<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> - Этот пример показывает, как задать изображение в качестве маркера элемента списка.
<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> - Этот пример показывает, как можно задать расположение маркера элемента списка.
<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> - Пример показывает, как задать все параметры списка в одном объявлении.
<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>
