belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...
CSS >>>

2.3. Оформление внешнего вида списков

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Оформление списков</title>
	<style>
		.list_1	{
		list-style-type: decimal;
		list-style-position: outside;
		}
		.list_2{
		list-style-type: none;
		}
		.list_3{
		list-style-type: square;
		list-style-position: inside;
		}
	</style>
</head>
<body>
	<ul>
		<li class="list_1">
			Маркер размещаем вне списка.<br>
			Стандартный маркер.<br><br>
		</li>
		<li class="list_2">
			Второй пункт списка.<br>
			Не используем маркер вообще.<br><br>
		</li>
		<li class="list_3">
			Маркер размещаем внутри списка.<br>
			Стандартный маркер другого типа.
		</li>
	</ul>
</body>
</html>

Пример 2.10. Примеры оформления маркеров списка

Тип маркера задается при помощи наследуемого свойства list-style-type. Перечислим его значения:

Расположение маркеров относительно текста пунктов списка определяется при помощи наследуемого свойства list-style-position, значение outside которого используется по умолчанию и указывает браузеру на размещение маркеров за границей пунктов списка, а значение inside указывает браузеру на размещение маркеров вместе с содержимым пунктов списка (см. пример 2.10).

В CSS имеется также возможность использовать вместо маркеров изображения. Для этого применяется наследуемое свойство list-style-image, которое может принимать значения:

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

Можно задать значения всех трех свойств одновременно посредством наследуемого универсального свойства list-style. Опять же, значения должны разделяться пробелом, но могут идти в любом порядке или отсутствовать, тогда браузер заменит их значениями по умолчанию (см. пример 2.10).

Все свойства, перечисленные в данном пункте, применяются к элементам, у которых {display: list-item}, в частности, к элементам 'ul', 'ol', 'li', 'dl', 'dd', 'dt'.

Различные варианты оформления списков можно посмотреть на соответствующей странице нашего учебного сайта №1.

Контрольные вопросы и задания

  1. Как задается стандартный вид и расположение маркеров списка относительно содержимого пунктов списка?
  2. Опишите, как при помощи свойства list-style-image можно использовать в качестве маркеров списка изображения.

Словарь новых английских слов

word [ˈwɜːd] – слово.
letter [ˈlɛtə] – буква, литера.
spacing [ˈspeɪsɪŋ] – интервал, расстояние.
inherit [ɪnˈhɛrɪt] – наследовать.
indent [ɪnˈdɛnt] – отступ, абзац.
justify [ˈdʒʌstɪfʌɪ] – выровнять строку.
center [ˈsentər] – центр.
direction [dɪˈrɛkʃ(ə)n] – направление.
embed [ɪmˈbɛd] – вставлять, внедрять.
override [ˌəʊvəˈraɪd] – перебивать, не принимать во внимание.
space [speɪs] – пробел, интервал, место.
wrap [ræp] – перенос на строку, обертывать.
line [laɪn] – линия, строка.
capitalize [ˈkapɪt(ə)lʌɪz] – писать прописными буквами.
uppercase [ˈʌpəkeɪs] – верхний регистр.
lowercase [ˈləʊəkeɪs] – нижний регистр.
overline [ˈəʊvəlaɪn] – надчеркивание.
underline [ˌʌndəˈlaɪn] – линия подчеркивающая слово.
through [θruː] – прохождение через.
font [fɒnt] – комплект шрифта.
family [ˈfamɪli] – семья, семейство.
serif [ˈsɛrɪf] – засечка, шрифт с засечками.
sans [sænz] – без (предлог).
cursive [ˈkəːsɪv] – курсив, рукописный текст.
fantasy [ˈfantəsi] – воображение, фантазия.
monospace [ˈmɒnəʊspeɪs] – моноширинный шрифт.
size [saɪz] – размер, величина, объем.
small [smɔːl] – маленький, небольшой.
medium [ˈmiːdɪəm] – средний, умеренный.
large [lɑːdʒ] – большой, крупный.
bold [bəʊld] – жирный (шрифт).
light [lʌɪt] – светлый.
weight [weɪt] – вес.
italic [ɪˈtalɪk] – курсивный.
oblique [əˈbliːk] – косой, наклонный.
variant [ˈvɛərɪənt] – вариант, модификация.
caption [ˈkapʃ(ə)n] – заголовок.
icon [ˈaɪkɒn] – иконка.
message [ˈmɛsɪdʒ] – сообщение.
box [bɒks] – коробка, ящик.
circle [ˈsəːk(ə)l] – круг, кольцо.
square [skwɛː] – квадрат, квадратный.
decimal [ˈdɛsɪm(ə)l] – десятичный.
separate [ˈseprət] – раздельный, разделять.
collapse [kəˈlaps] – сплющивание.
border [ˈbɔːdə] – граница.
hide [haɪd] – прятать.
show [ʃəʊ] – показывать.
fixed [fɪkst] – закрепленный, фиксированный.
Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх