O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

Właściwości odnośników cz.1 wygląd linków

Linki w tekście dodajemy poprzez znacznik a, posiadać on może kilka atrybutów z których jedynym niezbędnym jest href czyli atrybut definiujący adres strony lub miejsca, do których następuje odwołanie. Głównym celem linku jest przeniesienie w inne miejsce. W większości wypadków linki są w specjalny sposób wyróżnione z tekstu. Nawet jeżeli szablon tego nie zrobi zajmie się tym przeglądarka. Większość z nich podkreśla linki i zmienia ich kolor: niebieskie są linki nieodwiedzone, fioletowe odwiedzone, czerwone aktywne. Można to oczywiście zmienić sobie w ustawieniach przeglądarki ale to nie jest tematem dzisiejszej notki.

CSS bloksa: znacznik linku

W dalszej części wpisu znajdują się informacje o tym gdzie w szablonie opisywane są linki (jakie selektory), jakich cech najczęściej używa się do wyróżnienia linków, jakich pesudoklas używa się przy linkach. A na koniec kilka przykładów opisów linków z moich szablonów.

W związku z tym, że przeglądarka dodaje kilka cech wyglądu linkom a znacznik linku jest zazwyczaj najbliżej ciała to ustawienia przeglądarki będą brane pod uwagę jako ważniejsze od ogólnych ustawień dla tekstu wpisanych w szablonie. Dlatego konieczne jest dodanie opisu linków osobno.

Przykładowo tytuły naszych notek są linkami. Za wygląd tytułów odpowiedzialne są selektory .BlogWpisItemTytul, .TytulKomentowanegoWpisu, #StatycznaTytul ale nawet jeśli określimy dla nich kolor czy brak podkreślenia to o ile nie będzie w szablonie osobnego opisu linków to będą one miały wygląd przeglądarkowy.

Gdzie opisać linki?

W zasadzie pytanie powinno brzmieć, które linki opisać bo gdzie? to jest oczywiste: w szablonie (WYGLĄD->EDYCJA CSS). W arkuszu opis linków przewija się na całej jego długości jednak najistotniejsze jest opisanie selektora odpowiedzialnego za wygląd wszystkich linków czyli po prostu a. Polecam opisanie koloru i rozważenie zrezygnowania z podkreślenia, które dodaje przeglądarka.

a {
 color: tomato;
 text-decoration:none;
}

Znaleźć wszystkie opisy linków w szablonie nie będzie łatwo, link to a i nawet chcąc skorzystać z wewnętrznej wyszukiwarki (Ctrl+F), którą posiadają wszystkie przeglądarki trudno ogarnąć wyniki wyszukiwania gdy szukanym selektorem jest jedna litera - a.

Dlatego też wypisałam zdecydowaną większość kombinatorów opisujących w szablonie linki. Na mojej liście uwzględniłam selektory posiadające klasy bądź identyfikatory, w których umieszczono linki a także linki, które mają przypisane własne klasy. Oznacza to, że na liście znajduje się wiele różnych wariantów, których w ogóle nie używam. Z tego powodu zaznaczyłam te, które są najwygodniejsze i najczęściej z nich korzystam.

CSS bloksa: znacznik linku

Tak więc poza głównym opisem linków przy a polecam jeszcze ewentualnie link tytułu bloga, tytułu notki, linki w notce a także linki w wąskiej szpalcie. Lepiej nie przesadzać ze sposobami wyróżnienia. W zasadzie mówi się, że w jednym tekście mogą znaleźć się trzy różne wizualnie rodzaje teksty, przy czym liczy się każde pochylenie, podkreślenie, wzmocnienie, powiększenie, etc. Oznacza to, że w jednym szablonie tą zasadę łamię wielokrotnie, polecam więc wszystko sobie najpierw przemyśleć a potem wybrać linki do zmiany. Bo nie wystarczy, że można trzeba się zastanowić czy trzeba.

Jak opisać linki

Zwyczajem jest, że linki wyróżniają się kolorem i dodatkowo często tez podkreśleniem. To sa dwie rzeczy które najczęściej zmienia przeglądarka a więc i te dwie rzeczy przede wszystkim należy rozważyć gdy opisuje się linki we własnym szablonie.

Wyrazisty kolor linków pozwala czytelnikowi łatwo odnaleźć je w tekście dlatego dobrym zwyczajem jest linkowanie znaczących, kluczowych słów. Jeżeli piszesz o artykule na jakiś temat to chcąc dodać do niego odnośnik nie pisz „treść omawianego artykułu znajdziesz TUTAJ” i nie dodawaj do słowa „tutaj” linku. To najgorszy z możliwych sposobów linkowania. Jeżeli uda Ci się w swój tekst wpleść tytuł odnośnika albo kluczową treść to ją właśnie podlinkuj. Dzięki takiemu rozwiązaniu, czytelnik, który po przeczytaniu całości twojego tekstu zechce zerknąć na jedną czy dwie strony które omawiasz to łatwo się zorientuje, które linki prowadzą do czego.

