- Веб-Шаблоны
- Шаблон интернет-магазина
- Шаблоны для CMS
- Facebook шаблоны
- Конструктор сайтов
Как добавить несколько стилей для одной ссылки на одной странице?
Ноябрь 15, 2010
В: Как добавить несколько стилей для одной ссылки на одной странице?
О: Мы можем обозначить стиль ссылки на одной странице , что действует только в определенной области страницы с помощью контекстныхселекторов.
Например:
<html>
<head>
<style type=»text/css»>
.body A:link {color: #ff6600; text-decoration: none}
.body A:visited {color: #0000ff; text-decoration: none}
.body A:active {color: #0000CC; text-decoration: none}
.body A:hover {color: #6699cc ; text-decoration: underline; color: red;}
.body2 A:link {color: #0000CC; text-decoration: underline overline}
.body2 A:visited {color: #0000CC; text-decoration: underline overline}
.body2 A:active {color: #0000CC; text-decoration: underline overline}
.body2 A:hover {color: #0000CC; text-decoration: underline; color: green;}
</style>
</head>
<body>
ONE TYPE OF LINKS
<br/>
<span class=»body»>
<a href=»http://www.yahoo.com»>YAHOO</a>
<br/>
<a href=»http://www.google.com»>GOOGLE</a>
</span>
<br/>
<br/>
ANOTHER TYPE OF LINKS
<br/>
<span class=»body2″>
<a href=»http://www.yahoo.com»>YAHOO</a>
<br/>
<a href=»http://www.google.com»>GOOGLE</a>
</span>
</body>
</html>
Обратите внимание, как мы используем <span>для определения контекста.
Это позволяет нам использовать различные стили ссылки на той же странице, а не ограничиватся использованием одного общего стиля.
Мы можем определить целые районы, где применяется определенный стиль ссылки. Таким образом, мы не нужно добавлять определение стиля для каждой ссылки в этой области.