Stylizowanie odnośników hipertekstowych
workshop: #25c5-anchor-links.html
Mini-warsztat CSS: odnośniki i ich pseudo-klasy
Przykład stosowania pseudo-klas oraz ich kolejności dla odnośników.
Przygotowanie
Utwórz strukturę menu nawigacyjnego zawierającą 4-6 odnośników - menu będzie używane w każdym kroku, lecz w każdym kroku odnośniki będą inne.
Plik graficzny do zadania home.png do pobrania z listy plików z panelu Zasobów lekcji.
Jednym ze sposbów tworzenia menu nawigacyjnego jest użycie listy wypunktowanej,
która przez lata była swoistym kontenerem dobrze układającym odnośniki.
Dziś odnośniki nawigacyjne witryny należy umieszczać przede wszystkim w znaczniku NAV. Stosowanie listy wypunktowanej głównie zależy od pomysłu webdeveopera - np. czy będzie stosował menu rozwijane.
.stp1 .toTopBtn { display: initial !important; }
.toTopBtn img { outline: dashed 2px red; }
.step nav a {
background-color: white;
border: solid 2px orange;
border-left: solid 2px grey;
border-right: solid 2px grey;
border-top: solid 5px grey;
border-radius: .75rem;
display: inline-block;
text-align: center;
}
.step nav ul {
list-style-type: none;
padding-left: 0;
margin: 0;
}
Zasada LVHA odnosi się do kolejności stosowania reguł pseudo-klas stylujących odnośniki różnych typów w bezkonfliktowy dla siebie nawzajem sposób.
Właściwa kolejność to: najpierw zwykłe odnośnik (A lub :link), nastepnie odwiedzone (:visited), później wskazane (:hover) i na końcu aktywne (:active).
Ponieważ istnieje jeszcze pseudo-klasa :focus, która działa podobnie jak :hover z tą różnicą, że :focus działa dla zaznaczania przez klawisz TAB, natomiast :hover dla wskazywania myszą.
.stp2 nav a {
color: black;
padding: .5rem;
text-decoration: none;
transition: 500ms;
width: 20rem;
}
.stp2 nav a:visited {
border-top-color: #606060;
}
.stp2 nav a:hover,
.stp2 nav a:focus {
border-top-color: orange;
border-bottom-color: grey;
text-shadow: #808080 2px 2px 2px;
margin-left: 3rem;
transition: 500ms;
}
.stp2 nav a:active {
border-color: red;
color: red;
}
Zweryfikuj, czy odwiedziłeś z obecnej przeglądarki adresy WWW podane w nawiasach (adres URL):
czerwony - nieodwiedziłeś; zielony - odwiedziłeś
.stp3 a {
display: block;
font-weight: 800;
}
.stp3 a:link { color: red; }
.stp3 a::before { margin-right: 1rem; }
.stp3 a:link::before {
content: "NIE odwiedzałeś";
text-decoration: none;
}
.stp3 a::after {
content: "( " attr(href) " )";
margin-left: 1rem;
text-decoration: none;
}
.stp3 a:visited { color: green; }
.stp3 a:visited::before { content: "TAK odwiedzałeś"; }
Użyj każdego z odnośników i sprawdź efekt dla reguły :visited
.stp3 a, .stp4 a { ... }
.stp4 a::after {
display: inline-block;
font-size: 1.4rem;
line-height: 1rem;
margin-left: .5rem;
}
.stp4 a[href^="steam"]::after {
background: blue;
border-radius: 50%;
content: "\022B6";
color: white;
font-size: .75rem;
font-weight: 900;
transform: rotate(-45deg);
height: 1rem;
width: 1rem;
}
.stp4 a[href^="mailto"]::after {
content: "\2709";
}
.stp4 a[href^="http"]::after {
content: "⧉";
transform: rotate(90deg);
}