Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Css » Kontekstnye-selektory

Контекстные селекторы

Очень часто при создании HTML документа веб-разработчикам приходится вкладывать один тег в другой. Специально для вложенных тегов можно задать свои стилевые свойства. В этом вам как раз могут помочь контекстные селекторы. Для селекторов тегов синтаксис написания будет следующим:

Тег1 Тег2 { ... }

Тег2 является вложенным тегом в Тег1. По сути здесь нет ничего сложного, попробуем немного разобраться на примере:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
charset=utf-8">
<title>Контекстные селекторы</title>
 <style type="text/css"> 
p span{
	font-family: Times, serif; /* Семейство шрифта */
	font-weight: bold; /* Жирное начертание */
	color: navy; /* Синий цвет текста */
}
 </style>
</head> 
<body>  
<p>Это начало обычного текста. <span>А это вложенный контекстный
 тег со своими стилевыми свойствами.</span> А дальше опять 
обычный текст.</p> 
 </body>
</html>

В результате вы должны получить следующее:

Пример использования контекстного селектора

Из примера видно что свойства были применены только для контекстного селектора span. Вы можете задать этому тегу отдельные свойства и увидите что они будут применяться отдельно.

Но самое интересное в применении контекстных селекторов — это применение классов и идентификаторов. Их применяют намного чаще, чем теги. В качестве небольшого примера можно сделать вот такое горизонтальное меню:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; 
charset=utf-8">
  <title>Контекстные селекторы</title>
<style type="text/css"> 
.menu { 
padding: 7px; /* Поля вокруг текста */
border: 1px solid #003AFF; /* Параметры рамки */
background:#ccc; /* Цвет фона */
}
.menu a {
	color: #09F; /* Цвет ссылок */
}  
</style>
 </head> 
 <body>
  <div class="menu">
    <a href="#">Пункт 1</a> |
    <a href="#">Пункт 2</a> |
    <a href="#">Пункт 3</a>|
    <a href="#">Пункт 4</a>|
  </div>  
 </body>
</html>

Результат вы можете увидеть на рисунке:

Применение контекстных селекторов

Здесь я использовал контекстный селектор ссылки a в классе с именем menu. Также вы можете использовать идентификаторы. Попрактикуйтесь и вы увидите как это удобно. Заметьте, что можно вкладывать не один селектор в другой, а сразу несколько. Общий синтаксис тогда будет следующим:

селектор1 селектор2 .... селекторN { свойство1: значение; свойство2: значение; ... свойствоN: значение}

Причем стилевые свойства унаследует селекторN, то есть последний из вложенных селекторов. Я думаю на этом можно заканчивать этот урок и переходить к следующему.



наверх