+7 (978) 09 16 718
[email protected]В предыдущем уроке мы рассмотрели, как с помощью классов (class) и идентификаторов (id) можно ограничивать область действия команды стиля. Теперь посмотрим, какие существуют другие методы для точного управления командами стиля.
Часто, элементы одной HTML-страницы могут быть включены в другие элементы. Например, в следующем абзаце гиперссылка <a> включена в элемент <em> и в абзац <p>:
<p>Посетите следующую <em>интересную <a>страницу!</a></em></p>
Внутренний элемент называется дочерним, а внешний – родительским. В этом случае, <p> является родительским элементов <em> и <a>, а <em> является родительским элементом <a>. Соответственно, <em> является дочерним элементом <p>, а <a> является дочерним элементом <em> и <p>.
Отношения родительский-дочерний особенно полезны для определения области действия команд CSS. Например, с помощью следующей команды вы можете удалить гиперссылки в абзаце с классом menu (некоторые веб-дизайнеры предпочитают этот стиль главному меню):
p.menu a {text-decoration: none}
Преимущество этого подхода заключается в том, что класс указывается только один раз – для абзаца, а не для каждой гиперссылки в отдельности.
Обратите внимание, как сначала указывается имя родительского элемента (возможно, с именем класса или идентификатора), а затем имя дочернего элемента, оставляя пробел.
CSS позволяет использовать другой тип отношения элемента: parent-child. Разница заключается в том, что дочерним элементом может быть только тот элемент, который непосредственно связан с родителем. Например:
<p> Посетите следующую <em> интересную <a> страницу! </a> </ em> </ p>
,
<em> является дочерним элементом <p>, а <a> является дочерним элементом <em>, но <a> не является дочерним элементом <p>.
Стиль для детей можно указать следующим образом:
em> a {text-decoration: none}
Эта команда удалит подчеркивание всех дочерних гиперссылок элемента <em>.
Используя так называемые псевдоклассы, вы можете создавать специальные эффекты для некоторых селекторов. Псевдоклассы обычно назначаются следующим образом:
selector:псевдокласс {свойство:значение}
Давайте посмотрим на некоторые конкретные примеры.
С помощью псевдокласса link вы можете изменить стиль гиперссылок (которые обычно синего цвета и подчеркнуты):
a:link {color:#00FFFF; text-decoration:none}
Псевдокласс visited определяет стиль для уже посещенных гиперссылок:
a:visited {color: #FFFF00}
Псевдокласс hover используется для указания стиля элемента, на котором расположен указатель мыши. Чаще всего они используются гиперссылками:
a: hover {color: red}
Эта команда CSS превратит любую гиперссылку в красную, когда на нее наведен указатель мыши.
Псевдокласс hover может использоваться и для других элементов. Например, раскрывающиеся меню и их производных. Когда указано главное меню, стиль наведения активируется, и в результате отображается подменю. Более ранние версии Internet Explorer поддерживают псевдокласс hover только для гиперссылок, но существуют способы обойти эти ограничения.
Псевдокласс active устанавливает стиль для элементов, по которым щелкают в данный момент. Активный псевдокласс часто используется с гиперссылками:
a: active {color: # AAAA00}
Если вы используете комбинацию псевдоклассов гиперссылок, при их объявлении вы должны вы должны соблюдать порядок link – visited – hover – active. В противном случае, стиль не будет выполнен.
Псевдокласс first-child используется для указания первого дочернего стиля элемента. Например, вы можете создать первый абзац любой страницы курсивным шрифтом, применив псевдокласс first-child к абзацам:
p: first-child {font-style: italic}
Вот немного более сложный пример выделения первой гиперссылки в каждом абзаце:
p> a: first-child {color: green}
Псевдокласс focus позволяет вам применять стиль к вводу с клавиатуры. Стиль становится активным, когда элемент находится в фокусе. Один общий пример – установить цвет фона (например, розовый) или рамку для поля ввода:
input: focus {background-color: pink}
Читайте далее: CSS уроки, 3 часть: CSS шрифт, текст, списки