Rambler's Top100
Четверг, 22.06.2017, 23:27

КАК СОЗДАТЬ СВОЙ САЙТ

Урок "6"

Списки в CSS

В этом уроке мы рассмотрим основные свойства CSS , отвечающие за внешний вид списков. Их совсем чуть-чуть, так что урок будет коротким, но полезным!

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

 

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

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

  • disk - маркер в виде закрашенного круга;
  • circle - маркер в виде незакрашенного круга;
  • square - маркер в виде закрашенного квадрата;

  • decimal - обычные десятичные числа , например 1,2,3,4,5 и т. д. ;
  • upper-roman - большие римские цифры, типа I, II, III, IV, V и т.д. ;
  • lower-roman - маленькие римские цифры типа i, ii, iii, iv, v и т.д.
  • upper-alpha - большие буквы A, B, C, D, E и так далее;
  • lower-alpha - малые буквы типа a,b,c,d,e и т.д.;
  • none - маркер списка отсутсвует;

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

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

Результат налицо! если не верите, посмотрите исходный html код примера:)

 

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

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

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

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

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

 

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

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

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

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

Ну вот и все по спискам! теперь Вам осталось попрактиковаться, и можете переходить к следующему уроку.

 

 

См. также

Следующий   - Урок 7: Ссылки в CSS
Предыдущий - Урок 5: Текст в CSS

Google +1
Форма входа
Наш опрос
Оцените мой сайт
Всего ответов: 80
Поиск
Календарь
«  Июнь 2017  »
ПнВтСрЧтПтСбВс
   1234
567891011
12131415161718
19202122232425
2627282930
Архив записей
Друзья сайта
  • Обновление навигаторов
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
  • Статистика

    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0