![]() |
![]() |
#39 |
Модератор
Злыдень немрущий 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: Думаю, что описАл понятно. Если есть вопросы, обращайтесь в аську. Только сначала сами помучайтесь, перечитайте этот пост, а потом уже в асю. |
![]() |
Дневник [Ответить с цитированием] |
|
|