Селекторы CSS

В предыдущей главе рассматривался такой термин как селектор. Селекторы служат для подробного определения элементов, к которым необходимо применить какое-либо правило. В настоящий момент существует 4 типа селекторов. Рассмотрим все из них более подробно.

Селекторы по элементу

Самый простой способ идентифицировать селектор - при помощи элемента html. Делается это таким образом:

H1 {color:blue;}

Здесь в качестве селектора выступает элемент H1.

Или, например, если мы хотим, чтобы все абзацы были написаны шрифтом segoe script размером 14 пикселей, надо написать в файле с расширением *css следующую строку:

p {color:red; font-family:segoe script; font-size:14px;}

Здесь p будет выступать в качестве селектора, или, как сказать по другому, селектор задаётся при помощи элемента p.

Теперь создадим css-файл, в котором будут заданы правила для html-документа при помощи селекторов по элементу:

H3 {
color: blue;
}
P {
color: red;
font-family: segoe script;
font-size: 14px;
}

Таким способом запись в css-файл, была сделана для того, чтобы любой человек, работавший с данным файлом, мог яснее понимать код. Всё это можно поместить в две или даже одну строчку, браузер воспримет, а вот дизайнер может запутаться. Сохраняем его как style2.css.

Теперь создаём html-файл следующего содержания:


 
  Агния Барто - МЯЧИК
  
 
 
  

Агния Барто - МЯЧИК


  


Наша Таня громко плачет:

Уронила в речку мячик.

- Тише, Танечка, не плачь:

Не утонет в речке мяч.
  


 

В результате css-файла, наш html-документ принимает следующий вид.

Селекторы по идентификатору

Используется этот способ для задания уникального дизайна одного элемента. Например, мы пишем книгу в интернете, каждая глава которой имеет несколько подглав и находится на отдельной веб-странице. Для создания красивого заголовка главы целесообразно применить уникальный стиль оформления. В этом случае идентификатор для элемента задаётся при помощи атрибута id. Если мы хотим сделать заголовок главы уникальным по сравнению со всеми подзаголовками, пишем для него такой код:

Глава 1

Правило для названия главы в этом случае будет записано следующим образом:

H1#headline {
color:red;
font-family:KaiTi;
font-weighy:bold;
}

То есть селектор для идентификации уникального элемента в правиле должен быть отделён от его названия при помощи символа #.

На одной веб-странице может быть сколько угодно одинаковых элементов с атрибутом id, например:

Глава 1


<Н1 id="headline">Первая часть главы 1
<Н1 id="headline">Вторая часть главы 1

Всё будет работать, если все эти заголовки будут находиться на одной странице. Также если в правиле задать абзацу тот же селектор, что и заголовку, а затем в html-документе написать для абзаца и заголовка одинаковые id, то абзац будет выглядеть так, как он был задан в правиле, а не так как заголовок. Чтобы не запутаться, давайте рассмотрим пример.

Создаём html-файл следующего содержания:


 
  Агния Барто - МЯЧИК
  
 
 
  

Агния Барто - МЯЧИК


  

Наша Таня громко плачет:


  

Уронила в речку мячик.


  

- Тише, Танечка, не плачь:

Не утонет в речке мяч.


  

Агния Барто - МЯЧИК


  

Агния Барто - МЯЧИК


 

Правила запишем в css-файл следующим образом:

H1#headline {
color:red;
font-family:KaiTi;
font-weigh:bold;
}
p#green {
color:green;
}
p#headline {
color:blue;
font-family:gost;
}

Как видно из созданного нами html-файла в совокупности с таблицами стилей вся конструкция работает. Тем не менее, используйте идентификатор id на странице для каждого элемента только один раз!!! Чтобы задавать стиль нескольким одинаковым элементам сразу рекомендуется использовать селекторы по классу.

Селекторы по классу

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

- для каждого абзаца синего цвета;

- для каждого абзаца красного цвета;

Теперь рассмотрим такую ситуацию. Нам захотелось поменять цвета в абзацах. Синие абзацы мы хотим поменять на зелёные, красные - на жёлтые. В этом случае для каждого из абзацев придётся заново прописывать атрибут style. Но это не очень удобно, если абзацев 50, 20 из них - синие, 30 - красные, и это только на одной веб-странице, а если страниц - 100, и на каждой по 50 абзацев и везде менять цвета. Это долго и тяжеловато. Именно для таких случаев и были придуманы селекторы по классу.

Правила, содержащие селекторы по классу, в таблице стилей прописываются следующим образом:

p.classone {
color:blue;
}
p.classtwo {
color:red;
}

Здесь класс отделяется от элемента, которому он присвоен, точкой. В этом случае сначала пишется элемент, а затем название класса. К абзацу в html-документе классы будет подключаться следующим образом:

- подключение первого класса к абзацу;

- подключение второго класса к абзацу;

Теперь все абзацы первого класса будут синими, второго - красными. В этом случае для того, чтобы изменить цвет целого класса, достаточно лишь в таблице стилей поменять цвет, а на веб-странице оставить названия классов, такими как они есть.

Также в таблице стилей можно задать класс для всех элементов сразу, делается это следующим образом:

.classall {
color:blue;
}

В этом случае, если к любому текстовому элементу подключить атрибут class="classall", то все они будут синими.

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

Представим такую ситуацию: внутри всех параграфов нужно выделить элемент i каким-либо цветом, например красным. Для этого необходимо написать правило вида:

i {
color:red;
}

После этого текст между тегами ... будет красного цвета, но красным он будет в тексте в целом, а не внутри абзацев, то есть элементов p. А нам необходимо, чтобы i был красным только внутри абзацев. Для того, чтобы текст между тегами ... был красным только внутри абзацев пишем правило следующего вида:

p i {
color: green;
}

Задаётся стиль в этом случае для элемента i, который находится внутри элемента p. Как видно из примера, элементы разделены пробелом. Такой вид селектора называется контекстным.

2012 год.


<<Предыдущая | В раздел | Следующая>>