Formatowanie własności elementu a

Teksty będące łączami są domyślnie podkreślone. W przypadku łączy nieodwiedzonych mają barwę niebieską, a w przypadku odwiedzonych fioletową. To standardowe formatowanie powinno być dostosowane do wymogów projektu graficznego w arkuszu stylów.

Projektant dysponuje także możliwością zróżnicowania łączy aktywnych i łączy, nad którymi aktualnie umieszczono kursor myszki. Wymienione cztery różne stany łączy można zróżnicować za pomocą pseudoklas:

• a:link - ustawia styl łączom nieodwiedzonym (takim, które nie są wymienione w historii przeglądarki),
• a:visited - ustawia styl łączom odwiedzonym (tzn. wymienionym w historii przeglądarki),
• a:hover - ustawia styl łączom w momencie, gdy wskaźnik myszki znajdzie się nad łączem,
• a:active - ustawia styl łączom aktualnie wybranym.

Deklaracje pseudoklas należy definiować w takiej kolejności, jak została podana powyżej (a więc najpierw a:link, potem a:visted, następnie a:hover i na końcu a:active). Zwyklea:link i a:visted łączy się w jedną deklarację, a z deklarowania a:active czasem rezygnuje.

Wyłączanie podkreślenia

Dość często spotykanym zabiegiem jest wyłączanie podkreślenia tekstów odnośników, zastępowane np. odmiennym kolorem. Podejmując taką decyzję, warto pamiętać o problemach osób nierozpoznających kolorów, dla których podkreślenie może być jedynym sygnałem, iż mają do czynienia z odnośnikiem. Zdecydowanie odradzanym zabiegiem jest zwłaszcza wyłączanie podkreślenia łączy nieodwiedzonych umieszczonych wewnątrz tekstów!

Dziedziczenie własności elementu a

Definiując właściwości znacznika a, pamiętać trzeba, że niektóre z nich są dziedziczone. Zwróć uwagę szczególnie na takie właściwości, jak: color, font-family, font-size, letter-spacing word-spacing, white-space. Pamiętaj również, że własność text-decoration nie jest dziedziczona.

Ustalając sposób formatowania odnośników, definiujemy najpierw style globalne, a więc dla znacznika <a> i pseudoklas, a później własności dla konkretnych klas odnośników, używanych w modułach czy w tekstach. Szczegóły przedstawiamy w dalszej części.

Tytuły i nazwy łączami

Dostępne w konfiguracji Joomla i Mambo parametry umożliwiają przekształcenie tytułów i nazw oraz artykułów w aktywne łącza. Jeśli taka decyzja zostanie podjęta, tytuły i nazwy obejmowane są znacznikiem <a>:

• w przypadku nazw kategorii - bez przypisanej klasy,
• w przypadku artykułów - z przypisaną mu klasą .contentpagetitle.

Przypisanie klasy .contentpagetitle znacznikowi <a>, obejmującemu tytuł artykułu może spowodować, i często powoduje, sformatowanie tytułu bez uwzględnienia stylów właściwych klasie <contentheading>. Tej sytuacji można zapobiec. Wystarczy zachować w arkuszu stylów odpowiednią, uwzględniającą zasadę dziedziczności kolejność, np.:

 
/* najpierw style dla znacznika a*/
a.contentpagetitle:link, a.contentpagetitle:visited {
   text-decoration        : none;
   color                  : #D01100;
      }
a.contentpagetitle:hover {
   text-decoration        : underline;
   color                  : #B00000;
      }
/* następnie kolor,  rodzina i rozmiar czcionek*/
 
h1,h2,h3,h4,h5,h6,.componentheading,.contentheading,.contentpagetitle {
   color                  : #D01100; /*jeśli wszystkie tytuły ten sam kolor */
}
 
h2, contentpagetitle, .componentheading, .contentheading {
   font                   : 600 1.4em/1.4em  Arial, Helvetica, sans-serif;
   }

Łącza w wykazach i modułach

• .category: formatuje wygląd nazwy kategorii na stronach z wykazem zawartości sekcji).
• .blogsection: formatuje odnośniki do blogów w wykazie Zobacz też na stronach typu magazynowego.
• .readon: formatuje wygląd odnośnika Czytaj całość w blogach.
• .latestnews: formatuje wygląd odnośników w module Nowości,
• .mostread: formatuje wygląd odnośników w module Popularne

Dla każdej z tych klas można zdefiniować własne style. Jeśli nie zostaną zdefiniowane, Joomla użyje reguł określonych dla elementu <a>, a jeśli i te nie zostaną sformatowane, użyje domyślnych reguł przeglądarki.

Łącza w tabeli z wykazem artykułów

W tabeli kategorii artykułów łącza do artykułów standardowo są formatowane zgodnie z własnościami przypisanymi znacznikowi <a>. Jeśli chcesz zmodyfikować sposób ich wyświetlania, np. wyłączyć niekonieczne tutaj podkreślanie, zastosuj selektor potomka:

 
tr.sectiontableentry1 td a, tr.sectiontableentry2 td a{text-decoration: none;}    
tr.sectiontableentry1 td a:hover, 
tr.sectiontableentry2 td a:hover{text-decoration: underline;}