Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] Link: różny kolor tekstu i podkreślenia
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
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
Cytat
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
Cytat
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
Cytat
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
Cytat
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 biggrin.gif .

@ 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 smile.gif .
sf
@ chfast

bleh, cos tam o style czytalem i stosuje, tylko nie wiedzialem, ze to sie nazywa znacznik stylow smile.gif a to troche wyjasnia, dzieki
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.