24 июня 2009 г.

Хороший сайт про CSS (ну и про другие вещи, связанные с вебом)

Делая html-версию сайта на флеше, столкнулся с затруднением (так сказать, на ровном месте) - ссылки, переопределенные через css, не хотят изменять свой вид при наведении после того, как один раз уже были посещены.

Срочно пустился в поиски - как корректно прописать css для нескольких видов ссылок (ну типа одини для меню, другие для текста и пр. - то есть как корректно прописать несколько классов ссылок).

Наткнулся на очень хороший сайт, где есть много полезного про CSS (ну и другая байда есть, по Фотошопу, SEO и пр.)

Вот адресок: http://vremenno.net/

Там куча всяких статей, особенно интересные про то, как сделать при помощи CSS блоки с закругленными углами.

P.S. Эх-ма, блин...

На данном сайте решения не нашлось, но оно все таки есть.

Просто с CSS я в последний раз работал лет 5 назад. А он, оказывается, сильно продвинулся.

Раньше (по старой памяти) достаточно было прописать*:

a:link {color:#BDD262; text-decoration: underline;} a:hover {color:#ffffff; text-decoration: underline;} a:active {color:#BDD262; text-decoration: underline;} a:visited {color:#BDD262; text-decoration: underline;}

И все, даже если ссылка была посещена, то при наведении курсора она все равно принимала то значение, которое задано через a:hover.

* Небольшое примечание - эти ссылки выводятся на черном фоне.

А теперь у этих свойств появились свои подсвойста, и надо их напрямую указывать. То есть, теперь есть не просто ссылка, а "ранее посещенная ссылка, на которую наведен курсор", "ранее посещенная ссылка, которая в текущий момент является активной и т.д.". Видимо, это и есть CSS 3 (м-да, отстал от стандартов...)

Ладно, лучше покажу код, который заработал:

a:link {color:#ffffff; text-decoration: none;}

a:hover {color:#BDD262; text-decoration: none;} a:link:hover {color:#BDD262; text-decoration: none;} a:visited:hover {color:#BDD262; text-decoration: none;} a:active {color:#ffffff; text-decoration: none;} a:visited:active {color:#ffffff; text-decoration: none;} a:visited {color:#ffffff; text-decoration: none;}

Вот, в принципе, и все.

Комментариев нет :

Отправить комментарий