Задания для самостоятельного выполнения
Упражнение 1.
В примере "Выбор маркера" попробуйте использовать следующие значения этого свойства:
- circle
- disc
- decimal
- square
- lower-alpha
- lower-roman
- upper-alpha
- upper-roman
- none
- list-style-image Позволяет вместо маркера из стандартного набора использовать любое изображение. При этом необходимо учитывать, что размер изображения должен быть подходящим (в CSS нет средств для его изменения), а на тот случай, если загрузка изображений в браузере отключена, рекомендуется указывать и какое-либо значение свойства list-style-type.
- list-style-position Предоставляет выбор способа размещения маркера снаружи ( outside ) или внутри текста ( inside ).
Специфический атрибут элемента ol - start, указывающий начальный номер списка, например: <ol start="10">.
Большинство общих свойств CSS также применимо к спискам - как к элементу ol или ul (списку в целом), так и к элементу li (отдельным элементам списка).
Упражнение 2.
Задайте списку:
а) рамки (сначала для списка в целом, затем для его пунктов);
б) фоновый цвет;
в) отступ слева.
Пользуясь псевдоселектором first-letter, измените цвет и размер начальных букв пунктов списка.
Создайте страницы в соответствии с образцом
Расположение маркера относительно элемента списка
С помощью CSS свойства list-style-position вы можете определить расположение маркера, либо цифры относительно элемента списка. Для того, чтобы расположить маркер (цифру) внутри элемента списка вместе с содержимым, то необходимо использовать значение inside, а для того, чтобы расположить за границей элемента списка необходимо использовать значение outside.
|
|
|
Пример использования свойства list-style-position
В данном примере для маркированного списка (HTML элемент <ul>) расположили маркер внутри элемента списка вместе с содержимым, использовав свойство list-style-position со значение outside, а для нумерованного списка (HTML элемент <ol>) разместили цифру слева от текста внутри элемента вместе с содержимым (свойство list-style-position со значение inside).
Универсальное свойство border, которое позволяет установить границу для всех элементов списка, использовали для лучшего понимания работы свойства list-style-position.
Создание собственных маркеров
Рано или поздно перед Вами встанет необходимость создать маркеры списка со своим дизайном, благодаря CSS свойству list-style-image мы это желание сможем реализовать в Вашем проекте.
Синтаксис свойства следующий:
ol {list-style-image : url('images/primer.png'); /* указываем относительный путь к изображению */}ul {list-style-image : url('http://basicweb.ru/images/mini5.png'); /* указываем абсолютный путь к изображению */}Значение в скобках соответствует пути к изображению, которое вы планируете использовать в роли маркера. Путь к изображению может быть как абсолютный, так и относительный. При указании относительного пути, важным моментом является то, что его необходимо указывать относительно размещения таблицы стилей, а не страницы.
|
|
|
Дата добавления: 2020-04-25; просмотров: 195; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!