Większość osób, które korzysta z tutaj-linków powie mi, ze przecież obok pisze do czego prowadzi dany link. I dobrze. Ale oko czytelnika przyciągnie link zawierający tylko głupie słowo TUTAJ i trudniej będzie mu wczytać się w tekst aby określić co to za tutaj jest pod tym linkiem. Treść linków dodajemy więc z sensem aby wyróżnione miały rzeczywiste znaczenie.

Poza kolorem i podkreśleniem można w zasadzie stosować dowolne sposoby wyróżnienia tekstu. O właściwościach tekstu, cechach kroju i różnych rodzinach krojów jest na moim blogu notek kilka, najwięcej przydatnych informacji będą zawierały te:

Wybierając sposób wyróżnienia należy wziąć pod uwagę przyzwyczajenia czytelników i wygodę ich czytania. Jeżeli zmieniasz dla linków rodzaj czcionki albo jej wielkość to uważaj na interlinię. Większy (bądź po prostu inny) krój zajmował będzie inną ilość miejsca, także w pionie. Użycie nadkreślenia zamiast podkreślenia może mylić i sugerować, że wyrazy powyżej są linkami. Przekreślenie natomiast zazwyczaj unieważnia zapisany tekst. 

Najprostszym i najbardziej zrozumiałym sposobem wyróżnienia linków będzie kolor. Dodatkowo podkreślenie może być zalecane ze względu na fakt iż nie każdy dobrze sobie radzi z rozróżnianiem kolorów. Najprościej wykorzystać podkreślenie tekstu (text-decoration:underline;) ale można pokombinować nieco i zamiast tekstowego podkreślenia użyć zwykłej ramki, która może przybrać najróżniejsze formy.

Na moim szablonowym blogu linki są wyróżnione głównie kolorem. Dodatkowo po najechaniu kursorem na te znajdujące się w notce zostają one podkreślone wykropkowaną dolną ramką.

a {
 color: #D71149;
 text-decoration: none;
}
a:hover {
 color: #B52A51;
}

.BlogWpisTresc a:hover, .WstepKomentowanegoWpisu a:hover, .TrescKomentowanegoWpisu a:hover, #StatycznaZawartosc a:hover {
 border-bottom: 1px dotted #B52A51;
}

Wspomniałam wyżej linki po najechaniu na nie kursorem. Elementy mają swoje cechy ale czynność najechania kursorem wymaga innego podejścia od strony szablonu. Nie chodzi o element określony w jakimś miejscu ale o czynność jaka użytkownik wykonuje. Połączenie elementu i czynności to trochę inna sztuczka. Do określania takich rzeczy używa się pseudoklas.

Pseudoklasy przydatne przy określaniu wyglądów linków

  • :active definiuje aktywny odnośnik
  • :hover definiuje aktualnie wskazany kursorem odnośnik
  • :link definiuje nieodwiedzony odnośnik
  • :visited definiuje odwiedzony odnośnik

Psełdoklasę dodaje się po dwukroku bez żadnej spacji pomiędzy.

Active jest raczej rzadko używany. Z tego co rozumiem aktywny odnośnik to ten właśnie otwierany a przy coraz szybszych łączach efekt active będzie po prostu niewidoczny.

Hover to najpopularniejsza pseudoklasa dla linków. To ona właśnie odpowiada za wygląd elementu po najechaniu na niego kursorem. W zasadzie hover można przypisać dowolnemu elementowi ale w starszych przeglądarkach zadziała tylko przy linkach (naprawdę starszych przeglądarkach więc bez obaw).

Pseudoklasa link odpowiedzialna jest za zwykły odnośnik. Jest przydatna ale jeżeli nie kombinujemy zbyt mocno z wyglądem linów to będzie miała takie samo znaczenie jak generalny opis linku bez żadnej pseudoklasy.

Visited to druga pod względem popularności pseudoklasa dla linków. Określa ona wygląd już odwiedzonych linków. Przeglądarki zazwyczaj zmieniają ich kolor z niebieskich na fioletowe. Ja w swoich szablonach jeżeli używam visited to preferuję efekt zużycia: nieznacznie jaśniejszy kolor, utratę pogrubienia; podobają mi się też opcje z obrazkami gdzie odwiedzony link zaznaczony jest dodatkowo haczkiem. Niestety nowoczesne przeglądarki ograniczają mocno możliwości dla pseudoklasy visited, polecam więc głownie zmianę koloru

a, a:link, a:active {
 color: #D71149;
 text-decoration: none;
}
a:hover {
 color: #B52A51;
 border-bottom: 1px dotted #B52A51;
}
a:visited {
 color:#c04f6b;
}


Przykłady

