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

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

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

<H1 id="headline">Глава 1</H1>

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

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

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

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

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

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

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

<html>
 <head>
  <title>Агния Барто - МЯЧИК</title>
  <link href="style3.css" type="text/css" rel="stylesheet">
 </head>
 <body>
  <H1 id="headline">Агния Барто - МЯЧИК</H1>
  <p id="green">Наша Таня громко плачет:</p>
  <p id="headline">Уронила в речку мячик.</p>
  <p id="green">- Тише, Танечка, не плачь:<br>
Не утонет в речке мяч.</p>
  <H1 id="headline">Агния Барто - МЯЧИК</H1>
  <H1 id="headline">Агния Барто - МЯЧИК</H1>
 </body>
</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 на странице для каждого элемента только один раз!!! Чтобы задавать стиль нескольким одинаковым элементам сразу рекомендуется использовать селекторы по классу.


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