Главная | Регистрация | Вход | RSS | Вторник, 19.03.2024, 06:33 | |||||||||||||||||
КАК СОЗДАТЬ СВОЙ САЙТ | ||||||||||||||||||
Урок "6"Списки в CSSВ этом уроке мы рассмотрим основные свойства CSS , отвечающие за внешний вид списков. Их совсем чуть-чуть, так что урок будет коротким, но полезным! Запомните: Все эти свойства универсальны, т.е. могут применяться как к упорядоченным спискам, так и к неупорядоченным. В этом то и прикол CSS , что можно из неупорядоченного списка, сделать упорядоченный и наоборот :)
Свойство LIST-STYLE-TYPE Позволяет определять вид маркера элементов списка. Это могут быть цифры, буквы, квадратики, кружочки и др. Ниже приведены основные значения этого свойства:
Переделаем, для прикола, упорядоченный список в неупорядоченный, т.е. элементу OL( упорядоченый список) напишем decimal, а элементу UL(неупорядоченный) тип upper-roman; ol {list-style-type:square;} Результат налицо! если не верите, посмотрите исходный html код примера:) Свойство LIST-STYLE-POSITION Это свойство определяет положение маркера. Может принимать два значения:
Т.е. если мысленно обвести прямоугольником основной блок списка, получится примерно следующее: Только учтите, это свойство уже устарело, и сейчас, в новых версиях браузеров может уже и не работать!
Свойство LIST-STYLE-IMAGE Это наверное самое интересное свойство в списках. Оно позволяет поставить вместо маркера любое изображение. В качестве значения указывается ключевое слово url и затем в круглых скобках путь к изображению. В некоторых устаревших версиях браузеров, работает неккоректно. ul {list-style-image: url(galka.gif);} Не забывайте, что url(galka.gif) означает что изображение galka.gif лежит в той же папке, где и css -файл. Если у вас изображение не там, соответственно и путь указывайте другой! Ну вот и все по спискам! теперь Вам осталось попрактиковаться, и можете переходить к следующему уроку.
См. также Следующий - Урок 7: Ссылки в CSS |
|