Списки

Ответы на вопросы

1. Каким свойством можно изменить тип маркера списка? Какие значения может принимать это свойство? Какое значение работает по умолчанию? К каким элементам можно применять это свойство? Передаётся ли оно по наследству?

   Ответ. Для изменения типа маркера применяют свойство list-style-type.

   Свойство может принимать следующие значения:

   • disc (круг)
   • circle (окружность)
   • square (квадрат)
   • decimal (нумерация арабскими цифрами)
   • upper-alpha (нумерация латинскими заглавными буквами)
   • lower-alpha (нумерация латинскими строчными буквами)
   • upper-roman (нумерация римскими большими цифрами)
   • lower-roman (нумерация римскими маленькими цифрами)
   • none (маркер отсутствует)

   CSS определяет disc в качестве значения по умолчанию для этого свойства.

   CSS не различает нумерованные (OL) и маркированные (UL) списки, но браузеры различают, и для нумерованного списка устанавливают по умолчанию значение decimal.

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

   UL {list-style-type:disc;}     
   UL UL {list-style-type:circle;}     
   UL UL UL {list-style-type:square;}     
         

2. Каким свойством можно задать изображение в качестве маркера списка? Какие значения может принимать это свойство? Какое значение работает по умолчанию? К каким элементам можно применять это свойство? Передаётся ли оно по наследству?

   Ответ. Стандартный маркер можно заменить собственным, привлекая для этого свойство list-style-image.

   Свойство может принимать следующие значения:

   • url адрес изображения
   • none (изображение для маркера не задано)

   По умолчанию работает значение none. Свойство применимо к спискам и передаётся по наследству.

3. Каким свойством можно регулировать положение маркера списка? Какие значения может принимать это свойство? Какое значение работает по умолчанию? К каким элементам можно применять это свойство? Передаётся ли оно по наследству?

   Ответ. Маркер можно располагать вне или внутри содержимого элемента списка при помощи свойства list-style-position.

   Свойство может принимать следующие значения:

   • inside (маркер внутри элемента списка)
   • outside (маркер снаружи элемента списка)

   По умолчанию работает значение outside. Свойство применимо к спискам и передаётся по наследству.

4. Каким свойством можно задавать все стилевые параметры списка? В каком виде и порядке записываются параметры?

   Ответ. Все три стилевых свойства списка можно задавать при помощи интегрированного свойства list-style:

   list-style:тип_маркера url позиция

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

5. Маркер, как фоновое изображение, был выровнен по центру в вертикальном направлении, чтобы он попал точно в середину LI по вертикали:

     
   UL
   {
     margin-left: 1em;
     padding-left: 0;
   }
   UL LI
   {
     padding-left:20px;
     list-style-type: none;
     background: url(pic/marker8.png) no-repeat 0 center;
   }
         

   Однако, маркеры рассыпались как горошины:

   страницу
   HTML-код

   Объясните причину.

   Ответ. Картинка-маркер выравнивается по центру LI в вертикальном направлении, но если в LI входит вложенный список или сам LI занимает более одной строки, центр не будет расположен в первой строке:

   

6. Запишите CSS-определения, которые позволяют превратить стандартный список UL в горизонтальный список.

   Ответ.

   Пусть список задан следующим HTML-кодом:

   Уберём маркеры и превратим блочные элементы LI в строчные при помощи свойства display:

     
   .menu {list-style:none;} /* убираем маркеры */
   .menu LI {display:inline;} /* превратим LI в строчные элементы*/
         

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

   Пункт 1 Пункт 2 Пункт 3 Пункт 4

   Свойство display позволяет изменять представление элемента на экране. Значение inline заставляет элемент вести себя подобно строчному, а значение block — подобно блочному.

7. Дополните определения так, чтобы список превратился в набор кнопок, выстроенных по горизонтали. Кнопки не должны разрываться на несколько строк в нешироких окнах браузера.

   Ответ.

   Пусть список задан следующим HTML-кодом:

   Решением послужит следующий набор определений:

   .menu
   {
     list-style:none;    /* Убираем маркеры */
     margin:0;           /* Убираем внешние отступы */
     padding:3px 0;      /* Убираем лишние внутренние отступы */
     white-space:nowrap; /* Запрещаем переносы */
   }
   .menu LI
   {
     display:inline;   /* Превращаем LI в строчный элемент */
     font:0.8em Tahoma,sans-serif; /* Определяем шрифт */
     background:#fff2a6; /* Фон кнопки */
     padding: 2px 0.5em; /* Задаём внутренние  отступы */
     border:1px solid gray;     /* Рамка вокруг кнопки */
     border-left-color:#fff2a6; /* Убираем повтор рамки слева */
   }
   
   .menu LI.first
   {
     border-left-color:gray; /* Восстанавливаем первую рамку */
   }
        

   Рамки кнопок на стыках удваиваются, поэтому для левой рамки назначаем цвет фона #fff2a6, а у первой кнопки (с классом first) восстанавливаем цвет gray.

   Результат показан на рисунке:

   

вверх | возврат