• Главная
  •  > 
  • Советы
  •  > 
  • Красивый маркированный список в css. CSS Design: Укрощение списков

Красивый маркированный список в css. CSS Design: Укрощение списков

С помощью CSS можно создать маркированные и нумерованные списки, а также использовать в качестве маркера подходящее изображение.

В табл. 1 перечислены свойства элементов, предназначенных для создания и изменения списков.

Табл. 1. Свойства CSS для управления видом списка
Свойство Значение Описание Пример
list-style-type disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none 		Вид маркера. Первые три используются для создания маркированного списка, а остальные — для нумерованного. LI {list-style-type: circle}
LI {list-style-type: upper-alpha}
list-style-image none
URL 		Устанавливает символом маркера любую картинку. LI {list-style-image: url(check.gif)}
list-style-position outside
inside 		Выбор положения маркера относительно блока строк текста. LI {list-style-position: inside}
list-style Универсальное свойство, включает одновременно все вышеперечисленные свойства.

Поскольку тег

  • наследует стилевые свойства тега
      или
        , который выступает в качестве его родителя, то можно устанавливать стиль как для селектора UL , так и для селектора LI . Так, в примере 1 используется селектор UL , для него и задаются стилевые параметры.

        Пример 1. Создание маркированного списка

        Списки

        Результат данного примера показан на рис. 1. Используются квадратные маркеры и их внешнее размещение относительно текста.

        Рис. 1. Вид списка, измененого с помощью стилей

        Чтобы установить свое собственное изображение в качестве маркера применяется свойство list-style-image , как показано в примере 2.

        Пример 2. Использование изображений в качестве маркера

        Списки

        • Заголовок должен быть короче трех строк.
        • При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие.
        • Перед использованием специального термина или слова, решите, будет ли оно понятно читателю.

        Результат данного примера показан на рис. 2. В качестве маркеров используется маленькая картинка.

        Рис. 2. Изображения в качестве маркеров

        Некоторые примеры создания различных списков приведен в табл. 2.

        Табл. 2. Возможные виды списков
        Код HTML Пример
        		• Что следует учитывать при тестировании сайта:
        • работоспособность всех ссылок
        • поддержку разных браузеров
        • читабельность текста
        		• Что следует учитывать при тестировании сайта:
        • работоспособность всех ссылок
        • поддержку разных браузеров
        • читабельность текста

        • Нумерованный список с арабскими цифрами:

        1. первый
        2. второй
        3. третий

        • Нумерованный список со строчными римскими цифрами:

        1. первый
        2. второй
        3. третий

        • Нумерованный список с заглавными римскими цифрами:

        1. первый
        2. второй
        3. третий

        • Нумерованный список со строчными буквами латинского алфавита:

        1. первый
        2. второй
        3. третий

        • Нумерованный список с заглавными буквами латинского алфавита:

        1. первый
        2. второй
        3. третий

        Здравствуйте, уважаемые читатели блога сайт. Сегодня будет очередная статья о свойствах каскадных таблиц стилей. В ней речь пойдет об оформлении с помощью правил CSS.

        Вообще списки среди блочных элементов стоят особняком. Это связано с тем, что они включают в себя маркеры и нумерацию, которые расставляет сам браузер.

        Свойство List style — оформление списка на html странице

        В языке CSS существует три свойства начинающихся с list-style, которые отвечают за оформление маркированных и нумерованных списков. Плюс еще есть сборное правило list-style, позволяющее сократить количество кода.

        Все эти свойства допустимо использовать как для html элементов li, так и для элементов ul и ol. Единственное отличие, если правила прописать для конкретного значения списка li, то оно только для него и применится. А если эти же css правила прописать для контейнеров ul или ul, то они применятся для всех элементов li заключенных в этих контейнерах.

        Начнем с атрибута list-style-type , который задает вид маркеров или нумерации у пунктов списка:

        list-style-type: disc|circle|square|decimal|decimal-leading-zero|lower-roman|upper-roman|lower-greek|lower-alpha|lower-latin|upper-alpha|upper-latin|armenian|georgian|none|inherit

        Как видно, свойство list-style-type имеет много доступных значений, которые могут задавать как вид маркера, так и различные виды нумерации.

        • disc - маркер в виде черного кружка (значение по умолчанию для маркированных списков).
        • circle - маркер в виде не закрашенного кружка.
        • square - маркер в виде квадратика. Он может быть светлым или темным, в зависимости от браузера.
        • decimal - нумерация арабскими цифрами (значение по умолчанию для нумерованных списков).
        • decimal-leading-zero - нумерация арабскими цифрами от 01 до 99 с начальным нулем.
        • lower-roman - нумерация маленькими римскими цифрами.
        • upper-roman - нумерация большими римскими цифрами.
        • lower-greek - нумерация маленькими греческими буквами.
        • lower-alpha и lower-latin - нумерация маленькими латинскими буквами.
        • upper-alpha и upper-latin - нумерация большими латинскими буквами.
        • armenian - нумерация традиционными армянскими цифрами.
        • georgian - нумерация традиционными грузинскими цифрами.
        • none - маркерация и нумерация осуществляться вообще не будет.

        Так примерно будут выглядеть элементы списка в браузере с различными значениями list-style-type:

        При использовании CSS стилей не важно какой элемент (OL или UL) используется для создания списка. OL и UL отличаются только поведением по умолчанию и с помощью свойства list-style-type вы можете легко превратить один вид списка в другой.

        Атрибут стиля list-style-image позволяет задавать в качестве маркера пунктов списка графическое изображение . При использовании атрибута list-style-image значение атрибута list-style-type игнорируется:

        list-style-image: none|<интернет-адрес файла изображения>|inherit

        Значение none убирает маркер изображение и устанавливает обычный, не графический. Это поведение по умолчанию.

        При указании адреса файла изображения, на место маркера будет вставлена картинка. Как и при использовании , в качестве адреса картинки можно использовать как абсолютные так и относительные адреса. В случае если браузер не сможет подгрузить изображение, то будет использоваться маркер или нумерация по умолчанию или то, что прописано в свойстве в list-style-type.

        Пример списка с картинкой в качестве маркера:


        • первый пункт списка;

        • второй пункт списка;

        • третий пункт списка.

        А вот как это выглядит:

        • первый пункт списка;
        • второй пункт списка;
        • третий пункт списка.

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

        И последнее свойство CSS из серии list-style — list-style-position, которое позволяет указать местоположение маркера или нумерации в пункте списка. В качестве значения может быть два варианта:

        list-style-position: inside|outside

        В случае значения inside маркер или нумерация помещается как бы внутри списка, а в случае outside за пределами элементов li. По умолчанию используется значение outside и маркер выносится за пределы.

        Пример списка с различными значениями list-style-position:

        • в первом пункте все по умолчанию;
        • во втором пункте list-style-position установлен в inside. В этом случае, обратите внимание, вторая строка размещается на одном уровне с маркером;
        • в этом пункте list-style-position равен outside.

        Сборное CSS правило list-style

        Следующее свойство CSS list-style является сборным для оформления списков. Оно позволяет записать все три рассмотренных выше CSS правила в одно единое. Порядок указания значений в нем может быть любым и параметры, которые вы не зададите в list-style браузер возьмет принятые по умолчанию.

        Разделять значения в сборном правиле list-style следует пробелами:

        list-style: list-style-type list-style-image list-style-position;

        Реальное CSS правило для оформления списков может выглядеть примерно вот так:

        list-style: circle url (http://сайт/images/marker.png) outside;

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

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

        list-style: none;

        Тоже самое можно сделать используя свойство list-style-type:

        list-style-type: none;

        На этом рассказ об оформлении html списков при помощи каскадных таблиц стилей я закончу. Чтобы узнать о других CSS свойствах вы можете почитать статьи из раздела « » и не забудьте подписаться на обновления блога . До новых встреч!

        Cписки HTML (

          для нумерованных ,
            для ненумерованных списков) используются очень часто. В этом уроке мы пойдем дальше создания обычных списков, и покажем вам 8 разных эффектных способов оформления списков HTML, используя CSS. Мы будем использовать чистый CSS, чтобы скучный список выглядел здорово и даже приобрел дополнительную функциональность.

            Вот как выглядят стандартные нумерованный и ненумерованный списки:

            1. Элемент нумерованного списка #1
            2. Элемент нумерованного списка #2
            3. Элемент нумерованного списка #3
            • Элемент ненумерованного списка #1
            • Элемент ненумерованного списка #2
            • Элемент ненумерованного списка #3

            Посмотрите пример, чтобы увидеть, что мы создадим.

            Выглядит гораздо лучше, не правда ли? И Вы сможете создать все это, просто добавив немного кода CSS. Хотите знать, как это сделать? Приступим!

            Список №1: Простое меню

            Наиболее часто списки на веб-сайтах используются, чтобы создать меню. В этом примере показан код, который создаст простое, минималистичное, но в то же время элегантное меню.

            HTML

            CSS

            /* Список #1 */ #list1 { } #list1 ul { list-style:none ; text-align:center ; border-top:1px solid #eee ; border-bottom:1px solid #eee ; padding:10px 0 ; } #list1 ul li { display:inline ; text-transform:uppercase ; padding:0 10px ; letter-spacing:10px ; } #list1 ul li a { text-decoration:none ; color :#eee ; } #list1 ul li a:hover { text-decoration:underline ; }

            Список №2: Другой шрифт для цифр

            Сложность со списками заключается в том, что все в списке должно выглядеть одинаково. Числа в списке должны иметь тот же цвет и шрифт, что и текст.

            Но добавив дополнительный элемент list-item, Вы сможете обойти эти ограничения и создать очень необычный список. Вот как это сделать:

            HTML

            1. The Netherlands is a country in ...

              2.

            2. The United States of America is a federal constitutional ...

              3.

            3. The Philippines officially known as the Republic ...

              4.

            4. The United Kingdom of Great Britain and ...

              5.

            CSS

            /* Список #2 */ #list2 { width:320px ; } #list2 ol { font-style:italic ; font-family:Georgia , Times, serif ; font-size:24px ; color :#bfe1f1 ; } #list2 ol li { } #list2 ol li p { padding:8px ; font-style:normal ; font-family:Arial ; font-size:13px ; color :#eee ; border-left : 1px solid #999 ; } #list2 ol li p em { display:block ; }

            Список №3: Список с указателями

            Вы можете изменить стиль указателей для ненумерованного списка на некоторые встроенные виды, но Вы также можете изменить его и на изображение. Этот способ сделает список еще привлекательней. Давайте рассмотрим, как это сделать.

            HTML

            • Java
              •
            • .NET
              •
            • C++
              •
            • PHP
              •

            CSS

            /* Список #3 */ #list3 { } #list3 ul { list-style-image : url ("../images/arrow.png" ) ; color :#eee ; font-size:18px ; } #list3 ul li { line-height:30px ; }

            Список №4: Список в стиле iPhone

            Этот список взят из статьи «Приложение «Контакты» iPhone с использованием CSS и Jquery ». Он выглядит, как список из приложения «Контакты» iPhone. Еще немного стиля для Вашего веб-сайта.

            HTML

            CSS

            /* Список #4 */ #list4 { width:320px ; font-family:Georgia , Times, serif ; font-size:15px ; } #list4 ul { list-style : none ; } #list4 ul li { } #list4 ul li a { display:block ; text-decoration:none ; color :#000000 ; background-color :#FFFFFF ; line-height:30px ; border-bottom-style:solid ; border-bottom-width:1px ; border-bottom-color :#CCCCCC ; padding-left:10px ; cursor:pointer ; } #list4 ul li a:hover { color :#FFFFFF ; background-image:url (../images/hover.png ) ; background-repeat:repeat-x ; } #list4 ul li a strong { margin-right:10px ; }

            Список №5: Древовидные списки

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

            HTML

            1. Google
              1. Picasa
                2.
              2. Feedburner
                3.
              3. Youtube
                4.
            2. Microsoft
              1. Corel Corporation
                2.
              2. Zignals
                3.
              3. ByteTaxi
                4.
            3. Yahoo!
              1. Xoopit
                2.
              2. BuzzTracker
                3.
              3. MyBlogLog
                4.

            CSS

            /* Список #5 */ #list5 { color :#eee ; } #list5 ol { font-size:18px ; } #list5 ol li { } #list5 ol li ol { list-style-image : url ("../images/nested.png" ) ; padding:5px 0 5px 18px ; font-size:15px ; } #list5 ol li ol li { color :#bfe1f1 ; height:15px ; margin-left:10px ; }

            Список №6: Римские цифры и многострочный текст

            По умолчанию нумерованный список использует арабские цифры (1, 2, 3, 4 и т. д.) для нумерации. Изменяя значение свойства list-style-type, Вы можете выбрать другие стили нумерации, например, римские цифры.

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

            HTML

            1. Lorem ipsum dolor sit amet, ...
              Fusce sit amet ...
              2.
            2. Aenean placerat lectus tristique...
              Vivamus interdum ...
              3.
            3. Mauris eget sapien arcu, vitae...
              Phasellus neque risus...
              4.
            4. Phasellus feugiat lacus ...
              Duis rhoncus ...
              5.

            CSS

            /* Список #6 */ #list6 { font-family : "Trebuchet MS" , "Lucida Grande" , Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif ; } #list6 ol { list-style-type : upper-roman ; color :#eee ; font-size:14px ; list-style-position : inside ; } #list6 ol li { }

            Список №7: Разделенный запятыми и расположенный в одну строку список

            Списки наиболее часто используются, чтобы показать элементы один под другим. Но что, если Вы хотите создать расположенный в одну строку список? Вы можете добиться этого, установив значение свойства display в inline. Но если Вы используете текст, Вы можете предпочесть создать разделенный запятыми список. Как добиться этого? С помощью псевдокласса:after.

            HTML

            • First inline item
              •
            • Second inline item
              •
            • Third inline item
              •
            • Fourth inline item
              •

            CSS

            /* Список #7 */ #list7 { } #list7 ul { color :#eee ; font-size:18px ; font-family:Georgia , Times, serif ; } #list7 ul li { display : inline ; } #list7 ul li:after { content : ", " ; } #list7 ul li.last :after { content : ". " ; }

            Список №8: Поворачивающееся меню

            Вот последний способ, который работает с CSS3 и поддерживается браузерами Firefox, Safari и Chrome. Когда Вы наводите указатель мыши на блочный элемент, он перейдет в активное повернутое состояние. Этот способ может быть не очень полезным, но на него приятно посмотреть.

          • About
          • Contact

    • CSS

    /* Список #8 */ #list8 { } #list8 ul { list-style:none ; } #list8 ul li { font-family:Georgia ,serif ,Times; font-size:18px ; } #list8 ul li a { display:block ; width:300px ; height:28px ; background-color :#333 ; border-left:5px solid #222 ; border-right:5px solid #222 ; padding-left:10px ; text-decoration:none ; color :#bfe1f1 ; } #list8 ul li a:hover { -moz-transform:rotate (-5deg) ; -moz-box-shadow:10px 10px 20px #000000 ; -webkit-transform:rotate (-5deg) ; -webkit-box-shadow:10px 10px 20px #000000 ; transform:rotate (-5deg) ; box-shadow:10px 10px 20px #000000 ; }

    Заключение

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

    Перевод — Дежурка

    CSS дает возможность создавать маркированные и нумерованные списки, оформлять списки маркеров изображением, а также, если нужно, вообще убирать любые обозначения маркированного списка.

    CSS стили списка маркера.

    list-style-type

    list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none ;

    Значение :

    disk – маркированный список в виде закрашенного кружка

    circle – маркированный список в виде не закрашенного кружка

    square – маркированный список в виде закрашенного квадратика

    decimal – нумерованный список арабскими числами (1,2,3 и т.д.)

    upper-roman – нумерованный список большими римскими цифрами (I,II,III,IV и т.д.)

    lower-roman – нумерованный список маленькими римскими цифрами (i,ii,iii,iv и т.д.)

    upper-alpha – нумерованный список заглавными буквами (A,B,C и т.д.)

    lower-alpha – нумерованный список строчными буквами (a,b,c и т. д.)

    none – без маркера.

    Пример :

    Свойства списков в css

    • Верь в лучшее, ожидай худшее.
    • Жизнь - это болезнь, со смертельным исходом.
    • Никогда не говори никогда.

    Результат :

    Бывают такие случаи, когда отображения маркера в списке нужно убрать. Для этого в коде CSS пропишите

    list-style-type: none;

    Пример :

    Свойства списков в css

    • Верь в лучшее, ожидай худшее.
    • Никогда не говори никогда.

    Результат :

    Можно обычные маркеры в списке заменить собственными изображениями. Это можно сделать с помощью свойства list-style-image .

    list-style-image

    list-style-image: url(картинка.png);

    Пример :

    Свойства списков в css

    • Верь в лучшее, ожидай худшее.
    • Жизнь - это болезнь со смертельным исходом.
    • Никогда не говори никогда.

    Результат :

    Можно также задать маркированному списку расстояние от текста. Это можно сделать с помощью свойства padding-left для селектора li.

    Пример :

    Свойства списков в css

    • Верь в лучшее, ожидай худшее.
    • Жизнь - это болезнь со смертельным исходом.
    • Никогда не говори никогда.

    Результат :

    Следующая задача состоит в том, чтобы изменить цвет маркера, но при этом не изменять цвет текста. Как это возможно сделать? Цвет маркера можно изменить, если к тесту добавить тег .
    Это выглядит вот так:

  • текст

    • Пример :

    Свойства списков в css

    • Верь в лучшее, ожидай худшее.
    • Жизнь - это болезнь со смертельным исходом.
    • Никогда не говори никогда.

    Результат :

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

    Пример :

    Свойства списков в css

    • Верь в лучшее, ожидай худшее.Пункт 1
    • Жизнь - это болезнь со смертельным исходом.Пункт 2
    • Никогда не говори никогда.Пункт 3
    • Это все что я знал. Пункт 4

    Результат :

    Вот и подошла к завершению тема .

    Помню как в июле 1999 года я просвещал людей в мейл-листах о прелестях стилевой вёрстки. С тех пор мало что поменялось.

    Впрочем, кое-что поменялось. Поменялся мой взгляд на CSS и на (X)HTML, который выступает в роли каркаса для стилей. Например, я обнаружил, что большинство страниц содержат панель навигации. Чаще всего она оформляются как простая текстовая строка со ссылками, разделенными тегами

    или

    Структурно же они представляют собой списки ссылок, и следовательно должны оформляться как таковые.

    Причина, по которой мы не оформляем их как списки, состоит в том, что нам не очень хочется перед каждой ссылкой в меню видеть маркер. Ранее я рассказал о некоторых приемах верстки страниц с помощью CSS. В одном из тех приемов мы научились выводить списки в строку, а не вертикально.

    В данной же статье я покажу, как с помощью CSS можно укротить эти неповоротливые и неуклюжие списки. Хватит им беспризорно шататься по вашим веб-страницам. Настало ваше время командовать им, как себя вести.

    Готовим арену

    В качестве предмета дрессировки я выбрал простые ненумерованные списки. Все упомянутые тут правила CSS можно применить и к нумерованным спискам с тем же результатом. Во всех примерах (кроме специально оговоренных случаев) используется следующий список:

    • Item 1
    • Item 2
    • Item 3
    • Item 4
    • Item 5 сделаем этот пункт немного длиннее, чтобы он переходил на следующую строку

    Каждый список просто помещен внутрь отдельного элемента

    , и поведение списка определяется с помощью этого DIV-а. Базовое правило, действующее на все DIV-ы, таково:

    Без каких-либо дополнительных стилевых правил, список в базовом DIV-е будет выглядеть так:

    Позиционирование

    Иногда для вашего дизайна отступ в списке принятый по умолчанию может оказаться слишком большим. Но изменение только свойства margin или padding для элемента

      срабатывает не для всех броузеров. Для того, чтобы список полностью передвинулся скажем влево, вам необходимо поменять оба свойства: и margin, и padding. Связано это с тем, что Internet Explorer и Opera создают левый отступ у списка с помощью левого margin, а Mozilla/Netscape используют для этого левый padding.

      В следующем примере свойствам margin-left и padding-left у элемента UL присвоено значение 0:

      Обратите внимание, что маркеры лежат за границей DIV-а. Если бы контейнером был не DIV, а документа, маркеры оказались бы за пределами окна броузера, т.е. пропали бы с глаз долой. Если вы хотите, чтобы маркеры лежали внутри границ DIV-а, вдоль левого его края, присвойте либо свойству left-padding либо свойству left-margin значение «1em».

      Маркеры

      Скажем, вам понадобился список с особыми маркерами. Как вы поступали раньше? Создавали таблицу, в одной колонке размещали gif-картинку маркера и смещали ее в ячейке вверх и вправо. В другой колонке размещали текст, который должен был бы находится в элементах

    • . Теперь CSS позволяет использовать изображение в качестве маркера. Если броузер не поддерживает эту функцию CSS (или не поддерживает вывод графики), будет использован маркер по умолчанию (либо тот, который вы укажите на этот случай).

      Стилевое правило выглядит так:

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

      А броузер покажет список так:

      Для тех броузеров, которые не поддерживают вывод графики, добавьте в правила следующую строчку:

      list-style-type: disc;

      Изображения, выбранное вами в качестве маркера, может «выползти» за границы списка. Чтобы этого не произошло, поместите изображение внутрь блока

    • . Для этого добавьте следующую строку:

      list-style-position: inside;

      Все три декларации можно объединить в одно краткое правило:

      ul { list-style: disc url(bullet.gif) inside; }

      что эквивалентно

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

      Список в результате будет выглядеть так:

      Бывает так, что у вас есть список, но вам не нужны маркеры, или вы хотите использовать в качестве маркера какой-то другой символ. Опять-таки CSS спешит к вам на помощь. Добавьте правило list-style: none; и сделайте элементы

    • «надвисающими». Всё правило целиком будет выглядеть так:

      ul { list-style: none; margin-left: 0; padding-left: 1em; text-indent: -1em; }

      Либо свойство левый padding, либо свойство левый margin должно иметь значение 0, а другое — значение 1em. Меняя это свойство вы можете подогнать размер отступа от вашего маркера до приемлемого. Отрицательное значение в свойстве text-indent приводит к тому, что первая строка каждого пункта списка сдвигается влево и «надвисает» над остальным текстом.

      Следующий наш список будет обычным, только в качестве маркера будет использован стандартный HML-символ, например », который соответствует закрывающей типографской кавычке: «.

      Здесь следует отметить, что Netscape6/7/Mozilla (и другие производные Gecko-броузеры), а также Opera умеют генерировать контент с помощью псевдо элемента:before из стандарта CSS2. Воспользуемся этой функцией и сгенерируем автоматически символ » или какой другой символ в качестве маркера. Таким образом нам не надо будет вписывать его вручную в каждый LI элемент. Если вы работает с броузером Opera или с семейством броузеров Gecko, нижеприведенный CSS создаст такой же список, что и предыдущий, при этом в сам список ничего дополнительно добавлять не нужно.

      #custom-gen ul li:before { content: "0BB 020"; }

      Свойству content может быть присвоена текстовая строка, URL или что-то другое, включая специальные символы. Если вы остановили свой выбор на символе типа », в свойстве надо прописать шестнадцатеричный код этого символа. У правой типографской кавычки это код 0BB (другой символ 020 — это пробел, добавлен из эстетических соображений). Конечный результат представлен ниже (смотрите броузером Opera или Mozilla/Netscape):

      Выстраиваем список в ряд

      Кто сказал, что списки должны идти вертикально и оформляться слева маркерами? К примеру вам нужен нумерованный список ссылок, но визуально вы хотите, чтобы этот список на странице выглядел как вертикальная панель навигации. Или скажем, вы хотите, чтобы ссылки располагались горизонтально вдоль верхнего края страницы.

      Это касается не только списка ссылок. Вам может понадобиться привести список несколько раз внутри абзаца (например, список книг). Структурно — это список, но раньше если бы вы такое сделали, этот список разорвал бы ваш абзац. CSS опять приходит к вам на помощь!

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

      Уже слышу крики: «Болван! Мы думали ты научишь нас, как помещать списки внутри абзаца, а не между двумя абзацами.»

      И на это я отвечу: «Ну да, вы правы. К сожалению (X)HTML не разрешает помещать списки внутрь абзаца. Однако с помощью стилей вы можете сделать вот что».

      Сначала, вот стилевые правила:

      #inline-list { border: 1px solid #000; margin: 2em; width: 80%; padding: 5px; font-family: Verdana, sans-serif; } #inline-list p { display: inline; } #inline-list ul, #inline-list li { display: inline; margin: 0; padding: 0; color: #339; font-weight: bold; }

      Весь код помещен в

      . В нем находится абзац, потом стандартный список UL, и за ним — еще один абзац. Список UL был отредактирован таким образом, чтобы после каждого пункта была запятая, а за последним пунктом шла точка.

      Результат выглядит так (список выделен синим цветом):

      Как и в примере выше с маркером мы можем с помощью CSS автоматически генерировать запятые и точки. Если ваши посетители пользуются только броузерами Opera и Gecko, вам не о чем беспокоиться. Стилевые правила будут выглядеть вот так:

      #inline-list-gen ul li:after { content: ", "; } #inline-list-gen ul li.last:after { content: ". "; }

      Здесь мы используем псевдо-элемент:after для добавления запятой в конце каждого пункта списка, а точку ставим с помощью класса class=»last». Результат будет таким (помните, он работает только в Opera или Mozilla/Netscape):

      Навигация

      Как я уже сказал в самом начале меню ссылок, которые мы видим на каждом сайте, должны быть оформлены как списки, чем они по сути и являются. Так как мы не хотим видеть этот список так, как его выводит броузер по умолчанию, воспользуемся CSS для внесения косметических изменений. Мы уже знаем, что списки можно специально выводить горизонтально (в одну строчку), а не только вертикально (как они выводятся по умолчанию). С помощью стилей маркеры можно убрать, а в ваших руках появляется широкий набор возможностей, как визуально отделить один пункт списка от другого.

      Вот примеры горизонтальных списков, помещенных в один и тот же базовый DIV со следующими правилами.

      Два примера ниже используют все тот же UL только без длинного текста в последнем пункте. Добавлен также дополнительный класс, который позволяет отдельно работать с одним из LI в списке.

      Границы

      Символ | часто используется для обозначения различных вариантов выбора. Вполне естественно использовать его в меню. Сымитируем этот символ с помощью границ у LI.

      #pipe ul { margin-left: 0; padding-left: 0; display: inline; } #pipe ul li { margin-left: 0; padding: 3px 15px; border-left: 1px solid #000; list-style: none; display: inline; } #pipe ul li.first { margin-left: 0; border-left: none; list-style: none; display: inline; }

      Правила можно изменить, чтобы придать списку вид закладок:

      #tabs ul { margin-left: 0; padding-left: 0; display: inline; } #tabs ul li { margin-left: 0; margin-bottom: 0; padding: 2px 15px 5px; border: 1px solid #000; list-style: none; display: inline; } #tabs ul li.here { border-bottom: 1px solid #ffc; list-style: none; display: inline; }

      Примечание: этот прием был предложен Ренделом Растом (Randal Rust), а затем его улучшили подписчики списка рассылки css-discuss

      Ссылки-цепочки

      Еще один тип ссылок, которые обычно располагаются горизонтально на веб-странице — это известные всем нам ссылки-цепочки (breadcrumb links). Эти ссылки показывают наглядно, где в иерархии сайта вы сейчас находитесь — весь ваш путь от главной страницы до текущего раздела или страницы. Если вы действительно хотите сделать код вашей страницы семантически правильным, этот тип ссылок следует оформить как серию вложенных списков, так как каждый раздел является частью предыдущего раздела:

      • Home
        • » Products
          • » Computers
            • » Software

      в результате получаем:

      Применив следующие правила:

      #bread { color: #ccc; background-color: #006; padding: 3px; margin-bottom: 25px; } #bread ul { margin-left: 0; padding-left: 0; display: inline; border: none; } #bread ul li { margin-left: 0; padding-left: 2px; border: none; list-style: none; display: inline; }

      получаем вот что:

      И опять-таки символ «»» (или любой другой подходящий символ) можно генерировать автоматически с помощью псевдо-элемента:before в сочетании с классом class=»first», чтобы первый пункт LI не имел этого символа.

      #bread-gen ul li:before { content: "020 020 020 0BB 020"; color: #ff9; } #bread-gen ul li.first:before { content: " "; }

      Конечный результат:

      Мир реалий

      Закончу свою статью реальным примером, в котором использован вышеописанный трюк. Мы возьмем стандартный список UL со ссылками и создадим динамическое меню с эффектами перекатывания. Для создания эффекта перекатывания визуальные стили будут применяться к элементам A, а элементы UL и LI будут служить лишь как структурный каркас.

      Это меню — фактически ответ на вопрос, заданный Майклом Эффордом (Michael Efford) в списке рассылки css-discuss. Майкл создал в точности такое же меню с помощью таблиц, графики и JavaScript. Затем он спросил в списке рассылки, можно ли то же самое получить с помощью CSS.

      • Home
      • Hidden Cameras
      • CCTV Cameras
      • Employee Theft
      • Helpful Hints
      • F.A.Q
      • About Us
      • Contact Us

      Дайте разберем стилевую таблицу правило за правилом, и я объясню для чего нужно каждое из них.

      #button { width: 12em; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: "Trebuchet MS", "Lucida Grande", Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; background-color: #90bade; color: #333; }

      Первое правило — для DIV-а #button. Оно задает, сколько места будет занимать меню, и создает контекст, чтобы мы могли управлять поведением ссылок и пунктов списка. Я предпочел сделать меню гибким и зависимым от установок броузера, поэтому (почти) все значения заданы в "em"-ах. Включая ширину меню. Черная граница была взята из исходного дизайна Майкла. Большой нижний отступ (padding) у меню сделан для того, чтобы вы могли видеть фон у DIV. Опять таки, это было сделано, чтобы повторить исходный дизайн. Нижнее поле (margin) используется для того, чтобы отделить меню от того, что за ним идет. Все цвета взяты из исходного дизайна.

      #button ul { list-style: none; margin: 0; padding: 0; border: none; } #button li { border-bottom: 1px solid #90bade; margin: 0; }

      Тут я определил, как должен выглядеть список. Так как все пункты списка у нас являются ссылками, а эффект перекатывания пока имеется только у ссылок, я намеренно удалил все стилистические правила из списков. Я добавил лишь границу шириной в один пиксель, у которой цвет совпадает с цветом фона DIV-а #button. Эта граница служит разделителем между пунктами меню. В исходном дизайне для этого использовалась отдельная картинка.