Poniżej kilka przykładów z moich szablonów. Dotyczą rzeczywistych właściwości istniejących elementów i poniżej ilustracji podaję wszystkie zapisy odpowiedzialne za wygląd linków nawet jeżeli przypisane są przy różnych selektorach. Jeżeli zamierzasz skopiować je dosłownie to weź pod uwagę, że poszczególne cechy mogą mieć wpływ na wygląd nie tylko elementów przedstawionych na ilustracji.

filmowy 01 - Let s Make Love

zobacz przykład w szablonie filmowym 01 - Let's Make Love »

a {
 color: #1C3353;
 text-decoration: none;
}
a:hover {
 color: #533C1C;
}
.BlogWpisTresc a, .WstepKomentowanegoWpisu a, .TrescKomentowanegoWpisu a, #StatycznaZawartosc a {
 font-size: 110%;
 font-family: Georgia, serif;
 font-weight:bold;
 line-height: 100%;
}


25 szablon warstwowy, żółty

zobacz przykład w szablonie 25 warstwowym, żółtym »

a {
 color: #ffa200;
 text-decoration:none;
}
a:hover {
 color: #ffb433;
}
.BlogWpisTresc a:hover, .TrescKomentowanegoWpisu a:hover, .WstepKomentowanegoWpisu a:hover, #StatycznaZawartosc a:hover {
 border-bottom: dashed 2px #ffb433;
}


top 06 - This Is How It Feels

zobacz przykład w szablonie top 06 - This Is How It Feels »

a {
 color: #CC0000;
 text-decoration: none;
}
a:hover {
 color: #339900;
}
.BlogWpisTresc a, .WstepKomentowanegoWpisu a, .TrescKomentowanegoWpisu a, #StatycznaZawartosc a {
 font-weight:bold;
 border-bottom: 3px dashed #CC0000;
}
.BlogWpisTresc a:hover, .WstepKomentowanegoWpisu a:hover, .TrescKomentowanegoWpisu a:hover, #StatycznaZawartosc a:hover {
 border-bottom: 3px solid #CC0000;
}


szablon ręczny 06 - z drzewem

zobacz przykład w szablonie ręcznym 06 - z drzewem »

a {
 color: #9B1A15;
 text-decoration: none;
}
a:hover {
 color: #6F5139;
}
#BlogKategorieBox {
 text-transform: uppercase;
 letter-spacing: 0.1em;
 line-height: 2em;
}
#BlogKategorie a {
 display:block;
 float:right;
 background: url(/resource/hm06_k_link.jpg) repeat-x bottom left;
}
#BlogKategorie a:hover {
 background: url(/resource/hm06_k_wybrana.jpg) repeat-x bottom left;
}


filmowy 03 - The Kid

zobacz przykład w szablonie filmowym 03 - The Kid »

.BlogWpisTresc a, .WstepKomentowanegoWpisu a, .TrescKomentowanegoWpisu a, #StatycznaZawartosc a {
 padding:0 3px 0 2px;
 background:#222;
 border-left:4px solid #000;
 color:#ddd;
}
.BlogWpisTresc a:hover, .WstepKomentowanegoWpisu a:hover, .TrescKomentowanegoWpisu a:hover, #StatycznaZawartosc a:hover {
 background:none;
 color:#666;
}


01 szablon zero, szary

zobacz przykład w szablonie 01 zero, szary »

a {
 color: #777777;
 text-decoration: none;
 background-color: #ffffff;
}
a:hover {
 background-color: #ffffbb;
}

Podsumowując

Typowym wyróżnieniem odnośnika jest inny kolor, często w połączeniu z pogrubieniem lub podkreśleniem. Aktualnie wskazany odnośnik jest często podkreślony czasami zmienia też kolor, zazwyczaj na jaśniejszy. Odwiedzony odnośnik, jeżeli się wyróżnia to albo jego kolor jest jaśniejszy, albo słowo traci jedną ze swoich cech (przestaje być pogrubiony, traci kolor , etc.). To typowe rozwiązania a skoro typowe to łatwo-rozpoznawalne i zrozumiałe czyli jak najbardziej do polecenia.

Nie polecam natomiast zmiany wielkości czcionki, szczególnie jeżeli inna wielkość jest tylko np. po najechaniu kursorem na odnośnik. W takim przypadku tekst zaczyna się ruszać co jest bardzo wkurzające. Można zmniejszyć wielkość czcionki w przypadku linku ale w takim przypadku mniejszy rozmiar powinien odnosić się do wszystkich właściwości obiektu. Powiększania nie polecam. Zmiana wielkości liter nie stanowi natomiast takiego problemu. Wersaliki to wersaliki, zawsze były dość popularną formą wyróżniania pewnych części tekstu. I na koniec coś o czym już pisałam czyli dekoracja tekstu. Podkreślenie odnośnika jest typowe, nakreślenie trudno zrozumieć, przekreślenie wprowadza dysonans a miganie jest tylko trochę lepsze od zmiany wielkości czcionki przy każdej z właściwości elementu, czyli zupełnie okropne.

piątek, 14 września 2007, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...