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
které by měly hoover různé barvy, ale jinak by byly stejné?
blaaablaaa
Profil
a.odkaz:hover { color: blue; }

nevim, jestli to je to, co chces, ale tohle jsem z tveho prispevku pochopil ;)
Miloš
Profil
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.
douda
Profil
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
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
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
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

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: