Сестринские селекторы.
Сестринские селекторы используются в случаях, когда существенно, что некие структурные элементы являются потомками одного родительского и один из них непосредственно предшествует другому. В этом случае в селекторе используется символ "+".
Следующий пример иллюстрирует вполне реальную ситуацию. Как правило, уместно отделять заголовки от предшествующего текста значительным отступом (свойство margin-top). Такой отступ можно было бы задать, например, со значением 20-30 px. И это хорошо выглядит, если между заголовками разных уровней есть какой-то вводный текст. Но может оказаться, что в ряде случаев, скажем, между заголовками 1-го и 2-го уровня такого текста нет. То есть, эти заголовки непосредственно следуют один за другим. Тогда повышенный отступ явно не нужен.
Итак, следующие правила стиля говорят о том, что заголовок 2-го уровня (h2), как правило, отделяется от предшествущего текста отступом 30px. Но в случае, когда он идет непосредственно за заголовком 1-го уровня (h1), этот отступ снижается до 15px. Во втором объявлении использован сестринский селектор.
h2 { margin-top: 30px;}
h1+h2 { margin-top: 15px;}
Селекторы типа.
Селектор типа представляет собой название типа элемента документа, в котором используются каскадные таблицы стилей. Для HTML-документа селектор типа - это имя HTML-элемента.
body { font-size: 12px }
h1 { font-size: 24px; color: red; border: black thin solid }
Обычные классы.
Селекторы класса позволяют задавать различные стилевые описания для одного и того же HTML-элемента. Название класса указывается после названия элемента и отделяется точкой.
div.red { color: #FF0000; }
div.blue { color: #0000FF; }
div.fantasy { color: rosybrown; font-size: 24px; }
Универсальный селектор класса
При определении с помощью универсального селектора класс не связывается с конкретным элементом. Такой класс можно применять с любыми элементами, для которых объявленные стилевые свойства имеют смысл. Формально, в таком описании вместо имени элемента следует ставить символ
* , например,
*.spring { color: mediumspringgreen; },
однако на практике допустима следующая запись без * :
.spring { color: mediumspringgreen; }
Применение классов стилей.
Определенный в таблице стилей класс связывается с HTML-элементм при помощи атрибута class. Для объявленных выше классов в документе HTML (XHTML) это можно сделать, например, так:
<div class="red">...
<div class="fantasy">...
<div class="spring">...
<p class="spring">...
<td class="spring">...
По существу, классы позволяют нам расширять структурную логику веб-документа в тех случаях, когда определенных в стандарте элементов не хватает для описания реалий нашего конкретного документа.
Скажем, контент требует выделения особым стилем эпиграфов, терминов, неких особых ссылок. Тогда можно ввести, например, классы
.epigraph {text-align:right; font-style:italic;}
.term {background:pink;}
a.special {color:navy; font-weight:bold; text-decoration:underline;}
ID селекторы.
Атрибут ID задает HTML элементу уникальный в пределах документа идентификатор, который может быть использован в различных целях, в частности, для задания стиля этому элементу. Значение атрибута ID отделяется от имени HTML-элемента символом #. Символ * вместо конкретного имени HTML-элемента сопоставляет правило стиля любому элементу, у которого значение атрибута ID равно указанному. Как уже отмечалось в предыдущем разделе, символ * можно опускать, т.е. следующие определения равносильны:
*#comment {color:red}
#comment {color:red}
Например, пусть описаны (скажем, во внешнем файле) следующие правила стиля:
h1#special {color:green}
#comment {color:red}
Первое правило (зеленый цвет символов) будет сопоставлено элементу h1, у которого значение атрибута id равно special.
Второе правило (красный цвет символов) будет сопоставлено любому элементу, у которого значение атрибута id равно comment.
В отличие от элементов, которым сопоставлен определенный класс CSS (см. Селекторы класса) и которых в документе может быть много (скажем, терминов, цитат, сносок, комментариев и т.д.), элемент с заданным id должен быть уникален в пределах документа. Смысл такого подхода становится ясным, когда мы представим себе некий шаблон документа, в котором крупные структурные блоки снабжены уникальными идентификаторами. Естественные практически для любого сайта блоки такого типа легко представить: шапка, основная навигация, дополнительная навигация, зона контента, подвал и т.д. И в каждом из этих блоков могут быть заголовки, гиперссылки, абзацы... И они обязаны выглядеть по-разному.
Сославшись на id, каждому структурному блоку мы можем задать общие параметры его отображения. А используя селекторы потомков - конкретизировать, как же в этом блоке должен выглядеть тот или иной его элемент: заголовок, гиперссылка, список и т.д.
Вот условный пример. Есть некий блок навигации (присвом ему id со значением nav). В этом блоке есть заголовок h1 и ссылки a, структурно оформленные как содержимое элементов списка li (кстати, это типичное решение). Представим следующий код HTML.
<div id="nav">
<h1>заголовок меню...</h1>
<ul>
<li><a href="...">1 ссылка</a></li>
<li><a href="...">2 ссылка</a></li>
<li><a href="...">3 ссылка</a></li>
...
</ul>
</div>
А вот так могло бы выглядеть описание стилей:
#nav {... описание внешнего вида блока в целом}
#nav ul {... описание списка в этом блоке}
#nav ul li {... описание элементов этого списка}
#nav ul li a {... описание гиперссылок в списке}
Заметьте, мы здесь в составном селекторе используем селекторы потомков, указывая вложенность элементов в соответствующие контейнеры. Скажем, последнее описание утверждает следующее. Внутри элемента с id=nav (#nav) в списке (ul) в элементе списка (li) гиперссылка (a) должна отображаться так, как указано в фигурных скобках (согласно CSS).
Исключительно для красоты словесной формулировки можно попробовать перечислить элементы составного селектора справа налево. Тогда расшифровка смысла селектора #nav ul li a получится примерно такая. Гиперссылки (a), являющиеся элементами (li) списка (ul) в блоке с id=nav отображаются так, как указано в фигурных скобках (согласно CSS).
Кстати, в процессе разработки сайта на базе любой SMS, необходимо уметь работать со сложными селекторами, в частности - с id-селекторами. Ибо CMS создаст каркас страницы с десятками вложенных элементов div (и у всех будет либо уникальный id, либо некий класс) . И при формировании своей "темы оформления" придется тщательно указывать стили для всех сгенерированных блоков и вложенных элементов.
Псевдоклассы и псевдоэлементы.
Псевдоклассы и псевдоэлементы позволяют задать особые стили, связанные с элементами <A> и <P> . От названия элемента отделяются двоеточием.
Псевдоклассы ссылок.
Для непосещенных и посещенных ссылок:
A:link { color: navy }
A:visited { color: steelblue }
Динамические псевдоклассы.
Для ссылок, на которые наведен курсор мыши, активизированных и получивших фокус:
A:hover { color: red; text-decoration: underline; font-weight: bold }
A:active { color: green; font-weight: bold }
A:focus { color: tomato }
Псевдоэлементы
Для первой буквы и первой строки абзаца:
P:first-line { font-weight: bold }
P:first-letter { font-size: 24px; color:red; float: left }
Продемонстрируем пример создания таблицы CSS для страницы сайта.
/*===========Селекторы типа========*/
body
{
font-family: 'Times New Roman' , Times, serif;
font-size: 14px;
font-weight: bolder;
font-style: inherit;
font-variant: normal;
text-transform: none;
color: #003399;
line-height: normal;
text-align: justify;
background-color: #FFFF99;
background-image: none;
padding: 4px;
margin: 2px;
}
h1
{
font-family: Calibri;
font-size: 22px;
font-weight: bold;
font-style: italic;
text-align: center;
}
h2
{
font-family: Roman;
font-size: 20px;
font-weight: 200;
font-style: italic;
}
/*===========Селекторы классов===================*/
.nadpic
{
font-family: 'Times New Roman' , Times, serif;
font-size: large;
font-weight: bolder;
font-style: normal;
font-variant: normal;
color: #009999;
padding: 2px;
margin: 39px;
z-index: inherit;
position: inherit;
}
/*====================Селекторы идентификаторов===========*/
h1#special {color:green}
#comment {color:red}
/*описание внешнего вида блока в целом}*/
#nav{border-style: double;
border-width: thin;
}
/*================Селекторы потомков======================*/
/* описание списка в этом блоке}*/
#nav ul{border-style: ridge;}
/*описание элементов этого списка}*/
#nav ul li{color: #800000;}
/*описание гиперссылок в списке} */
#nav ul li a{color: #008000;}
/*================Псеводклассыи псевдоэлементы=========*/
A:link { color: navy }
A:visited { color:Blue }
A:hover { color: red; text-decoration: underline; font-weight: bold }
A:active { color: green; font-weight: bold }
A:focus { color: tomato }
P:first-line { font-weight: bold }
P:first-letter { font-size: 24px; color:red; float: left }
Ниже представлен исходный код страницы и её вид на рисунке 5.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Безымянная страница</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<h1>Обычный заголовок h1</h1>
<h2 >Обычный заголовок h2</h2>
<asp:Button ID="Button1" runat="server" Text="Класс .nadpic"
CssClass="nadpic" />
<h1 id =special>Этот заголовок h1 имеет id=special </h1>
<div id="nav">
<h1>заголовок меню в div id=nav</h1>
<ul>
<li> Это текст перед ссылкой: <a href="Default2.aspx">ссылка_1</a> </li>
<li><a href="Default2.aspx">ссылка_2</a></li>
<li><a href="Default2.aspx">ссылка_3</a></li>
</ul>
</div>
<asp:Panel ID="Panel1" runat="server" CssClass="nadpic">
Это тоже класс .nadpic
</asp:Panel>
<a href="Default2.aspx">Ссылка с псевдоклассом</a>
<br />
<a href="Default2.aspx">Ссылка с псевдоклассом</a>
<p >Пишу первоую строку <br /> Пишу вторую строку</p>
</form>
</body>
</html>
Рисунок 5 – Сконфигурированная с помощью CSS WEB – страница