| Autor | Zpráva | ||
|---|---|---|---|
| douda Profil |
Rád bych docílil různého nastylování různých odkazů.
V externím stylopisu mám definované odkazy takto: a {color:black; text-decoration:none}
a:hover {color:orangered; text-decoration: underline}Dále v HTML mám již dva styly odkazů: .odkaz {text-decoration:underline}
.odkaztucne {text-decoration:none; font-weight:bold}Jak lze docílit toho, abych ještě vytvořil odkazy podle třídy .odkaz |
||
| blaaablaaa Profil |
#2 · Zasláno: 30. 4. 2009, 15:00:49
a.odkaz:hover { color: blue; }nevim, jestli to je to, co chces, ale tohle jsem z tveho prispevku pochopil ;) |
||
| Miloš Profil |
#3 · Zasláno: 30. 4. 2009, 23:06:51 · Upravil/a: Miloš
Buď dej třídu jednotlivým odkazům (například pro odlišení externích odkazů):
<a href="url" class="externi">Odkaz ven</a>
…
<style>
a.externi {pravidla}
a:hover.externi {pravidla}
</style>
anebo pokud jde o odkazy v nějakém konkrétním místě, použij třídu nadřazeného prvku: <div class="poznamky">
<p><a href="url" >Odkaz</a>
…
<style>
.poznamky a {pravidla}
.poznamky a:hover {pravidla}
</style>
anebo – jde-li třeba o odkazy v seznamech, použij odlišení nadřazeným elementem (podobně jako třídou v předchozím příkladě): <ol>
<li><a href="url" >Odkaz</a>
…
<style>
li a {pravidla} /* pro všechny <li> */
li a:hover {pravidla} /*pro hover všech <li> */
ol li a {pravidla} /* pro <li> v číslovaných seznamech (nikoli tedy třeba v odrážkových <ul> */
ol li a:hover {pravidla} /* pro hover <li> v číslovaných seznamech */
</style>
Doplňuji: Všechny tyto odkazy použijí napřed obecnější pravidla, která definuješ pro všechny odkazy. Protože však mají výše uvedená pravidla vyšší prioritu než pravidla pro a či a:hover, tak je taky přebijí. Tzn. že u pravidel s přesnějšími selektory změň to, v čem se mají dané odkazy odlišovat od všech ostatních. |
||
|
Časová prodleva: 6 dní
|
|||
| douda Profil |
#4 · Zasláno: 6. 5. 2009, 15:37:23 · Upravil/a: douda
Miloši, tak tohle je perfektní manuál, díky.
Teď jsem se znovu zamotal s odkazy a jajich hovery, tak navážu dál v tomhle vlákně. Stránku jsem nahrál sem. Problém mám ten, že u navštívených odkazů nefunguje hover tak, jako u těch nenavštívených. Čím to je? Něco mi našeptává, že musím lépe nastavit pseudotřídy. Jdu správným směrem, nebo jsem mimo mísu? Díky |
||
| Bubák Profil |
#5 · Zasláno: 6. 5. 2009, 19:25:27 · Upravil/a: Bubák
Při stejné konkrétnosti deklarace platí poslední pravidlo, rozeberu část tvého CSS:
a {color:black;
text-decoration:none} /* všechny elementy a */
a:hover {color:orangered;
text-decoration:underline} /* všechny elementy a přejížděné myší */
a:visited {color:black;
text-decoration:none} /* všechny navštívené odkazy, přebíjí předešlé pravidlo */Protože deklaruješ totožný styl pro a a pro a:visited, můžeš deklaraci pro a:visited vynechat. Pokud bys potřeboval odlišit navštívené odkazy, prohoď pořadí a:hover a a:visited. |
||
| Miloš Profil |
#6 · Zasláno: 6. 5. 2009, 21:08:06
Celý ten příklad by se dal navíc zjednodušit:
a:link, a:visited {color: black; text-decoration: none;}
a:hover {color: orangered; text-decoration: underline;}Nelíbí se mi ale, že nepodtrháváš odkazy (jen :hover) – máš pro to opravdu zásadní důvod? Vřele doporučuji ke studiu povinnou četbu http://knihy.cpress.cz/Book.asp?ID=2364 Dozvíš se, že návštěvníci stránek neradi přemýšlejí a rychle ztrácejí (někdy zdánlivě bezdůvodně) trpělivost a odcházejí. Nepodtržený odkaz nutí přemýšlet, jestli to odkaz je nebo není. Podtržený odkaz dává jednoznačně najevo „Jsem odkaz“. |
||
| douda Profil |
#7 · Zasláno: 7. 5. 2009, 09:22:17
Tak jsem na to zdá se díky Vám přišel, děkuju.
Hlavní problém na co jsem nemohl přijít bylo to, že u navštívených odkazů nefungoval hover. Ve stylopisu jsem odstranil a:hover a přehodil jsem pořadí zápisu stylování odkazů a jejich tříd, takže je to teď takhle: .podtrzeny {text-decoration:underline}
.nepodtrzeny {text-decoration:none; font-weight:bold}
a {color:black; text-decoration:none}
a:hover {color:orangered; text-decoration:underline}Nepodtržené budou odkazy u kterých je to víceméně jasné, že to odkazy jsou, odkazy například zanořené v textu podtržené budou. Proto mají dvě třídy. Hlavní zásadní důvod pro to mám ten, že se mi to tak líbí :-) Doufám že to tak strašně nepřehledné nebude. díky |
||
|
Časová prodleva: 15 let
|
|||
0