Подписка
Email
Fb
RSS
Twitter
Email

Видео уроки CSS. Часть 6

Доброго времени суток, сегодня очередной урок CSS от сайта DenWeb.Ru!

Сегодня займемся оформлением внешнего вида такого часто применяемого на веб страницах элемента, как списки.

Смотрим видео:

Разберемся с основными тремя свойствами:

  1. list-style-type (определяет внешний вид маркера или нумератора);
  2. list-style-image (определяет пользовательское изображение маркера);
  3. list-style-position (определяет положение маркеров относительно блока).

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

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

  • disс - закрашенный кружок.
  • circle - не закрашенный кружок.
  • square - закрашенный квадрат.

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

  • decimal — арабские числа.
  • lower-roman - строчные римские цифры.
  • upper-roman - прописные римские цифры.
  • lower-alpha - строчные латинские буквы.

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

В качестве значения указывается путь к изображению-маркеру:
list-style-image:url(img/list_marker.gif);

Свойство list-style-position.

Может иметь значения:

  • inside — внутри блока;
  • outside — снаружи блока.

Существует сокращенная запись:

#list1 {
	list-style:square url(list_marker.gif) inside;
}

В данном случае к списку с идентификатором list1 применено в качестве маркеров изображение list_marker.gif, при его отсутствии маркеры будут квадратной формы, а так же они расположены внутри блока.

Вы можете оставить комментарий.

15 комментариев к записи “Видео уроки CSS. Часть 6”

  1. Спасибо, полезный урок! А сайты не подскажете, где можно выбрать и скачать различные маркеры?

  2. Костя:

    Можно ли к  каждому пункту списка приделать свой маркер в виде картинки (логотипа)?

  3. Олег:

    Подскажите сайт где можно скачать маркеры для проверки свойства

    list-style-image

  4. Тут описка не disk а disc Для маркированных списков:disk — закрашенный кружок.

  5. Максим:

    А как добавить свою картинку нумерованному списку ?В смысле если-бы не я сам составлял список а посторонний человек на сайте (Не в html коде) и потом вместо 1,2,3,4,5,6 и далее отображались мною заданные картинки ?

  6. Никита:

    Ден мне кажется что всё это можно проделать в html документе.

    • 'Это нужно делать в css. Посмотрите курс верстки сайта — там я показал, как нужно верстать. Что оставлять в html, что в css.

  7. Влад:

    Ден как создать такой список список тест тест 1  тест 2   тест 3

  8. Влад:

    fotky.com.ua/public/view/full/52793 вот фото как мне сделать такой список

  9. ARMenian:

    у меня не получается, ПОМОГИТЕ Пожалуйста <ul id = «list1»><li>ARM </li><li>MENIA </li></ul>  а в CSS#list1 {list-style-position:inside;но ничего не происходит. Помогите

    • Владислав:

      По-моему всё дело в том, что вы поставили лишний пробел между id= и "В  CSS это будет выглядеть так:: #list1 {    list-style-position:inside;}

  10. Екатерина:

    Прошу прощения, но не верно употреблен термин десятичные числа, т.к. это дроби и имеют вид 1,2; 5,9; в данном случае, а числа от 1 до 10 называются арабскими.

Оставить комментарий

Spam Protection by WP-SpamFree

Яндекс.Метрика