Лекция 9. Основы построения CSS
Наследование
Контекстные селекторы
Классы
9.4 Теги <DIV> и <SPAN>
9.5 Z-index
Каскадирование
Наследование
HTML-код имеет иерархическую структуру. Весь документ кодируется внутри тегов <body>. . .</body>. Внутри абзаца <Р> могут содержаться элементы, размеченные тегами <B> и т. д.Наследование стилей означает, что если определен какой-то стиль для тега <body>, то этот стиль будет относиться ко всем тегам документа. Соответственно, если задан стиль для некоторого тега, то все теги, расположен-ные внутри него в HTML-программе, также будут обладать этим стилем.
Пусть для тега <Р> задан стиль: P {color: red; font-size: 14pt; font-family: Arial,sans-serif}
Тогда содержимое тега <ЕМ>, помещенного внутрь абзаца, будет также выведено на экран рубленым шрифтом красного цвета размером в 14 пунктов.
Например:
<Р>
Стилевые определения обладают свойством <ЕМ>наследования</ЕМ>.
Тогда результат этого фрагмента выглядит таким образом:
Если нужно, например, добавить для тега <ЕМ> разрядку текста, то это задается дополнительно:
<HTML>
<HEAD>
<TITLE>Дополнительное стилевое указание
</TITLE>
<STYLE type="text/css">
<!--
P {color:red;font-size:14pt;
font-family:Arial,sans-serif}
-->
</STYLE>
</HEAD>
<BODY bgcolor=white text=black>
<P>
Стилевые определения обладают свойством
<EM style="letter-spacing: 6рt:">
наследования
</EM>
</BODY>
</HTML>
Как видите, содержимое тега <ЕМ> выводится так же, как и содержимое тега <Р>, внутри которого он содержится (рубленым шрифтом в 14 пунктов красного цвета), но благодаря дополнительному определению style="letter-spacing: 6pt" между буквами появляются добавочные промежутки в 6 пунктов.
Внутри тега-потомка можно не только ввести дополнительные стилевые определения, но и переопределить стилевые свойства родителя.
Например, после следующего примера слово «наследования» будет показано синим цветом
<HTML>
<HEAD>
<META http-equiv="Content-Type"
content="text/html">
<TITLE>Переопределение стилевых свойств
</TITLE>
<STYLE type="text/css">
<!--
P {color: red;font-size:14pt;
font-family:Arial,sans-serif}
-->
</STYLE>
</HEAD>
<BODY bgcolor=white text=black>
<P>
Стилевые определения обладают свойством
<EM style="letter-spacing:6рt;
color:blue">наследования</EM>
</BODY>
</HTML>
Контекстные селекторы
Можно написать стилевое определение, которое будет рабо-тать только при определенной комбинации вложенности тегов. Например, можно установить цвет текста в <EM> синим только для случая, когда этот тег расположен внутри тега <H3>.Например:
<HTML>
<HEAD>
<META http-equiv="Content-Type"
content="text/html">
<TITLE>Контекстный селектор</TITLE>
<STYLE type="text/css">
<!-- H3 EM {color: blue}
-->
</STYLE>
</HEAD>
<BODY bgcolor=white text=black>
<H3> Контекстный <EM>селектор </EM></H3>
<P> Контекстный <EM>селектор </EM></P>
</BODY>
</HTML>
Слово «селектор» выводится на экран синим цветом только в первой строке внутри тега <Н3>), а во второй строке (внутри тега <Р>) — черным. Обратите внимание, что в стилевом определении отсутствует запятая. Это и есть признак контекстного определения. Если записать Н3, ЕМ {color: blue}, то синий цвет приобретут как теги <Н3>,так и теги <ЕМ>, т. е. запятая определяет одинаковые стили для группы тегов.
Классы
Стилевые определения можно описывать без указания тега. В этом случае каждому определению присваивается имя, которое можно использовать для сопоставления заданного стиля конкретному тегу. Такие стилевые определения называются классами. Класс записывается следующим образом:
.имя
{ характеристика: величина;
. . .
характеристика: величина;
}
Иными словами, определение записывается как обычно, но вместо указаний на теги размещается конструкция .имя
Например, определим стилевой класс с именем def:
.def
{color: red; font-size: 16pt;
font-family: Geneva, Helvetica, sans-serif;
border: solid 0.2cm blue }
Здесь строка border: solid 0.2cm blue демонстрирует запись в одном стилевом указании нескольких парамет-ров разного назначения (здесь: стиль, толщина рамки и ее цвет). Такую интеграцию допускают специальные обобщающие стилевые свойства, ккоторым относится border.
Сопоставляют стилевой класс с тегом при помощи атрибута class:
<Р class=def > текст </P>
Посмотрите, как работает этот код:
<HTML>
<HEAD>
<META http-equiv="Content-Type"
content="text/html">
<TITLE>Определение класса</TITLE>
<STYLE type="text/css">
.def
{font-family:Helvetica;font-size:14pt;
border: solid 4pt red;padding: 6pt;
margin-left:5%;margin-right:5% }
</STYLE>
</HEAD>
<BODY bgcolor=white text=black>
<H2>Классы</H2>
<P class=def>
Клacc — стилевое определение
без привязки к тегу.
<P>Вместо указания тега в определении
записывается имя класса.
<P class=def>
Перед именем класса ставится точка.
</BODY>
</HTML>
Результатом этого кода будет следующая страница:
Можно образовывать классы на основе существующих стилевых определений. В следующем примере за основу класса def взято определение стиля для тега <Р> и добавлены новые свойства:
<HTML>
<HEAD>
<META http-equiv="Content-Type"
content="text/html">
<TITLE>Определение класса</TITLE>
<STYLE type="text/css">
P {font-family:Helvetica}
P.def
{text-align: justify;
background:#CFB597;
font-size:14pt;
border:solid 4pt red;
padding:6pt;
margin-left:5%;margin-right:5%}
</STYLE>
</HEAD>
<BODY bgcolor=white text=black>
<H2> Классы(обычный заголовок)</H2>
<P> Этот абзац использует стилевое определение для
тега Р (рубленый шрифт).
<P class=def>
Этот абзац использует
стиль производного класса
“def”
(в определение стиля для тега Р добавлено:красная рамка, поля, цвет фона, выравнивание слева и справа, повышенный размер шрифта).
</BODY>
</HTML>
9.4 Теги <DIV> и <SPAN>
Эти теги играют особую роль для CSS. Они позволя-ют выделять в документе отдельные области, задавая для них специфические свойства. Все, что нужно сделать — это поместить теги, принадлежащие конструируемой области внутрь <DIV>. . .</DIV> или <SPAN>. . .</SPAN>. Разница между <DIV> и <SPAN> только в одном: после блока <DIV> браузер переходит на новую строку, а после блока <SPAN> — нет. Использование тега <SPAN> позволяет тем самым задавать стилевые свойства даже отдельным словам и буквам.
Посмотрим примеры использования этих тегов.
Пример использования <DIV>:
<HTML>
<HEAD>
<META http-equiv="Content-Type"
content="text/html">
<TITLE> Использование тега DIV</TITLE>
<STYLE type="text/css">
.area1
{ color:red; font-weight:bolder;
font-size:40pt; background:aqua}
.area2
{ color:black; background:#CFB597}
.area3
{ color:blue;background:#C0C0C0}
</STYLE>
</HEAD>
<BODY bgcolor=white text=black>
<DIV class=area1><IMG src=vopros.gif> Где</DIV>
<DIV сlass=аrеа2>начало того конца,</DIV>
<DIV class=area3>которым оканчивается начало?
</DIV>
</BODY>
</HTML>
Пример использования <SPAN>:
<HTML>
<HEAD>
<META http-equiv="Content-Type"
content="text/html">
<TITLE> Использование тега SPAN</TITLE>
<STYLE type="text/css">
.area1
{ color:red; font-weight:bolder;
font-size:40pt; background:aqua}
.area2
{ color:maroon; background:#CFB597;
padding:6pt}
.area3
{ color:blue;background:#C0C0C0;
padding:6pt}
</STYLE>
</HEAD>
<BODY bgcolor=white text=black>
<SPAN class=area1><IMG src=vopros.gif>Где</SPAN>
<SPAN сlass=аrеа2>начало того конца,</SPAN>
<SPAN class=area3>которым оканчивается начало?
</SPAN>
</BODY>
</HTML>
Абсолютное позиционирование
При помощи CSS можно отображать элементы на экране, используя реальные координаты, отсчитываемые от левого верхнего угла окна браузера. Такую возможность предоставляет стилевое свойство position со значением absolute. Сами координаты задаются в пикселях при помощи свойств left (горизонтальная координата) и top (вертикальная координата).
Применение этих свойств иллюстрирует следующий пример.
<HTML>
<HEAD>
<META http-equiv="Content-Type"
content="text/html">
<TITLE> Абсолютное позиционирование</TITLE> <STYLE type="text/css">
.area1
{ position:absolute; top:10; left:10;
color:red; font-weight:bolder;
font-size:40pt; background:aqua}
.area2
{ position:absolute; top:20; left:150;
color:maroon; background:#CFB597;
padding:12pt}
.area3
{ position:absolute; top:70; left:130;
color:blue; background:#C0C0C0;
padding:12pt}
</STYLE>
</HEAD>
<BODY bgcolor = white text = black>
<DIV class =area1><IMG src=vopros.gif>Где</DIV>
<DIV class =area2>начало того конца,</DIV>
<DIV class =area3>которым оканчивается начало?
</DIV>
</BODY>
</HTML>
Как видите, браузер разместил три заданные тегами <DIV>, области в указанные координа-ты. При этом области перекрывают друг друга.
Ближе к пользователю получается та область, которая следует в HTML-коде последней. Если переставить порядок следования тегов <DIV> в программе, то и порядок наложения областей друг на друга изменится. Однако CSS предоставляет программисту и другой, более гибкий инструмент для управления порядком наложения элементов. Это — Z-index.
9.5 Z-index
Этот стилевое свойство позволяет указывать, в каком слое (на каком уровне) находится элемент на экране. Номер основного уровня (на который выводятся обычные элементы без стилевых указаний) равен нулю. Следовательно, элементы с отрицательным Z-index расположены ниже (дальше), с положительным — выше (ближе) основного экранного слоя. Если элементы имеют одинаковый Z-index, то они расположены в одном слое. В противном случае ближе к нам расположен слой, имеющий больший Z-index.
Приведенный ниже пример демонстрирует свойство Z-index.
<HTML>
<HEAD>
<META http-equiv="Content-Type"
content="text/html">
<TITLE> Z-index </TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<H2>Z-index</H2> <HR>
<DIV style= "position:absolute; top:50;
left:140; height:130; width:100;
background:red; font-size:60;
color:white; z-index:3">
Это ближе </DIV>
<DIV style="position:absolute; top:50;
left:360; height:30; width:100;
background:blue; font-size:30;
color:white; z-index:1">
Это дальше</DIV>
<DIV style="position:absolute; top:80;
left:270; width:125; z-index:2">
<IMG src=img555.jpg width=125 height=82
alt ="">
</DIV>
</BODY>
</HTML>
Результат этого кода – следующая страница:
Каскадирование
Пользователи благодаря CSS получает гибкий инструмент для представления информации на экране компьютера. Важно не запутаться в том, как созданные стили будут взаимодействовать друг с другом, с атрибутами тегов (они тоже определяют стиль) и со стилями самого браузера (теми стилями, которыми браузер показывает документ по умолчанию).
Вопросы к самопроверке:
6. Задан стиль Р ЕМ {color:red}. Каким цветом будет выведено слово «сложный» в следующих кодах:
а) <Н1>Это сложный пример</Н1>;
б) <Н1>Это <ЕМ>сложный</ЕМ> пример</Н1>;
в) <Р>Это сложный пример.</Р>;
1. Что такое «иерархия»?
3. Опишите механизм наследования стилей.
4. Можно ли переопределить наследуемый стиль? Если да, то как?
5. Что такое «контекстное определение»?