Kamrad.ru

Go Back   Kamrad.ru > Авторские форумы > Веб-дизайн, вёрстка и веб-программирование

 
 
Thread Tools Display Modes
Prev Previous Post   Next Post Next
Old 13-09-2003, 16:46   #39
Mips
Модератор
Злыдень немрущий
 
Mips's Avatar
 
Join Date: сен 2000
Location: Краснодар
Сообщений: 2,333
Дабы прекратить раздувание темы, объясню в кратце. Итак,
a{...} - действует на все ссылки в документе и на все виды (см.ниже).
a:что-то {...} - действует на все ссылки в документе определённого вида. Под видом понимается, как говорил
Alex Spade, следующие названия:
link - не просмотренная ссылка
visited - просмотренная
active - на которую нажимают
hover - на которую наводят мышь
Т.е. a{color: red;} сделает все ваши ссылки красного цвета. Стили применяются последовательно, т.е. если вы напишите a{color: red;}, а потом a{color: green;}, то все ссылки будут зелёного цвета. Далее, при наведении используется hover. Выглядит как
a{color: red;}
a:hover{color: green;}
Это означает, что все ссылки красные, а при наведении на них, они станут зелёными.
Так, с этим разобрались. Теперь классы. Классы действуют только на те объекты, в которых указан class. Классы в стилях начинаются с точки. Итак, все ссылки у нас красные. Пишем следующую строку: .myclass{color:blue;}, а в ссылке пишем <a href="#" class="myclass">новый линк</a> и видим, что этот линк стал синего цвета, в то время как все остальные красные. На классы действует hover и еже с ним, если этот класс применяется к ссылкам. Например, .myclass:hover{color:yellow} задаёт всем ссылкам, у которых прописан class=myclass, что при наведении на них эти ссылки будут жёлтыми.
Порой бывает, что нужно создать таблицу или область, в которой ссылки должны быть другого цвета, отличного от цвета всех ссылок. Да, можно каждой ссылке прописать класс, но это неудобно. Можно сделать проще. Создадим область, вернее контейнер div.
<style>
a{color:red;}
a:hover{color:green;}
.toDiv a {color: blue;}
.toDiv a:hover{color:yellow;}
</style>
Теперь создаём контейнер <div> с классом toDiv и пишем в нём несколько ссылок.
<a href="#">обычный линк</a>
<div class="toDiv">
<a href="#">линк в DIV'е</a>
<a href="#">линк в DIV'е</a>
</div>
Видим, что первый линк красный, остальные два синие. Заметьте, что в стилях указана не запятая, а пробел. Запятая - это перечисление к кому относится данный стиль, а пробел указывает, что в контейнере с классом toDiv содержатся <a> и к последним применяется данный стиль.
Теперь добавим таблицу, в которой нужно изменить цвет ссылок. Добавим это в наш стиль.
<style>
.toTable a{color:blue;}
.toTable a:hover{color:yellow;}
</style>
А теперь сама таблица.
<a href="#">обычный линк</a>
<table class="toTable">
<tr><td><a href="#">линк в таблице</a></td></tr>
<tr><td><a href="#">линк в таблице</a></td></tr>
</div>

Далее, стили можно указывать и по id. В стилях передименем пишется номер, а в ссылке пишется id="имя"
<style>
#myID {color:red;}
</style>
<a href="#" id="myID">линк в DIV'е</a>

Комментировать строки в стилях можно ставя перед строкой собаку, но лучше так: /* это закомментировано */
Есть несколько НО. Во-первых, чтобы цвета работали, должен быть прописан href в ссылках. Во-вторых, нельзя использовать в ссылках <font> и еже с ним (цвета работать не будут). Всё задаётся в стилях. В-третих, стили дополняют друг друга, а не заменяют. Заменяется только то, что было уже указано. Т.е. если вы написали a{color:red;text-decoration:none;}, а потом a{color:green;}, то ссылка будет без подчёркивания и зелёная. В-четвёртых, hover и еже с ним (в общем всё то, что пишут после двоеточия) работает ТОЛЬКО на тэг <а>.

ps: Думаю, что описАл понятно. Если есть вопросы, обращайтесь в аську. Только сначала сами помучайтесь, перечитайте этот пост, а потом уже в асю.
Mips is offline   Дневник [Ответить с цитированием]
 


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +3. The time now is 02:40.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.
Любое использование материалов сайта
возможно только с разрешения его администрации.