ГЛЮЧУ (HTML + CSS). Нужна помощь гуру.

vaduz · Post by **vaduz** » 28 Apr 2004 22:01

DS: Цвет ссылок на странице зависит от порядка декларации стилей. Проверено на MSIE и на Mozilla.

Вопрос: это так задумано, это известный баг, или это мне померещилось?

Спасибо.

Пример:

Файл 1. Cсылка белая, как и надо:

Code: Select all

<html><head>

<style> 

.c_orange {background-color:#3A3A60;color:white;font:bold 11px arial, sans-serif}
.c_orange A:link{color: orange; text-decoration: none}
.c_orange A:visited{color: orange; text-decoration: none}

.c_white {background-color:#3A3A60;color:white;font:bold 11px arial, sans-serif}
.c_white A:link{color: white; text-decoration: none}
.c_white A:visited{color: white; text-decoration: none}

</style>

</head>

<body >
  <table><tr><td class="c_orange">
        <span class="c_white"><a href="x.cgi?dir=d">LINK</a></span>
  </td></tr></table>
</body>

</html>

Файл 2. Ссылка оранжевая, как совсем не надо :

Code: Select all

<html><head>

<style> 

.c_white {background-color:black;color:white;font:bold 11px arial, sans-serif}
.c_white A:link{color: white; text-decoration: none}
.c_white A:visited{color: white; text-decoration: none}

.c_orange {background-color:black;color:white;font:bold 11px arial, sans-serif}
.c_orange A:link{color: orange; text-decoration: none}
.c_orange A:visited{color: orange; text-decoration: none}

</style>

</head>

<body >
  <table><tr><td class="c_orange">
        <span class="c_white"><a href="x.cgi?dir=d">LINK</a></span>
  </td></tr></table>
</body>

</html>

Strannik223 · Post by **Strannik223** » 28 Apr 2004 23:50

vaduz wrote:DS: Цвет ссылок на странице зависит от порядка декларации стилей. Проверено на MSIE и на Mozilla.

Вопрос: это так задумано, это известный баг, или это мне померещилось?

Насколько я помню так задумано.
А вообще читайте первоисточники, они рулят, в буквальном смысле.

http://loc.stack.ru/projects/CSS2/cover.html
http://pyramidin.narod.ru/css2/index.htm

Vor · Post by **Vor** » 29 Apr 2004 15:43

vaduz wrote:DS: Цвет ссылок на странице зависит от порядка декларации стилей. Проверено на MSIE и на Mozilla.

Вопрос: это так задумано, это известный баг, или это мне померещилось?

Это Вам померещилось.

Вернее дело в том, что Вы по неопытности допустили две ошибки:

1) Запись стиля .c_orange A:link{...} является некорректной (учитывая то что Вы хотите получить). Получается, что Вы определили два разных стиля: .c_orange и A:link. И стиль для A:link повторяется дважды. Который стоит первым, тот и работает. Суть в том, что стиль .c_orange применяется ко всем тегам, где у Вас указан этот стиль class="c_orange". А стиль A:link применяется ко всем тегам <a> в документе. Нужно написать .c_orange:link{...}

2) В данной строчке
<a href="x.cgi?dir=d">LINK</a>
применяя стиль к тегу  Вы не применяете его к вложенному тегу <a>. Такова уж особенность. Нужно писать
<a href="x.cgi?dir=d" class="c_white">LINK</a>

Чтобы понять, что я сказал, возмите свой же код и добавьте какой-нибуть текст в тег , но до тега <a>. Например:

Code: Select all

<html><head> 

<style> 

.c_orange {background-color:#3A3A60;color:white;font:bold 11px arial, sans-serif} 
.c_orange A:link{color: orange; text-decoration: none} 
.c_orange A:visited{color: orange; text-decoration: none} 

.c_white {background-color:#3A3A60;color:white;font:bold 11px arial, sans-serif} 
.c_white A:link{color: white; text-decoration: none} 
.c_white A:visited{color: white; text-decoration: none} 

</style> 

</head> 

<body > 
  <table><tr><td class="c_orange"> 
        <span class="c_white">Test Text <a href="x.cgi?dir=d">LINK</a></span> 
  </td></tr></table> 
</body> 

</html>

А теперь поменяйте стили местами и посмотрите, что получиться.

На самом деле Вам нужно было написать так:

Code: Select all

<html><head> 

<style> 

.c_orange {background-color:#3A3A60;color:white;font:bold 11px arial, sans-serif} 
.c_orange:link{color: orange; text-decoration: none} 
.c_orange:visited{color: orange; text-decoration: none} 

.c_white {background-color:#3A3A60;color:white;font:bold 11px arial, sans-serif} 
.c_white:link{color: white; text-decoration: none} 
.c_white:visited{color: white; text-decoration: none} 

</style> 

</head> 

<body > 
  <table><tr><td class="c_orange"> 
        <span class="c_white"><a href="x.cgi?dir=d" class="c_white">LINK</a></span> 
  </td></tr></table> 
</body> 

</html>

А если  ни для чего больше не используется, то его вобще можно убрать.

vaduz · Post by **vaduz** » 29 Apr 2004 16:02

Cпасибо, прояснилось!

Кривой код генерился автоматом, видимо, задумка была сделать

Code: Select all

A.c_white:link {...   
<a class="c_white"...

Привет

ГЛЮЧУ (HTML + CSS). Нужна помощь гуру.

ГЛЮЧУ (HTML + CSS). Нужна помощь гуру.

Re: ГЛЮЧУ (HTML + CSS). Нужна помощь гуру.

Re: ГЛЮЧУ (HTML + CSS). Нужна помощь гуру.