Отправляет email-рассылки с помощью сервиса Sendsay

Tutos-web: обучение веб-технологиям. Шаг за шагом

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Май 2009   →
 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
Автор
VelRoss

Статистика

462 подписчиков
-3 за неделю
←   Все выпуски   →

Tutos-web: обучение веб-технологиям. Шаг за шагом: Выпуск #39 : Урок 11. Списки в CSS


Вместе с Вами данную рассылку читают 898 (+8) подписчиков*

Добро пожаловать в рассылку

Tutos-web !

 HTML {CSS} 02 мая 2009 
Выпуск No

39

email: velross@list.ru
website : Tutos-web.Net.Ru
Ведёт рассылку : Velross

 

 

Тема выпуска : Урок 11. Списки в CSS

Сегодня в выпуске:

  1. Предисловие к уроку  >>>
  2. Примеры  >>>
  3. Свойства списков в CSS  >>>

 
 

На сайте также: этот урок с действующими примерами.

1. Предисловие к уроку

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


1 | 2 | 3 | Наверх

2. Примеры

Какие бывают маркеры в неупорядоченных списках
Этот пример демонстрирует различные типы маркеров для неупорядоченных списков.

 <html>
 <head>
 <style type="text/css">
 ul.disc {list-style-type: disc}
 ul.circle {list-style-type: circle}
 ul.square {list-style-type: square}
 ul.none {list-style-type: none}
 </style>
 </head>

 <body>
 <ul class="disc">
 <li>Кофе</li>
 <li>Чай</li>
 <li>Квас</li>
 </ul>

 <ul class="circle">
 <li>Кофе</li>
 <li>Чай</li>
 <li>Квас</li>
 </ul>

 <ul class="square">
 <li>Кофе</li>
 <li>Чай</li>
 <li>Квас</li>
 </ul>

 <ul class="none">
 <li>Кофе</li>
 <li>Чай</li>
 <li>Квас</li>
 </ul>
 </body>

 </html>

Какие бывают маркеры в упорядоченных списках
Этот пример демонстрирует различные типы маркеров для упорядоченных списков.

 <html>
 <head>
 <style type="text/css">
 ol.decimal {list-style-type: decimal}
 ol.lroman {list-style-type: lower-roman}
 ol.uroman {list-style-type: upper-roman}
 ol.lalpha {list-style-type: lower-alpha}
 ol.ualpha {list-style-type: upper-alpha}
 </style>
 </head>

 <body>
 <ol class="decimal">
 <li>Кофе</li>
 <li>Чай</li>
 <li>Квас</li>
 </ol>

 <ol class="lroman">
 <li>Кофе</li>
 <li>Чай</li>
 <li>Квас</li>
 </ol>

 <ol class="uroman">
 <li>Кофе</li>
 <li>Чай</li>
 <li>Квас</li>
 </ol>

 <ol class="lalpha">
 <li>Кофе</li>
 <li>Чай</li>
 <li>Квас</li>
 </ol>

 <ol class="ualpha">
 <li>Кофе</li>
 <li>Чай</li>
 <li>Квас</li>
 </ol>
 </body>

 </html>

