Lekcja 6: Odnośniki

Możesz stosować to czego nauczyłeś się w poprzednich lekcjach dla odnośników (tzn. zmieniać kolory, czcionki, podkreślenia, itd). Nowością jest to że CSS pozwala definiować właściwości zależne od stanu odnośnika,czyli tego czy odnośnik jest aktywny, odwiedzony, nie odwiedzony lub kursor jest nad odnośnikiem. To daje możliwość dodania użytecznych efektów na twojej stronie internetowej. Aby kontrolować te efekty wykorzystuje się tak zwane pseudo-klasy.

Co to jest pseudo-klasa?

Pseudo-klasa pozwala ci zaingerować w sprawę warunków lub zdażeń gdy definiujesz właściwości CSS dla znaczników HTML.

Popatrzmy na przykład . Jak już wiesz, odnośniki określamy znacznikiem <a>. Możemy więc użyć a jako selektor w CSS:

a {
	color: blue;
}

Odnośnik może mieć różne stany. Na przykład, może być odwiedzony lub nie odwiedzony. Możesz użyć pseudo-klas do skojarzenia różnych stylów zależnie od stanów.

a:link {
	color: blue;
}

a:visited {
	color: red;
}

Użyj a:link oraz a:visited odpowiednio dla odnośników nie odwiedzonych oraz odwiedzonych. Odnośniki aktywne mają pseudo-klasę a:active oraz a:hover jeżeli kursor jest nad odnośnikiem.

Przebrniemy przez każdą z czterech pseudo-klas z przykładami i dokładnym wyjaśnieniem.

Pseudo-klasa: link

Pseudo-klasa :link jest używana dla odnośników prowadzących do stron nie odwiedzonych przez użytkownika.

W przykładzie poniżej, nie odwiedzony odnośnik będzie jasno niebieski.

a:link {
	color: #6699CC;
}

Pseudo-klasa: visited

Pseudo-klasa :visited jest używana dla odnośników prowadzących do stron odwiedzonych już przez użytkownika. Na przykład, kod poniżej uczyni wszystkie odwiedzone odnośniki ciemno purpurowe:

a:visited {
	color: #660099;
}

Pseudo-klasa: active

Pseudo-klasa :active jest używana dla odnośników aktywnych.

Przykład zamieni kolor tła aktywnych odnośników na żółty:

a:active {
	background-color: #FFFF00;
}

Pseudo-klasa: hover

Pseudo-klasa :hover jest używana kiedy kursor myszy najedzie na odnośnik.

Można to wykorzystać do tworzenia interesujących efektów. Na przykład, jeżeli chcemy aby nasze odnośniki były pomarańczowe i pochylone kiedy kursor najedzie na odnośnik, kod CSS powinien wyglądać następująco:

a:hover {
	color: orange;
	font-style: italic;
}

Przykład 1: Efekt kiedy kursor jest nad odnośnikiem

Bardzo popularne jest tworzenie różnych efeków kiedy kursor jest nad odnośnikiem. Popatrzmy więc na kilka dodatkowych przykładów związanych z pseudo-klasą :hover.

Przykład 1a: Odstęp między literami

Jak pewnie pamiętasz z lekcji 5, odstęp między literami można regulować poprzez właściwość letter-spacing. Można zastosować tą właściwość do odnośnika jako specjalny efekt:

a:hover {
	letter-spacing: 10px;
	font-weight:bold;
	color:red;
}

Przykład 1b: UPPERCASE and lowercase

W lekcji 5 patrzyliśmy na właściwość text-transform, która zmieniała wielkość liter. To także może zostać użyte jako efekt w odnośniku:

a:hover {
	text-transform: uppercase;
	font-weight:bold;
	color:blue;
	background-color:yellow;
}

Te dwa przykłady ilustrują ideę praktycznie nieskończonych możliwości kombinacji różnych właściwości. Możesz stworzyć swój własny efekt - spróbuj sam!

Przykład 2: Usuń podkreślenie odnośnika

Często zadawanym pytaniem jest jak usunąć podkreślenie odnośnika ?

Powinieneś rozpatrzyć uważnie czy jest potrzebne usunięcie podkreślenia, co może znacząco zmniejszyć użyteczność twojej strony. Ludzie są przyzwyczajeni do niebieskiego podkreślenia odnośników na stronach internetowych i wiedzą że mogą na nie kliknąć. Nawet moja mama wie o tym! Jeżeli zmienisz podkreślenie i kolor odnośnika istnieje duża szansa że użytkownik zmiesza się i nie zdobędzie pełnych korzyści z treści umieszczonej na twojej stronie.

To smutne, bardzo łatwo jest usunąć podkreślenie z odnośnika. Jak już wiesz z lekcji 5, właściwość text-decoration może zostać użyta do określenia czy tekst ma być podkreślony czy też nie. Aby usunąć podkreślenie, po prostu ustaw wartość właściwości text-decoration na none.

a {
	text-decoration:none;
}

Alternatywnie, możesz ustawić text-decoration wraz z innymi właściwościami dla wszystkich czterech pseudo-klas.

a:link {
	color: blue;
	text-decoration:none;
}

a:visited {
	color: purple;
	text-decoration:none;
}

a:active {
	background-color: yellow;
	text-decoration:none;
}

a:hover {
	color:red;
	text-decoration:none;
}

Podsumowanie

W tej lekcji nauczyłeś się o pseudo-klasach oraz używania w ich obrembie paru właściwości z poprzednich lekcji. To powinno pokazać ci ieę możliwości jakie dostarcza CSS.

W następnej lekcji nauczymy cię jak definiować właściwości dla konkretnego elementu oraz grupy elementów.