Представьте что вы решили изменить внешний вид какого-нибудь элемента на определенной странице вашего сайта, например цвет фона или скрыть лишний блок. Есть несколько способов которые позволяют этого добиться.
- Можно прицепить альтернативную таблицу стилей для нужной страницы. Это не очень хорошо, т.к. если вы захотите поменять что-нибудь еще в стилях, вам придется делать это два раза.
- Можно назначить нужным элементам уникальный на каждой странице класс. Это не семантично и также не хорошо. Зачем назначать уникальный класс одинаковым элементам.
- Лучшее решение — это задать тегу
<body>уникальныйid. Вы можете использовать ту же таблицу стилей, просто добавив еще один селектор.
Как это происходит
Просто добавьте id к тегу <body>:
... </head> <body id="somepage"> ...
Теперь
a { color: blue; } #aboutpage a{ color: red; }
Теперь все ссылки на странице с <body id="aboutpage"> будут красными.
Использование
Один из самых полезных вариантов использования данной техники — изменить вид пункта меню на соответствующей странице.
Для этого необходимо каждому пункту меню назначить отдельный класс:
... </head> <body id="company"> ... <li class="portfolio"><a href="/portfolio">Портфолио</a></li> <li class="blog"><a href="/blog">Блог</a></li> <li class="service"><a href="/service">Услуги</a></li> <li class="company"><a href="/company">Компания</a></li> <li class="zakroma"><a href="/zakroma">Закрома</a></li> ...
#porfolio li.portfolio, #blog li.blog, #service li.service, #company li.company, #zakroma li.zakroma { background: url(images/activemenu.jpg) }
Добавим немного динамики
Простой способ как можно добавить уникальный id к <body> используя PHP:
<body id="<?= basename($_SERVER['PHP_SELF'], ".php")?>">
В этом случае в качестве значения id будет имя текущей страницы.
Оригинал: ID Your Body For Greater CSS Control and Specificity
Все сейчас себе записал потому что потом как всегда в тот момент когда это понадобится ищешь затрачивая кучу времени
А я предпочитаю вместо
#porfolio li.portfolio, #blog li.blog, #service li.service, #company li.company, #zakroma li.zakroma { … }
в CSS писать
ul li.active { … }
Здравствуйте! А можно ли сделать
ourpage.html?id=1
ourpage.html?id=2
ourpage.html?id=3
и таких сколько угодно с разным содержимым на JavaScript?
А вот так можно сделать?
ourpage.html?id=1&catid=9 (только я сам не понимаю, где такое применяют)
Если можно, ссылку дайте, пожалуйста… спасибо. до свидания.
soglasen
Да, прикольно, то что я так быстро вас нашел и нашел как раз то, что нужно.
Только начинаю учиться CSS штучкам, так что инфа ценная.
Спасибо!
Блин, думайте же головой своей. Вы хоть понимаете, что если клиент новый раздел через админку создаст, то вышеприведённый скрипт не будет корректно выделять текущие ссылки, пока вручную не напишешь новое правило???
Понимаем. А вы понимаете что на каждое правило есть исключение? Где-то этот приём будет уместен, а где-то нет.
Вот именно, этот приём очень уместен для смены фона страницы, изменения фонового рисунка в шапке, например. Но когда дело касается меню…
Сразу напрашивается постраничная навигация:
[body id=pagelink_2]
…
[a class=pagelink_1 href=link_1]title_[/a][a class=pagelink_2 href=link_2]title_2[/a]…[a class=pagelink_100 href=link_100]title_100[/a]
#pagelink_1 a.pagelink_1, #pagelink_2 a.pagelink_2, …, #pagelink_100 a.pagelink_100 {…}
Что касается навигации, то бывает например такое меню, где у каждой кнопки своя иконка или просто фон другой.
Согласен, когда для каждой ссылки свой стиль. В этом то и дело. Для меню в примере достаточно для активных ссылок просто указать класс .active. И составить одно CSS-правило.
Да, я просто неудачный пример привёл в статье.