Все типы маркеров для списков (некоторые маркеры не отображаются в IE и Opera)
Этот пример демонстрирует стили всех маркеров для элементов списка.

 <html>
 <head>
 <style type="text/css">
 ul.disc {list-style-type: disc}
 ul.circle {list-style-type: circle}
 ul.square {list-style-type: square}
 ul.none {list-style-type: none}
 ul.decimal {list-style-type: decimal}
 ul.decimal-leading-zero {list-style-type: decimal-leading-zero}
 ul.lower-roman {list-style-type: lower-roman}
 ul.upper-roman {list-style-type: upper-roman}
 ul.lower-alpha {list-style-type: lower-alpha}
 ul.upper-alpha {list-style-type: upper-alpha}
 ul.lower-greek {list-style-type: lower-greek}
 ul.lower-latin {list-style-type: lower-latin}
 ul.upper-latin {list-style-type: upper-latin}
 ul.hebrew {list-style-type: hebrew}
 ul.armenian {list-style-type: armenian}
 ul.georgian {list-style-type: georgian}
 ul.cjk-ideographic {list-style-type: cjk-ideographic}
 ul.hiragana {list-style-type: hiragana}
 ul.katakana {list-style-type: katakana}
 ul.hiragana-iroha {list-style-type: hiragana-iroha}
 ul.katakana-iroha {list-style-type: katakana-iroha}
 </style>
 </head>

 <body>
 <ul class="disc">
 <li>Disc type</li>
 <li>Чай</li>
 <li>Кофе</li>
 </ul>

 <ul class="circle">
 <li>Circle type</li>
 <li>Чай</li>
 <li>Кофе</li>
 </ul>

 <ul class="square">
 <li>Square type</li>
 <li>Чай</li>
 <li>Кофе</li>
 </ul>

 <ul class="none">
 <li>The "none" type</li>
 <li>Чай</li>
 <li>Кофе</li>
 </ul>

 <ul class="decimal">
 <li>Decimal type</li>
 <li>Чай</li>
 <li>Кофе</li>
 </ul>

 <ul class="decimal-leading-zero">
 <li>Decimal-leading-zero type</li>
 <li>Чай</li>
 <li>Кофе</li>
 </ul>

 <ul class="lower-roman">
 <li>Lower-roman type</li>
 <li>Чай</li>
 <li>Кофе</li>
 </ul>

 <ul class="upper-roman">
 <li>Upper-roman type</li>
 <li>Чай</li>
 <li>Кофе</li>
 </ul>

 <ul class="lower-alpha">
 <li>Lower-alpha type</li>
 <li>Чай</li>
 <li>Кофе</li>
 </ul>

 <ul class="upper-alpha">
 <li>Upper-alpha type</li>
 <li>Чай</li>
 <li>Кофе</li>
 </ul>

 <ul class="lower-greek">
 <li>Lower-greek type</li>
 <li>Чай</li>
 <li>Кофе</li>
 </ul>

 <ul class="lower-latin">
 <li>Lower-latin type</li>
 <li>Чай</li>
 <li>Кофе</li>
 </ul>

 <ul class="upper-latin">
 <li>Upper-latin type</li>
 <li>Чай</li>
 <li>Кофе</li>
 </ul>

 <ul class="hebrew">
 <li>Hebrew type</li>
 <li>Чай</li>
 <li>Кофе</li>
 </ul>

 <ul class="armenian">
 <li>Armenian type</li>
 <li>Чай</li>
 <li>Кофе</li>
 </ul>

 <ul class="georgian">
 <li>Georgian type</li>
 <li>Чай</li>
 <li>Кофе</li>
 </ul>

 <ul class="cjk-ideographic">
 <li>Cjk-ideographic type</li>
 <li>Чай</li>
 <li>Кофе</li>
 </ul>

 <ul class="hiragana">
 <li>Hiragana type</li>
 <li>Чай</li>
 <li>Кофе</li>
 </ul>

 <ul class="katakana">
 <li>Katakana type</li>
 <li>Чай</li>
 <li>Кофе</li>
 </ul>

 <ul class="hiragana-iroha">
 <li>Hiragana-iroha type</li>
 <li>Чай</li>
 <li>Кофе</li>
 </ul>

 <ul class="katakana-iroha">
 <li>Katakana-iroha type</li>
 <li>Чай</li>
 <li>Кофе</li>
 </ul>

 </body>
 </html>

Установка изображения в качестве маркера для элементов списка
Этот пример демонстрирует, как можно установить изображение в качестве маркера для элементов списка.

 <html>
 <head>
 <style type="text/css">
 ul
 {
 list-style-image: url('arrow.gif')
 }
 </style>
 </head>

 <body>
 <ul>
 <li>Чай</li>
 <li>Кофе</li>
 <li>Квас</li>
 </ul>
 </body>

 </html>

