Главная или честный способ заработка в сети Зачем мне это? Всё начинается с идеи

Селекторы 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-файл следующего содержания:

<html>
 <head>
  <title>Агния Барто - МЯЧИК</title>
  <link href="style2.css" type="text/css" rel="stylesheet">
 </head>
 <body>
  <H3>Агния Барто - МЯЧИК</H3>
  <P>
Наша Таня громко плачет:<br>
Уронила в речку мячик.<br>
- Тише, Танечка, не плачь:<br>
Не утонет в речке мяч.
  </P>
 </body>
</html>

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



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