Техника Web-дизайна для студента
Вложение меток
Часто метки располагаются одна внутри другой. Если внутренняя (дочерняя) метка не имеет собственного стиля форматирования, то на нее будет распространяться стиль форматирования родительской метки, т. е. той метки, внутри которой она находится. Если же стиль дочерней метки противоречит родительскому стилю, то на форматируемый текст будет действовать ее собственный стиль, что объясняется большей близостью к форматируемому тексту. Пример записи приведен в листинге 7.4.
Листинг 7.4. Вложение меток с разными стилями
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.white {font-size: 38pt; color: white}
.black_gray {font-size: 46pt; color: black; background-color: gray}
</STYLE>
<TITLE>
Вложения меток </Т1ТЬЕ>
</НЕАО>
<ВСЮ¥>
<ШЗ СЬАЗЗ="Ыаск_дгау"ХЕМ CLASS="white"> Курсивом</ЕМ>написано только одно слово</ШЗ>
< / ВСШ¥>
</НТМЬ>
В окне браузера документ будет воспроизведен как на рис. 7.3.
|
Рис. 7.3. Результат форматирования текста вложенными метками с разными стилями |
Из примера видно, что такие элементы форматирования шрифта, как: его цвет, цвет фона, подчеркивание, — это результат действия стиля родительской метки <ins>, распространившегося на весь текст. Действие метки <ем> повлияло только на одно слово, причем заданные в ней цвет текста и его размер являются более приоритетными по отношению к аналогичным свойствам, заданным в родительской метке.
Кроме разбиения на классы, существует еще одна интересная возможность задания для одних и тех же меток различных стилей форматирования. Запись hi ем {font-size: 48рх; color: gray} означает, что определения относятся к метке <ем>, но действовать они будут только тогда, когда она будет дочерней по отношению к метке <Н1>. Имена родительской и дочерней меток разделяются пробелом. Пример в листинге 7.5.
Листинг 7,5. Пример действия стиля только в случае одновременного использования двух меток
<HTML>
<HEAD>
<STYLE TYPE="text/css">
HI EM {font-size: 48px; color: gray}
</STYLE>
<TITLE>
Вложения меток </TITLE>
</HEAD>
<BODY>
<Н1>Заголовок<ЕМ>первого</ЕМ>уровня</Н1> <ЕМ>Курсивный текст</ЕМ>
</BODY>
</HTML>
Результат в окне браузера приведен на рис. 7.4.
3 Вложения меток - Microsoft Internet Explorer
І Заголовок ИЄр80£0 уровня
Рис. 7.4. Результат действия стиля только в случае одновременного использования двух меток
Действия метки <ем> оказались различными. В первом случае в сочетании с меткой <ні> меткой <ем> были изменены начертание, размер и цвет шрифта, во втором — только начертание.
