[css] Link: różny kolor tekstu i podkreślenia Opcje

[chfast]

Witam.
W jaki sposób można zbudować łącze, które będzie miało różny kolor tekstu i podkreślenie.
Potrzebuje jeszcze zrobić łącze, którego pierwsza cześć będzie podkreślona a druga nie, ale to chyba da się połączyć z pierwszym problemem.

[wassago]

w stylach ustawasz
[xml:1:c892f27333]
a {
color: wartosc;
}
[/xml:1:c892f27333]
, a potem dodatkowo
[xml:1:c892f27333]<a href="wartosc"><font color="wartosc"></font></a>[/xml:1:c892f27333]

[Paul]

różny kolor tekstu i podkreślenie.

jesli chodzi o rozny kolor kazdej litery to:

html:
[xml:1:02a614226c]<a href=""><font class="link1">L</font><font class="link2">I</font><font class="link3">N</font><font class="link4">K</font></a>[/xml:1:02a614226c]
css:

Kod

.link1{color: red;}

.link2{color: blue;}

.link3{color: green;text-decotration: underline;}

.link4{color: gold;text-decotration: underline;}

efekt:

L

A jesli o rozny kolor liter a inny podkreslenia to nie wiem :/ ewentualnie zrob to jako gif....

[Seth]

Font w XHTMLu nie uzywa sie, wiec zamiast tego nalezalo by dac <span>.

[Paul]

thx za info.

[chfast]

Font w XHTMLu nie uzywa sie, wiec zamiast tego nalezalo by dac <span>.

No właśnie font to już przeszłość, ale <span> wcale nie działa (chyba, że coś źle robie).

[Zajec]

Najpierw opisujesz <a>:

Kod

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

a:visited      { text-decoration:none; color:#000000;}

a:active      { text-decoration:none; color:#000000;}

a:hover      { text-decoration:underline; color:#ff0000;}

(biorąc pod uwagę, że color z hover'ka będzie dotyczył podkreślenia po najcehaniu)


teraz takie coś:

Kod

a:hover .link { color:blue;}

(poprawione przez chfast'a - moje nie działało pod IE)
(ten color dotyczy koloru tekstu - i niczego wiecej - po najechaniu)


i pozostaje nam tylko stworzenie linku:
[xml:1:d5d4123311]<a href="http://php.pl"><span class=link>click me</span></a>[/xml:1:d5d4123311]

[chfast]

@ Zajec, Seth

Faktycznie <span> się do tego nadaje, nie wiem co wcześniej robiłem nie tak, ale już jest dobrze.

W rozwiązaniu Zajca trzeba wprowadzić jednak jedną poprawkę. Zamiast

Kod

.link:hover { color:blue;}

trzeba dać

Kod

a:hover .link { color:blue;}

Różnice są dwie, ale najważniejsza jest taka, że rozwiązanie Zajca nie działą pod MSIE.

[Dominik]

A moze tak:
[xml:1:d8704ac811]<span style="border-bottom: 1px solid Black;color: red">Red</span><br />
<span style="border-bottom: 1px dashed Green;color: blue">Blue</span><br />
<span style="border-bottom: 3px double Red;color: green">Green</span>[/xml:1:d8704ac811]
Daje wiecej mozliwosci (bo linia nie musi byc ciagla ale moze byc podwujna, kropkowana, przerywana itp).

[sf]

hmmm, takie cos:
[xml:1:0411af9536]<span color=red>nie dziala</span>[/xml:1:0411af9536]
wiec jaki jest szybki (czyli zwiezly w zapisie) sposob bez style/class uzycia takiego czegos jak ponizej?
[xml:1:0411af9536]<font color=red>dziala</font>[/xml:1:0411af9536]

[chfast]

hmmm, takie cos:
[xml:1:d4555fb8db]<span color=red>nie dziala</span>[/xml:1:d4555fb8db]

<span> jest znacznikiem do prezentacji stylów. Wiec trzeba to zrobić tak:
[xml:1:d4555fb8db]<span style="color: #f00;">działa!</span>[/xml:1:d4555fb8db]
Poczytaj o stylach css. Napewno ci się przyda .

@ Dominik: no to też jest sposób. Nawet kiedyś tak robiłem podkreślenia, ale teraz mi się zapomniało. Tylko jest jeden mały szczegół: takie podkreślenie troche za bardzo odstaje od tekstu. Ale nie można mieć wszystkiego .

[sf]

@ chfast

bleh, cos tam o style czytalem i stosuje, tylko nie wiedzialem, ze to sie nazywa znacznik stylow a to troche wyjasnia, dzieki