Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Почтовая рассылка

Подписчиков: -1
Последний выпуск: 19.06.2015

вопрос css про ссылку

381
26 сентября 2003 года
qik
116 / / 20.06.2000
можно ли через css сделать вот что:
при наводе на ссылку ("ПРИмер") часть "ПРИ" изменяет свой цвет, а "мер" тоже изменяет, но на другой, причем все слово "ПРИмер" является целостной ссылкой. если плохо объяснил(нужно чтоб части ссылки обрабатывались отдельно, но ссылка была одна по url)
4
26 сентября 2003 года
mike
3.7K / / 01.10.2002
Думаю, что это невозможно
381
27 сентября 2003 года
qik
116 / / 20.06.2000
Цитата:
Originally posted by mike
Думаю, что это невозможно



а мож вот так - создать два классы для первого и второго с разными параметрами а уже в самом html засунуть в какой-нить тег ссылкой

 
Код:
<div class="pri">ПРИ</div><div class="mer">мер</div>
372
30 сентября 2003 года
Flying
312 / / 20.09.2000
Цитата:
Originally posted by qik
а мож вот так - создать два классы для первого и второго с разными параметрами а уже в самом html засунуть в какой-нить тег ссылкой
 
Код:
<div class="pri">ПРИ</div><div class="mer">мер</div>