Изменение положения списка относительно текста
Этот пример демонстрирует, как будут размещаться маркеры относительно текста.

 <html>
 <head>
 <style type="text/css">
 ul.inside
 {
 list-style-position: inside
 }

 ul.outside
 {
 list-style-position: outside
 }
 </style>
 </head>

 <body>
 <p>Это список, положение которого определяется значением "inside"  ("внутри", т.е. маркеры находятся внутри текста):</p>
 <ul class="inside">
 <li>Цейлонский чай - прекрасный чёрный чай. Цейлонский чай -  прекрасный чёрный чай. Цейлонский чай - прекрасный чёрный чай.</li>
 <li>Жасминовый чай - фантастический чай. Жасминовый чай -  фантастический чай. Жасминовый чай - фантастический чай.</li>
 <li>Фруктовый чай- ароматы лета. Фруктовый чай- ароматы лета.  Фруктовый чай- ароматы лета. </li>
 </ul>

 <p>Это список, положение которого определяется значением "outside"  ("снаружи", т.е. маркеры выносятся за текст):</p>
 <ul class="outside">
 <li>Цейлонский чай - прекрасный чёрный чай. Цейлонский чай -  прекрасный чёрный чай. Цейлонский чай - прекрасный чёрный чай.</li>
 <li>Жасминовый чай - фантастический чай. Жасминовый чай -  фантастический чай. Жасминовый чай - фантастический чай.</li>
 <li>Фруктовый чай- ароматы лета. Фруктовый чай- ароматы лета.  Фруктовый чай- ароматы лета. </li>
 </ul>
 </body>
 </html>

Все свойства списков в одной записи
Этот пример демонстрирует как использовать сокращённую запись для установки всех свойств списка в одной записи.

 <html>
 <head>
 <style type="text/css">
 ul
 {
 list-style: square inside url('arrow.gif')
 }
 </style>
 </head>

 <body>
 <ul>
 <li>Кофе</li>
 <li>Чай</li>
 <li>Квас</li>
 </ul>
 </body>

 </html>

1 | 2 | 3 | Наверх

3. Свойства списков в CSS

Свойства списков в CSS позволяют Вам:

  • использовать маркеры для элементов списка;
  • выбирать стиль маркеров;
  • использовать изображения в качестве маркеров.

Поддержка браузеров: IE: Internet Explorer, F: Firefox. Число - номер версии браузера, с которого осуществляется поддержка свойства.

W3C: число в столбце "W3C" указывает в какой рекомендации CSS (CSS1 или CSS2) было определено данное свойство.

Свойство Описание Значения IE F W3C
list-style Сокращенная запись для установки всех свойств списков в одной записи list-style-type
list-style-position
list-style-image		 4 1 1
list-style-image Установка изображения в качестве маркера для элементов списка none
url		 4 1 1
list-style-position Устанавливает положение маркеров списка относительно текста списка inside
outside		 4 1 1
list-style-type Определяет вид маркера для каждого элемента списка. none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha		 4 1 1
marker-offset Задает отступ между маркером и списком. auto
length		 - 1 2


1 | 2 | 3 | Наверх

Четвёртый способ управлять своим временем -
ПРИМЕНЯЙТЕ МЕТОД А, Б, В, Г, Д - ДЛЯ РАССТАНОВКИ ПРИОРИТЕТОВ !
До начала работы составьте список того, что нужно сделать. Внимательно изучите его и проставьте на против каждого пункта соответствующую букву алфавита:
Буква "А" - очень важные дела. Они должны быть обязательно завершены.
Буква "Б" - важные дела.
Буква "В" - задача, которую хорошо было бы выполнить.
 Буква "Г" - задачи, которые можно делегировать кому-нибудь.
Буква "Д" - малосущественные дела, которые можно не выполнять.
Определите приоритетность задач помеченных буквой "А". Напротив главной задачи поставьте "А-1", менее главной "А-2" и т.д.

Брайан Трейси , "21 способ управлять временем".

+мини-подкаст на сайте

*Общее количество на 2-х рассылочных сервисах (Content.Mail.Ru и Subscribe.ru). 		 
  

tutos-web © 2008-2009

В избранное