1. Bitcoin адрес для пожертвований: 1dapfB97R98wg8J3hknWpMDJ7P61CWjNn
    Скрыть объявление
  2. Участникам форума доступны: Skype, WhatsApp и Telegram конференции. Присоединяйтесь!
  3. Наши основные группы и каналы: VK, Twitter. Подписывайтесь!
  4. Мы открыли музыкальный клуб! Заходи и ставь свое музло!
  5. Скрыть объявление

Списки в CSS

Тема в разделе "Архив", создана пользователем WTBG, 29 июл 2008.

  1. WTBG

    WTBG Старейшина

    Репутация

    0 / 0


    Генерируемое содержимое и списки

    С помощью этих свойств выполняется управление, как стилем элементов списков, так и установкой нумерации и маркировки. С их помощью можно сделать так, чтобы, например, список начинался с 7-го номера, и каждый следующий номер увеличивался на 2.


    list-style-type

    Определяет стиль маркеров или номеров списка.

    Значение:
    • disc - маркер в виде диска (по умолчанию).
    • circle - маркер в виде окружности.
    • square - маркер в виде квадрата.
    • decimal - списки, нумерованные с помощью десятичных чисел, начиная с 1,
    • decimal-leading-zero - списки, нумерованные с помощью десятичных чисел с ведущими нулями, например 01, 02, 03 и т.д.
    • lower-roman - списки, нумерованные с помощью строчных римских цифр.
    • upper-roman - списки, нумерованные с помощью прописных римских цифр
    • hebrew - списки, нумерованные с помощью цифр иврита.
    • georgian - списки, нумерованные с помощью грузинских цифр.
    • armenian - списки, нумерованные с помощью армянских цифр.
    • сjk-ideographic - списки, нумерованные с помощью идеограмм,
    • lower-latin, lower-alpha - использование строчных ASCII-символов.
    • upper-latin, upper-alpha - использование прописных ASCII-символов.
    • lower-greek - использование строчных греческих букв.
    • hiragana - использование букв японской азбуки хирагана.
    • hiragdna-iroha - использование букв японской азбуки хирагана ироха,
    • katakana-iroha - использование буке японской азбуки катакана ироха.
    • none - нет ни маркеров ни номеров.
    • inherit - принимается значение родительского элемента.
    Код (Text):
    1. ol {list-style: upper-alpha}

    list-style-image

    Определяет изображение, которое будет использовано в качестве маркера списка.

    Значение:
    • none - изображение, предназначенное быть маркером, не установлено (по умолчанию).
    • любой соответствующий стандарту URL - URL к изображению, предназначенному быть маркером.
    • inherit - принимается значение родительского элемента.
    Код (Text):
    1. ul {list-style-image: url("bullet3.gif")}Примеры: [1]

    marker-offset

    Определяет расстояние между маркером и текстом в списке

    Значение:
    • auto - пробел устанавливается браузером (по умолчанию).
    • любая соответствующая стандартам длина - пробел между маркером и текстом.
    • inherit - принимается значение родительского элемента.
    Код (Text):
    1. h1 {marker-offset: 12px}

    list-style-position

    Определяет местоположение маркера элемента списка.

    Значение:
    • inside - маркер внутри элемента.
    • outside - маркер вне элемента (по умолчанию).
    • inherit - принимается значение родительского элемента.
    Код (Text):
    1. ul {llist-style-position: inside}

    list-style

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

    Значение:
    • list-style-type - вид маркера.
    • list-style-position - положение маркера.
    • list-style-image - изображение для маркера.
    • inherit - принимается значение родительского элемента.
    Код (Text):
    1. ul {list-style: circle inside url("bullet4,gif")}

    content

    Применяется вместе с псевдоэлементами :before (перед) и :after (после), чтобы сгенерировать содержимое. Не поддерживается IE.

    Значение:
    • любая соответствующая стандартам последовательность символов - последовательность, которая должна появиться перед элементом или после него.
    • любой соответствующий стандарту URL - URL к внешнему файлу; URL должен появиться перед элементом или после него.
    • counter() - определение счетчика с именем для вставки значения, управляемого свойствами counter-increment и counter-reset.
    • open-quote, close-quote - возможность использования кавычек. Применяются вместе со свойством quotes.
    • no-open-quote, no-close-quote - отсутствие кавычек.
    • attr() - вставка значения атрибута для элемента.
    • inherit - принимается значение родительского элемента.
    Код (Text):
    1. pre:after {content: "спасибо и спокойной ночи."}

    quotes

    Определяет пары кавычек для использования на каждом уровне вложенности. Не поддерживается IE.

    Значение:
    • первая соответствующая стандартам последовательность символов - два символа, которые должны использоваться в качестве самой внешней пары кавычек.
    • вторая соответствующая стандартам последовательность символов - два символа, которые должны использоваться в качестве внутренней пары кавычек.
    • none - отсутствие кавычек.
    • inherit - принимается значение родительского элемента.
    Код (Text):
    1. q {quotes: '"' '"' '<' '>'}

    counter-increment

    Увеличивает значение определенного счетчика.

    Значение:
    • none - значение счетчика не возрастает (по умолчанию).
    • имя счетчика и соответствующее стандартам число - - идентификация счетчика и прием целого значения, на которое счетчик будет каждый раз увеличиваться. Такими значениями могут быть и отрицательные целые числа.
    • inherit - принимается значение родительского элемента.
    Код (Text):
    1. h1 {counter-increment: MyCounter 2}

    counter-reset

    Сброс значения определенного счетчика.

    Значение:
    • none - значение счетчика не сбрасывается (по умолчанию).
    • имя счетчика и соответствующее стандартам число - идентификация счетчика и прием целого значения, которое присваивается счетчику при сбросе. Такими значениями могут быть и отрицательные целые числа.
    • inherit - принимается значение родительского элемента.
    Код (Text):
    1. h1 {counter-reset: MyCounter 2}

    Пожалуйста, войдите или зарегистрируйтесь для просмотра скрытого текста.



  2. Злой заяц

    Злой заяц Новичок

    Репутация

    24 / 7


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