«Единственный способ творить великие дела – это любить то, что ты делаешь»
CSS
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг «Установка и продажа окон» Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Любая тема сайта - 4900 руб. Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


Как Вы уже знаете из HTML, существуют нумерованные списки, представленные тегом <ol>, и маркированные списки, представленные тегом <ul>. Каждый пункт в обоих списках обозначается тегом <li>.

Кроме этого в ряде случаев находят применение списки определений, в построении которых участвуют теги <dl>, <dt> и <dd>.

Свойства CSS, которые задают для списков стилевое оформление, применяются к тегам <ol>, <ul>, <li>, <dd> и <dt>.



Маркер списка

Свойство list-style-type устанавливает вид маркера для элементов списка.

Условно значения этого свойства можно разделить на маркеры:

- для нумерованного списка:

- upper-alpha - заглавные буквы: A, B, C…,
- lower-alpha - строчные буквы: a, b, c…,
- upper-roman - большие римские числа: I, II, III…,
- lower-roman – маленькие римские числа: i, ii, iii…,
- decimal – арабские цифры: 1, 2, 3

- и для маркированного списка:

- disk - закрашенный круг,
- circle - не закрашенный круг,
- square – квадрат.

Как видите, маркировка списков в HTML и в CSS одна и та же.

Но особенностью списков в CSS является универсальность приведенных выше значений свойства list-style-type в том плане, что они могут быть применены к любому списку или пункту списка.

То есть из маркированного списка можно сделать нумерованный и наоборот.

При значении none маркер списка отсутствует.

Фрагмент кода

<ol>
<li>
Это нумерованный список
<li>
Пункты списка - арабские цифры (значение по умолчанию)
<li style="list-style-type
:square;"> Я выбрал в качестве маркера для третьего пункта списка квадрат
<li>
Четвертый пункт
<li style="list-style-type
:none;"> Пятый пункт списка не обозначен
</ol>

Результат
  1. Это нумерованный список
  2. Пункты списка - арабские цифры (значение по умолчанию)
  3. Я выбрал в качестве маркера для третьего пункта списка квадрат
  4. Четвертый пункт
  5. Пятый пункт списка не обозначен

Маркер - изображение

Свойство list-style-image позволяет задать в качестве маркера для пунктов списка изображение.

В качестве значения свойства list-style-image указывается адрес файла с изображением - абсолютный или относительный путь к файлу (подробнее здесь...). Изображение может являться маркером как для всего списка, так и для его отдельного пункта.

При значении none маркер списка отсутствует.

Фрагмент кода

<p> Моря юга европейской части России: </p>
<ul style="list-style-image
:url(img/Greendaw.gif);">
<li>
Черное море
<li>
Азовское море
<li style="list-style-image
:url(img/Redcross.gif);"> Каспийское море
</ul>

Результат

Моря юга европейской части России:

  • Черное море
  • Азовское море
  • Каспийское море

Позиция маркера

Свойство list-style-position задает положение маркера в списке.

И здесь лишь два варианта: маркер располагается либо за границей списка - значение outside (значение по умолчанию), либо внутри списка при значении inside.

Фрагмент кода

<ul style="list-style-position:inside;">
<li>
В предыдущем примере напротив Каспийского моря стоит крест. Если Вы не знаете почему, то
<li>
Каспийское море - это озеро.
<li style="list-style-position
:outside;"> Этот пример иллюстрирует позицию маркера: для всего списка задано внутреннее положение маркера. Исключение составляет данный пункт: как видите маркер вынесен за пределы списка.
</ul>

Результат
  • В предыдущем примере напротив Каспийского моря стоит крест. Если Вы не знаете почему, то
  • Каспийское море - это озеро.
  • Этот пример иллюстрирует позицию маркера: для всего списка задано внутреннее положение маркера. Исключение составляет данный пункт: как видите маркер вынесен за пределы списка.

Универсальное свойство

Свойство list-style является универсальным свойством, позволяющим одновременно указать значения всех свойств, связанных со списками.

Значения свойств указывают через пробел, в любом порядке. А браузер автоматически определяет принадлежность значения свойству.

Не обязательно указывать значения всех свойств. Не используемым свойствам присваиваются значения по умолчанию.

Фрагмент кода

<ul style="list-style: upper-roman inside;">
<li>
К данному списку с помощью свойства list-style я применил два свойства, отвечающих за оформление списков, указав через пробел только значения свойств.
<li>
upper-roman - пункты списка обозначены большими римскими цифрами.
<li>
inside - цифры расположены внутри списка.
</ul>

Результат
  • К данному списку с помощью свойства list-style я применил два свойства, отвечающих за оформление списков, указав через пробел только значения свойств.
  • upper-roman - пункты списка обозначены большими римскими цифрами.
  • inside - цифры расположены внутри списка.

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

CSS по шагам
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

Все cвойства CSS
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта