II. Управление типом маркера.
В первых спецификациях HTML тип маркера для неупорядоченного списка можно было выбрать из стандартного набора и задать с помощью атрибута type. Однако в спецификации HTML 4 этот способ считается устаревшим и не рекомендуется к использованию.
Вместо этого вид маркера предлагается задавать с помощью стилевого свойства list‑style-type.
Это свойство может быть определено как для элементов <ul>, так и <li>. В первом случае оно применяется ко всем элементам списка.
Если же свойство задать для конкретного элемента <li>, то оно будет распространяться только на этот элемент.
Допустимы следующие значения свойства:
disc — залитый кружок (по умолчанию),
circle — кружок,
square — квадратик,
none — нет маркера.
ЗАДАНИЕ 2 (изменение типа маркера)
1. Создать неупорядоченный список из трех или более элементов. Определить в стилевых свойства элемента ul маркер "кружок". Проверить работу браузера.
2. Добавить в описание стилей селектор li, для которого определить маркер как "квадратик".
Какое из определений (для ul или li) имеет приоритет?
3. Проверить, можно ли задать особый маркер для отдельного элемента списка?
4. Создать двухуровневый список.
Используя возможность использования контекстного CSS-селектора, изменить вид маркера для элементов списка второго уровня.
III. Положение маркера.
Элемент ul для вывода содержимого элементов списка образует бокс. При этом маркер может быть размещен двумя способами. В одном случае маркеры выносятся левее содержимого элементов (в том числе и многострочных элементов). В другом случае маркеры "встраиваются" в текст элементов. Для управления положением маркера используется стилевое свойство list-style-position, которое может принимать значения inside ("внутри" бокса) и outside ("вне" бокса).
ЗАДАНИЕ 3 (положение маркера)
Создать список из нескольких элементов, в одном из которых задать текст "Изучение положения маркера". Задать для элемента ul ширину в 10 символов, и поочередно использовать разные значения свойства list-style-position.
Какой способ расположения маркера используется по умолчанию?
Замечание.
Сокращенный синтаксис позволяет сочетать определения разных свойств в одном стилевом правиле. Например,
list-style: outside square;
IV. Задание картинки в роли маркера.
Расширить набор стандартных маркеров можно, если задать в качестве маркера картинку. Для этого нужно использовать стилевое свойство list-style-image.
Например,
list-style-image: url(bullet.gif);
Назначенный таким образом маркер-картинка заменяет стандартный маркер, определяемый свойством list-style-type.
По умолчанию принимается list-style-image: none;
ЗАДАНИЕ 4 (Использование списков для создания вертикального кнопочного меню)
Браузеры по умолчанию выстраивают списки в том виде, который необходим для организации одноуровнего вертикального меню. Поэтому, если задать содержание элементов списка ссылками, то легко получить простое текстовое меню.
Далее с помощью стилевых свойств это меню легко превратить в кнопочное. Для этого необходимо выполнить следующие действия.
а) Сделать элементы списками ссылками (для простоты можно назначить для ссылки вывод с помощью alert сообщения о нажатой кнопке).
б) Убрать подчеркивание у текста ссылок.
в) Убрать маркеры списка.
г) Для элементов li задать ширину (размер кнопки) и цвет фона.
д) Ссылка <a> является вложенным в li элементом. Чтобы ссылкой была вся "кнопка", а не только ее текст, нужно для вложенных в li ссылок в стилевой таблице задать ширину 100% (от родительского элемента). После этого может быть задана граница кнопок.
е) Чтобы текст на кнопке не прилегал вплотную к границе, нужно со всех сторон задать небольшую прокладку padding.
ж) Для ссылок, вложенных в li задать изменение цвета фона, когда на кнопку будет наведен курсор мыши (hover).
Замечание.
Изменение цвета фона должно происходить у всей кнопки, а не только у фона текста.
Результат должен выглядеть приблизительно так:
ЗАДАНИЕ 5 (Создание горизонтального кнопочного меню)
По умолчанию каждый новый элемент списка выводится браузерами с новой строки. Если нужно вывести элементы списка в строку, то для этого нужно превратить эти элементы из блочных во встраиваемые. Является элемент блочным или встраиваемым определяет значение свойства display: block или inline.
Превратить вертикальное меню из предыдущего задания в горизонтальное.
