Right.gif left.gif

Дата добавления: 2015-07-09; просмотров: 420; Нарушение авторских прав

Создать HTML-файл с текстом из примера 4. Посмотрите на результат. Присвойте иные значения для указателей ( left_pointer и right_pointer). Посмотрите на результат.

Помимо селекторов, связанных с определенными HTML элементами, стилевыми классами или идентификаторами элементов, можно создавать и более сложные селекторы. Они подходят для случаев, когда стиль должен применяться только к элементам документа, находящимся внутри какого-то другого элемента. Например, средствами CSS можно особым образом оформить элементы LI, находящиеся внутри элемента LO, принадлежащего к различным стилевым классам (пример 10.5).

Пример 5. Применение сложных селекторов

<HTML>

<HEAD>

<TITLE>Сложные селекторы</TITLE>

OL.ordinary_list LI {}

OL.italic_list LI {font-style: italic}

OL.colored_list LI {color: green; background-color: yellow}

</STYLE>

</HEAD>

<BODY>

<P>Список, оформленный обычным шрифтом

<LI>Элемент списка

</OL>

<P>Список, оформленным курсивным шрифтом

<LI>Элемент списка

</OL>

<P>Раскрашенный список

<LI>Элемент списка

</OL>

</BODY>

</HTML>

Чтобы применить стиль к каждому отдельному элементу списков, не потребовалось назначать никакие стилевые классы для самих элементов списков. Потребовалось лишь отнести сами списки (элементы OL) к нужным стилевым классам, что избавило нас от лишних усилий при составлении HTML документа.

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

Задание 5. Создайте файл Primer5.html и внесите в него текст Примера 5

Вопросы для подготовки отчета:

1. Внешние и встроенные таблицы стилей

2. Записи таблицы стилей

<== предыдущая лекция	\|	следующая лекция ==>
Ход работы	\|	Правила отображения HTML-элементов