Rambler's Top100

ОФОРМЛЕНИЕ СПИСКОВ В CSS

Списки бывают нумерованные, заключённые в теги <OL></OL> и маркерованные,заключённые в теги <UL> </UL> по умолчанию, если не указывать описание свойств для списков, то нумерованные списки имеют нумерацию по порядку 1,2,3... и так далее, а маркерованные закрашенный круг

Нумерованный список
по умолчанию
Маркерованный список
по умолчанию
  1. Художественная литература
  2. Техническая литература
  3. Другая литература
  • Художественная литература
  • Техническая литература
  • Другая литература

Свойство "list-style-type"

НУМЕРОВАННЫЕ СПИСКИ

К нумерованные спискам можно применять различные значения свойств - это и десятичные цифры наччинающие с 1,2,3....и т.д., и цифры начинающие с 0-01, 02.. и т. д, и римские цифры и строчные буквы латинского алфавита и другая различная национальная цифровая и алфавитная нумерация,за применение тех или иных значений для нумерации списков применяется свойство list-style-type, если в файле CSS напишем;

ol { list-style-type: decimal-leading-zero;} нумерация списка начнётся с 01, 02, 03...

ol { list-style-type: lower-alpha;} нумерация списка начнётся с a, b, c и далее по алфавиту

Пример списков

Значение свойства
"decimal-leading-zero"
Значение свойства
"lower-alpha"
  1. Художественная литература
  2. Техническая литература
  3. Другая литература
  1. Художественная литература
  2. Техническая литература
  3. Другая литература

Перечень всех значений для нумерованных списков смотрите Здесь

 

МАРКИРОВАННЫЕ СПИСКИ

Для маркированных списков применяется три значения:

Выбираете обозначение нужного маркера и в файле css прописываете:

ul {list-style-type: circle;}     или так:     ul {list-style-type: square;}

Списки можно сделать без нумерации, маркировки и картинок, если в свойстве list-style-type, поставить значение none;

ul {list-style-type: none;}
( Список будет таким:)

Чтобы изменить отступ слева или справа для списка, применяется свойство "padding-left" или "padding-right"

ul {list-style-type: none;   padding-left: 3px;}

Свойство "list-style-image"

Вместо маркеров, списки можно обозначить картиками, отображение картинок в списках оформляется свойством "list-style-image", в css пишем так:

ul {list-style-image: url(images/zес.gif);} Список будет таким:

Свойство "display"

Списки можно распологать не только столбиком - вертикально, но и горизонтально - строкой, например так:

В файле CSS, будет так:
ul. { padding-left: 3px;}
li.{display: inline;}

Для просмотра следующего урока "Селекторы в CSS" нажмите кнопку "7"

 

 

Rambler's Top100 Яндекс цитирования