Почти правильно, только не учел, что <DIV> - блочный элемент, и соответственно его нельзя использовать внутри ссылки.
Вот рабочий пример, работает даже в IE (как ни странно), хотя и немного неправильно.

 
Код:
<style type="text/css">
A {color: #339; text-decoration: underline}
A .s1 {color: #060}
A .s2 {color: #600}
A:hover {color: #33f}
A:hover .s1 {color: #0f0; text-decoration: overline}
A:hover .s2 {color: #f00; text-decoration: line-through}
</style>
<span class="s1">ПРИ</span><span class="s2">мер</span>
381
30 сентября 2003 года
qik
116 / / 20.06.2000
Цитата:
Originally posted by Flying

Почти правильно, только не учел, что <DIV> - блочный элемент, и соответственно его нельзя использовать внутри ссылки.
Вот рабочий пример, работает даже в IE (как ни странно), хотя и немного неправильно.
 
Код:
<style type="text/css">
A {color: #339; text-decoration: underline}
A .s1 {color: #060}
A .s2 {color: #600}
A:hover {color: #33f}
A:hover .s1 {color: #0f0; text-decoration: overline}
A:hover .s2 {color: #f00; text-decoration: line-through}
</style>
<span class="s1">ПРИ</span><span class="s2">мер</span>


во... то что мне надо....=) спасибо, а как на счет роботоспособности в опере, нецкейпе експлорере разных версий?

372
30 сентября 2003 года
Flying
312 / / 20.09.2000
Цитата:
Originally posted by qik
во... то что мне надо....=) спасибо, а как на счет роботоспособности в опере, нецкейпе експлорере разных версий?



В Mozilla 1.4 работает замечательно, именно так, как должно. Уверен, что будет работать нормально и в более старых версиях Mozilla, а так же в Netscape 6,7 и прочих браузерах на движке Gecko (Mozilla Firebird, Galeon, KMeleon, Chimera и т.п.).
В IE6 работает полностью правильно. В IE5.01 работает почти правильно если не учитывать тот факт, что IE5 неправильно обрабатывает text-decoration в данной ситуации (на самом деле подчеркивание у ссылки должно быть синим, а не двуцветным). В IE5.5 потестить не могу.
В Opera 6 не поддерживается задание дочерних элементов для элементов с псевдоэлементами, как это используется у меня, соответственно меняется только цвет подчеркивания.
В Opera 7 все работает правильно, но наблюдаются проблемы с обработкой событий мыши, так что меняется стиль только у половинки ссылки. Может пофиксили в 7.20, у меня 7.11
В Konqueror и Safari потестировать не могу по причине неимения соответствующих операционок, но как прогноз - скорее всего работает правильно, возможно с небольшими проблемами.
В Netscape 4 не работает по очевидным причинам.

381
30 сентября 2003 года
qik
116 / / 20.06.2000
я как-то раньше не замечал особой структуры постороения css - ведь предидущий пример не будет работать без
A:hover {color: #33f}
и
A {color: #339; text-decoration: underline}

вывод: нужно соблюдать иерархию.
372
30 сентября 2003 года
Flying
312 / / 20.09.2000
Цитата:
Originally posted by qik
я как-то раньше не замечал особой структуры постороения css - ведь предидущий пример не будет работать без
A:hover {color: #33f}
и
A {color: #339; text-decoration: underline}

вывод: нужно соблюдать иерархию.



Очень советую посмотреть вот сюда:
http://www.w3.org/TR/REC-CSS2/selector.html#q1

и понять, что ты ОЧЕНЬ многого не знаешь о том, какие селекторы могут быть в CSS :) Жаль только что многие интересные комбинации нормально поддерживает только Mozilla.

381
30 сентября 2003 года
qik
116 / / 20.06.2000
ага есть в этом соль.... интересно для кого это все было создано ??? я не понимаю, даже супер-пупер верстальщики-хтмэльщики пользуются этим процентов на 25 в лучшем случае.
372
30 сентября 2003 года
Flying
312 / / 20.09.2000
Цитата:
Originally posted by qik
ага есть в этом соль.... интересно для кого это все было создано ??? я не понимаю, даже супер-пупер верстальщики-хтмэльщики пользуются этим процентов на 25 в лучшем случае.



А при чем здесь "верстальщики-хтмэльщики"? :) Или ты считаешь, что спецификации CSS разрабатывались только для применения в связке с HTML? В таком случае ты очень сильно неправ и незнаком с деятельностью W3C. Начать хотя бы с того, что CSS можно использовать с XML, а это автоматически означает "с любым языком разметки, построенном на основе XML". Сюда же, кстати, попадает и тот же HTML (точнее XHTML), который является языком, построенном на XML. А у XML-языков есть намного больше всяких разных применений. Возьми те же MathML (язык для задания математических формул, пример можно посмотреть вот здесь с помощью Mozilla, которая понимает MathML) или SVG (язык для описания векторной графики, пример можно посмотреть здесь, хотя нативная поддержка в Mozilla пока в стадии беты и стандартные релизы SVG не отображают, но есть плагин к IE, который рендерит SVG).
Далее, не забывай о такой вещи как @media в CSS. Она, если ты не знаешь, позволяет задавать стили не только для отображения документа на экране монитора, но и на бумаге и даже для речевого "отображения".
Да и у CSS в применении к HTML есть гораздо больше применений, чем могут себе представить "верстальщики-хтмэльщики". Например запусти в Mozilla вот эти примеры:

http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html
http://www.meyerweb.com/eric/css/edge/popups/demo.html
http://www.meyerweb.com/eric/css/edge/slantastic/holiday.html
http://www.meyerweb.com/eric/css/edge/menus/demo.html
http://dynarch.com/mishoo/home.epl - здесь помимо CSS используется DOM и JavaScript.

Возможно, что после этого ты захочешь узнать о CSS больше :)

381
01 октября 2003 года
qik
116 / / 20.06.2000
спасибо, за консультацию было познавательно. но ведь все равно в сети очень редко встречаются MathML и SVG, проще ,по-моему, да и "легче" будет все тоже но сделанное например картинками. ведь надо помнить и о людях с опереой и нецкейпом.
372
01 октября 2003 года
Flying
312 / / 20.09.2000
Цитата:
Originally posted by qik
спасибо, за консультацию было познавательно. но ведь все равно в сети очень редко встречаются MathML и SVG, проще ,по-моему, да и "легче" будет все тоже но сделанное например картинками. ведь надо помнить и о людях с опереой и нецкейпом.



Ты смотришь на вещи слишком узко. А если например необходимо проиндексировать этот документ поисковиком? Или перевести его в другой формат? Что ты будешь делать с документом "с картинками"?

381
03 октября 2003 года
qik
116 / / 20.06.2000
логично, но врядли поисковые роботы проиндексят MathML или SVG, ладно. оффтоп.
Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог