Урок №13. CSS. Списки.

Содержание урока:

List-style-type
List-style-image 
List-style-position 

 


 

В этом уроке мы рассмотрим свойства списков. Это поможет Вам оформлять списки в трех направлениях, а конкретнее вот свойства которые помогут Вам в этом:

    List-style-type – отвечает за внешний вид знака списка (маркер/нумератор).

    List-style-image – отвечает за замену маркера на картинку.

    List-style-position – отвечает за положение маркера относительно к блоку.

Давайте теперь подробнее разберем каждое из свойств.

 


 

List-style-type

Свойство, отвечающее за вид маркера списка возможны 3 значения для маркированных списков:

    Disk — маркер в виде закрашенного круга.

    Circle – маркер в виде не закрашенного круга.

    Square – маркер в виде закрашенного квадрата.

Что бы все было по полочкам, создадим списки, и предадим для каждого из них свойство с разными значениями:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

   <html>

     <head>

       <title>CSS. Списки (стиль маркера)</title>

       <link rel="stylesheet" type="text/css" href="style.css">

     </head>

     <body>

      <ul id="number1">

       <li>Пункт №1</li>

       <li>Пункт №2</li>

       <li>Пункт №3</li>

      </ul>

      <ul id="number2">

       <li> Пункт №1</li>

       <li> Пункт №2</li>

       <li>Третий пункт</li>

      </ul>

      <ul id="number3">

       <li> Пункт №1</li>

       <li> Пункт №2</li>

       <li> Пункт №3</li>

      </ul>

     </body>

   </html>

 

Код в style.css:

#number1{

  list-style-type:circle;

}

#number2{

  list-style-type:disk;

}

#number3{

  list-style-type:square;

}

 

Результат в браузере:

Пример свойства list-style-type

 

Приступим к нумерованным спискам. У этих списков ассортимент больше ровно на 1 свойство. Имеется в виду те свойства, которые поддерживаются большинством браузеров, а не поддерживающихся свойств итого больше. Рекомендовано использовать следующие:

    Decimal – десятичные числа. Используется по умолчанию.

    Lower-roman – заменяют стандартную нумерацию на строчные римские цифры.

    Upper-roman — заменяют стандартную нумерацию на прописные римские цифры.

    Lower-alpha – заменяют стандартную нумерацию на строчные латинские буквы.

Технология та же, создадим уже четыре пронумерованных списка с примером каждого значения:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

   <html>

     <head>

       <title>CSS. Списки (стиль маркера)</title>

       <link rel="stylesheet" type="text/css" href="style.css">

     </head>

     <body>

      <ol id="number1">

       <li>Пункт №1</li>

       <li>Пункт №2</li>

       <li>Пункт №3</li>

      </ol>

      <ol id="number2">

       <li> Пункт №1</li>

       <li> Пункт №2</li>

       <li>Третий пункт</li>

      </ol>

      <ol id="number3">

       <li> Пункт №1</li>

       <li> Пункт №2</li>

       <li> Пункт №3</li>

      </ol>

      <ol id="number4">

       <li> Пункт №1</li>

       <li> Пункт №2</li>

       <li> Пункт №3</li>

      </ol>

     </body>

   </html>

 

Таблица стилей:

#number1{

  list-style-type:decimal;

}

#number2{

  list-style-type:lower-roman;

}

#number3{

  list-style-type:upper-roman;

}

#number4{

  list-style-type:lower-alpha;

}

Результат в браузере:

Пример свойства list-style-type

 

Вроде все понятно, приступим к следующему свойству.

 


 

List-style-image

Предположим, Вы создали свой сайт с отличным внешним видом. Что бы ни портить вид сайта, каким то мелким списочком с ужасной маркировкой Вам пришло в голову заменить их на картинку, в таком случае создаем список:

Код в HTML-документе:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

   <html>

     <head>

       <title>CSS. Списки (стиль маркера)</title>

       <link rel="stylesheet" type="text/css" href="style.css">

     </head>

     <body>

      <ul id="experiment">

       <li>Пункт №1</li>

       <li>Пункт №2</li>

       <li>Пункт №3</li>

      </ul>

     </body>

   </html>

 

Таблица стилей:

#experiment{

  list-style-image:url(image.png);

}

 

Результат в браузере:

Пример свойства list-style-image

 

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

 


 

List-style-position

Это свойство предназначено для управления маркером, а точнее его местом расположения: внутри(inside) или снаружи(outside) блока. Давайте создадим два списка внутри блочных элементов.

Код в html-документе:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

   <html>

     <head>

       <title>CSS. Списки (стиль маркера)</title>

       <link rel="stylesheet" type="text/css" href="style.css">

     </head>

     <body>

      <div id="blok">

       <ul id="number1">

        <li>Пункт первый в первом блоке.</li><br>

        <li>Пункт второй в первом блоке</li><br>

        <li>Пункт третий в первом блоке</li><br>

       </ul>

       <ul id="number2">

        <li>Пункт первый во втором блоке</li><br>

        <li>Пункт второй во втором блоке</li><br>

        <li>Пункт третий во втором блоке</li><br>

       </ul>

      </div>

     </body>

   </html>

 

Зададим стилизацию:

#blok{

  width:170px;

}

#number1{

  list-style-position:outside;

}

#number2{

  list-style-position:inside;

}

 

Результат в браузере:

Пример свойства list-style-position

 

Слов тут не нужно, разница видна сразу.

 


Сокращенная запись

Вы уже знакомы с сокращенными записями разных правил, ну и сейчас без исключений, все так же через пробел:

#number1{

  list-style:disk url(image.gif) outside;

}

 

На этом собственно все, тренируйтесь, совмещайте, пробуйте разные варианты. Учитесь применять ваши знания для полезных целей. Когда вы сверстаете 2-3 пробных полноценных страницы приступайте к изучению JavaScript.

Всего доброго!

 


 

Закрыть меню