Классы селекторов. Назначение класса для различных тегов
Назначение класса для разных тегов происходит аналогично, назначению класса для одинаковых тегов, различие состоит в том, что тег, к которому отнесен класс, явно не указан. Синтаксис:
имя_класса {свойство: значение}Данная конструкция позволяет отнести придаваемую классу декларацию к тому тегу, к которому это требуется в данный момент, как это и сделано в примере (рис. 2.3):
<HEAD><STYLE TYPE="text/css">.red {font-family: Arial; font-size: 20pt; Color: red}.green {font-family: Times New Roman; font-size: 24pt; Color: green}</STYLE></HEAD><BODY><H3 CLASS="green"> Красный заголовок </H3><H3 CLASS="red"> Зеленый заголовок </H3><DIV CLASS="green"> Зеленая надпись </DIV></BODY>
Рисунок 2.3 - Пример использования классов назначенных для различных тегов
Идентификаторы селекторов
Идентификаторы (id) селекторов предназначены для того, чтобы придавать каждому стилевому решению оригинальное имя. В этом случае указанное для идентификатора стилевое решение будет отнесено каждому элементу, которому данный идентификатор придан. Стилевое решение назначается идентификатору в соответствии с синтаксисом:
#idимя_идентификатора {свойство: значение}соответствующие же идентификатору свойства придаются выбранному тегу как:
тег id="idимя_идентификатора"Пример (рис 2.4):
<HEAD><STYLE TYPE="text/css">#id100 {font-family: Arial; font-size: 20pt; Color: red}#idblue {font-family: Times New Roman; font-size: 24pt; Color:blue}</STYLE></HEAD><BODY><H3 ID="id100"> Красный заголовок. </H3><DIV ID="idblue"> Синяя надпись. </DIV></BODY>
Рисунок 2.4 - Пример использования идентификаторов селекторов
Селекторы-ссылки
Браузеры обычно отображают уже использованные ссылки иначе, нежели неиспользованные. CSS позволяет авторам Web-страниц представлять ссылки в одном из нескольких фиксированных состояний. Реализуется это с помощью элементов, имеющих только одно фиксированное значение - псевдоклассы. Значения псевдоклассов таковы:
1. link - Неиспользованная ссылка.
2. hover - Ссылка с помещенным поверх нее указателем мыши меняет свой стиль на указанный в декларации этого псевдокласса.
3. active - Активная используемая в данный момент ссылка.
4. visited - Использованная ссылка.
Синтаксис использования псевдоклассов:
A:link {свойство: значение}
A:hover { свойство: значение }
A:active { свойство: значение }
A:visited { свойство: значение }
Пример (см. рис. 2.5):
<HEAD>
<STYLE TYPE="text/css">
A:link {font-size: 14pt; text-decoration:underline; Color:red}
A:hover {font-size: 10pt; text-decoration:none; Color:blue}
A:active {font-size: 20pt; text-decoration:none; Color:yellow}
A:visited {font-size: 10pt; text-decoration:none; Color:green}
</STYLE>
</HEAD>
<BODY>
<A href="file.htm"> Новая ссылка </A> <BR>
<A href="link.htm"> Использованная ссылка </A>
</BODY>
Рисунок 2.5 - Пример использования селекторов-ссылок
3.Назначение стиля тегам или страницам.
Назначить определенный стиль для Web-страницы или определенной ее части либо тега можно тремя методами:
Присоединенный стиль. Применение того или иного стиля не обязательно прописывать непосредственно в коде Web-страницы. Существует возможность с помощью какого-либо из специальных редакторов создать файл, несущий информацию о стиле (такой файл будет иметь расширение .css) и поставить на него ссылку согласно синтаксису:
<LINK REL="stylesheet" TYPE="text/css" HREF="имя_файла.css">
В примере
<HEAD>
<LINK REL="stylesheet" TYPE="text/css" HREF="samp.css">
</HEAD>
<BODY>
<H1> Назначение стиля </H1>
<P> Пример ссылки на стиль. </P>
</BODY>
тег LINK заменил тег STYLE. В отличие от данного примера файл, содержащий стилевое решение для страницы, может располагаться на другом компьютере в сети или на удаленном компьютере. В этом случае делается ссылка на URL нужного компьютера либо сервера:
<HTML>
<HEAD>
<TITLE> Cool Style </TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF="http://www.coolstyle.com/superstyles.css">
</HEAD>
Вложенный стиль. Это наиболее распространенная форма назначения стилей.
<HEAD>
<STYLE TYPE="text/css">
селектор1 {свойство: значение }
селектор2 { свойство: значение }
</STYLE>
</HEAD>
Пример.
<HEAD>
<STYLE TYPE="text/css">
H1 {font-family: Arial; font-size: 40pt; Color:red}
P {font-size:12pt; line-height:20pt}
</STYLE>
</HEAD>
<BODY>
<H1> Назначения стиля </H1>
<P> Пример вложенного стиля </P>
</BODY>
Инлайновый стиль. Существует возможность указать стиль непосредственно для определенного тега или строки. Стиль будет применен только к тому тексту, для которого он прописан внутри тега html-кода.
<тег STYLE="свойство: значение"> ТЕКСТ </тег>
Пример.
<BODY>
<H1 STYLE="font-family: Arial; font-size: 40pt; Color:red"> Назначение стиля </H1>
<P STYLE="font-size:28pt; line-height:20pt"> Пример инлайнового стиля </P>
</BODY>
Иерархия стилей
При назначении стилевых решений страницам и тегам может возникнуть ситуация, когда разные декларации предписывают разные стилевые решения одним и тем же тегам или элементам. В этом случае реализованным окажется то стилевое решение, которое стоит выше в иерархии стилей. Высоким в иерархии считается то решение, которое непосредственно относится к элементу или тегу, которому предписывается определенный стиль. Иерархия предписанных стилей тогда выглядит следующим образом:
ü инлайновый;
ü вложенный;
ü присоединенный.
Поэтому в примере, где файл style1.css предписывает стиль
I {font-size: 30pt; Color: red}
а остальные стилевые решения заданы как:
<HEAD>
<LINK REL="stylesheet" TYPE="text/css" HREF="style1.css">
<STYLE TYPE="text/css">
I {Color: blue; text-decoration: underline}
</STYLE>
</HEAD>
<BODY>
<I STYLE="font-size: 28pt; color: green"> Иерархия стилей </I>
</BODY>
исполняться будет только декларация инлайнового стиля (рис. 3.1).
Рисунок 3.1 - Пример использования инлайнового стиля
В случае, когда стилевое решение задается методами, стоящими на одной ступени в иерархии, исполняться будет стилевое решение, заданное последним. Если необходимо выделить для исполнения какое-либо определенное значение в декларации, то можно сделать его "важным", а следовательно, и безусловно исполняемым. Синтаксис:
{свойство: значение!important}
Примечание: Важным будет только то значение в декларации, важность которого непосредственно указана, а не все значения в декларации.
Пример (результат исполнения кода представлен на рисунке 3.2):
<HEAD>
<STYLE TYPE="text/css">
.color {background: black; font-size: 28pt; color: aqua!important}
</STYLE>
</HEAD>
<BODY>
<P CLASS="code" STYLE="background: blue; font-size: 28pt; color:yellow">
Задание важности стиля </P></BODY>
Рисунок 3.2 - Пример назначения “важности” стиля
Контрольные вопросы.
1. Приведите пример использования контекстных селекторов.
2. Приведите пример использования классов селекторов.
3. Приведите пример использования классов селекторов для одинаковых тегов.
4. Приведите пример использования идентификаторов селекторов.
5. Приведите пример использования «Вложенного стиля».
6. Приведите пример использования «Инлайнового стиля».
7. Приведите пример создания CSS -файла и его подключения.