Допустим, вы хотите изменить цвет своих ссылок на странице контактов только на красный. Они синие на каждой другой странице, но для них просто имеет смысл быть красным на вашей странице контактов (по какой-то причине). Есть несколько способов сделать это.
- Вы можете объявить отдельную таблицу стилей для своей страницы контактов. Это не идеально, потому что это избыточно. Если вы вносите какие-либо другие изменения, вам всегда придется вносить их как в основную таблицу стилей, так и в таблицу стилей контактной страницы.
- Вы можете дать всем этим ссылкам уникальный класс на этой странице. Это не идеально, потому что это не очень семантически, и это также избыточно. Зачем применять класс к каждой отдельной ссылке на странице, если они действительно ничем не отличаются от ссылок в других местах на сайте, если говорить контекстуально?
- Лучшее решение — дать вашему телу уникальный идентификатор . Это решает проблему отлично. Вы можете использовать ту же таблицу стилей и нацеливать только те ссылки, которые вы хотите, с помощью одного селектора CSS.
Как это сделано
Просто, буквально просто примените идентификатор к тегу body:
...
</head>
<body id="contact-page">
...
Теперь для нашего примера сделать все ссылки на странице контактов красным вместо синего, просто используйте немного CSS, как это:
a {
color: blue;
}
#contact-page a {
color: red;
}
Как насчет более практического примера?
Ты получил это. Одна из наиболее полезных реализаций этого метода — в
навигации . Взгляните на этот пример навигации:
посмотрите, как вкладка форумов является вкладкой «активный»? Конечно, это всего лишь небольшое изменение в CSS, возможно, просто изменение положения фонового изображения. Возможно, XHTML выглядит примерно так:
...
<li><a href="/fieldtips">Field tips</a></li>
<li class="active"><a href="/forums">Forums</a></li>
...
«Активный» класс, применяемый к элементу списка, — это то, что смещает фоновое изображение. Это поможет, но как насчет того, когда мы перейдем на страницу Field Tips? Нам нужно будет удалить активный класс из вкладки форумов и применить его к вкладке Field Tips. Это не очень удобно. Это означает, что код для блока навигации уникален на каждой странице сайта. Итак, скажем, в будущем мы хотим добавить вкладку «Контакты», нам придется изменять код на каждой странице. Не весело. Давайте сделаем это немного умнее. Во-первых, мы не хотим включать блок навигации на каждой странице, мы хотим
включить его, вероятно, с помощью простого PHP-включения, например:
<?php include_once("nav.html"); ?>
Но тогда как нам применить «активный» класс к текущему элементу списка навигации?
Именно здесь мы применяем то, что мы только что узнали о присвоении тела уникальных идентификаторов! Вместо того, чтобы применять класс только к активному элементу списка, давайте применим уникальный класс к каждому отдельному элементу списка, а также присвоим нашему телу уникальный идентификатор.
...
</head>
<body id="field-tips">
...
<li class="fieldtips"><a href="/fieldtips">Field tips</a></li>
<li class="forums"><a href="/forums">Forums</a></li>
...
Теперь мы можем нацеливать определенные элементы в навигации с помощью некоторого умного CSS:
#field-tips li.fieldtips, #forums li.forums {
background-position: bottom;
}
Это означает, что код для блока навигации может
оставаться неизменным на каждой странице , но этот CSS будет влиять только на элемент навигации, принадлежащий этой странице, и «переключаться» в активное состояние.
Давайте станем еще динамичнее
Читатель CSS-Tricks Брайан оставил потрясающий
комментарий о том, как можно использовать PHP для применения уникального идентификатора к элементу body:
<body id="<?= basename($_SERVER['PHP_SELF'], ".php")?>">
Это вернет имя исполняемого файла PHP в качестве идентификатора (например, body id = «index.php»). Чтобы оставить часть .php, просто удалите часть .php. Больше информации о
базовом имени . Больше информации о
$ _SERVER .
Оригинальный пост
здесь .