Студопедия.Орг Главная | Случайная страница | Контакты | Мы поможем в написании вашей работы!  
 

Списки в CSS



Рассмотрим основные свойства CSS, отвечающие за внешний вид списков.

Ø list-style-type

Ø list-style-position

Ø list-style-image

Ø list-style

Запомните: Все эти свойства универсальны, т.е. могут применяться как к упорядоченным спискам, так и к неупорядоченным. Используя CSS, можно из неупорядоченного списка, сделать упорядоченный и наоборот:)

Свойство LIST-STYLE-TYPE

Позволяет определять вид маркера элементов списка. Это могут быть цифры, буквы, квадратики, кружочки и др. Ниже приведены основные значения этого свойства:

Переделаем упорядоченный список в неупорядоченный, т.е. элементу OL(упорядоченый список) напишем square, а элементу UL(неупорядоченный) тип upper-roman;

ol {list-style-type:square;} ul {list-style-type: upper-roman;}  

Свойство LIST-STYLE-POSITION

Это свойство определяет положение маркера. Может принимать два значения:

  • outside - за пределами основного блока элемента списка;
  • inside - внутри основного блока списка.

Т.е. если мысленно обвести прямоугольником основной блок списка, получится примерно следующее:

Только учтите, это свойство уже устарело, и сейчас, в новых версиях браузеров может уже и не работать!

Свойство LIST-STYLE-IMAGE

Это самое интересное свойство в списках. Оно позволяет поставить вместо маркера любое изображение. В качестве значения указывается ключевое слово url и затем в круглых скобках путь к изображению. В некоторых устаревших версиях браузеров работает неккоректно.

ul {list-style-image: url(galka.gif);}  

Не забывайте, что url(galka.gif) означает что изображение galka.gif лежит в той же папке, где и css -файл. Если у вас изображение не там, соответственно и путь указывайте другой!

Сокращенная форма LIST-STYLE

Перечисленные выше свойства можно записать более компактно. Для этого существует сокращенный вариант list -style;

Такой вариант из трех строк:

ul {
list-style-type:square;
list-style-position: inside;
list-style-image: url(galka.gif);
}

Рациональнее заменить таким:

ul {list-style:square inside url(galka.gif) }

Свойства указываются через пробел и последовательность в данном случае роли не играет. Если какое-либо свойство не указать, ему присвоится значение по умолчанию.





Дата публикования: 2014-11-03; Прочитано: 274 | Нарушение авторского права страницы | Мы поможем в написании вашей работы!



studopedia.org - Студопедия.Орг - 2014-2024 год. Студопедия не является автором материалов, которые размещены. Но предоставляет возможность бесплатного использования (0.009 с)...