Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31


Чувашия-это моя Россия

Использование CSS в списках.

(продолжение)

Положение маркера.

По умолчанию маркеры расположены вне зоны содержимого списочных элементов и обычно отображаются как своеобразные выступы. Разместить маркер в зону содержимого элемента позволяет свойство list-style-position.

list-style-position. Значения:

                          inside
                          outside
                          inherit

Начальное значение: outside Применимо: К элементам со значением display, равным list-item (в XHTML это ul, ol и li). Наследуется: Да.

Пунктирные линии лишь призваны показать границы зон содержимого элементов и в браузере видно не будет:

                          li.one {
                               list-style-position: outside;
                               }
                               
                          li.two {
                               list-style-position:	inside; 
                               }
                 

                   ♦ lorem		* bremi
                   * jpsim:		» ipsumj
                   ♦ jdobr		• dolor;
                   ♦ jsit		* sit
                   ♦ amet		* amet 1

Ничего больше со свойством list-style-position сделать невозможно. Оно не позволяет авторам документов точно указывать расстояние или позицию маркера относительно элемента.

Создание собственных маркеров.

Одной из превосходных возможностей CSS при работе со списками является способность использовать в роли маркеров любые изображения. Значения list-style-image:

                            uri
                            none
                            inherit
                            

Начальное значение: none. Применимо: К элементам со значением display, равным list-item (в XHTML это ul, ol и li). Наследуется: Да.

Этот пример показывает формат записи URL изображения-маркера. На случай, если изображение не загрузится или агент не сможет интерпретировать list-style-image, свойство list-style-type для подстраховки установлено в disc:

                            ul { 
                               list-style-image: url(../fon/065.gif);
                               list-style-type: disc; 
                               list-style-position: outside;
                                }

He забывайте, что URL всегда трактуется относительно стилевой таблицы, будь она встроенной в документ или, как .css-файл на сервере, внешней. Во избежание ошибок убедитесь, что относительные URL-ссылки корректны, или пользуйтесь абсолютными.

Свойство-сокращение list-style при создании бесплатного сайта.

Три свойства списка: тип, положение, а также изображение-маркер можно объединить в свойство сокращение list-style и значения:

                     list-style-type
                     list-style-image
                     list-style-position
                     inherit
Применимо: К элементам со значением display, равным list-item (в HTML это ul, ol и li). Наследуется: Да.

Значения данных свойств можно указывать в произвольном порядке, при этом любые свойства можно опускать вообще. Не забывайте, что не указанные в сокращении свойства принимаются равными своим значениям по умолчанию. Будьте внимательны, дабы неосторожно не подменить описания list-style, сделанные в таблице стилей до этого. Каждый из нижеследующих примеров list-style функционально эквивалентен отдельным правилам.

                    ul {
                         list-style: url(../fon/065.gif) disc outside;
                         }
                         
                    ul {
                         list-style:	disc outside url(../fon/065.gif); 
                         }
                         
                    ul {
                         list-style: url(../fon/065.gif) disc;
                         }

seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно    назад    дальше     вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: