Linki CSS
Dzięki CSS linki można stylizować na wiele różnych sposobów.
Łącze tekstowe Łącze tekstowe Przycisk połączenia Przycisk połączenia
Stylizacja linków
Łącza mogą być stylizowane za pomocą dowolnej właściwości CSS (np color. , font-family,
background, itp.).
Przykład
a {
color: hotpink;
}
Ponadto linki mogą mieć różny styl w zależności od stanu , w jakim się znajdują.
Cztery stany łączy to:
a:link- zwykły, nieodwiedzony linka:visited- link odwiedzony przez użytkownikaa:hover- link, gdy użytkownik najedzie na niego mysząa:active- link w momencie kliknięcia
Przykład
/* unvisited link */
a:link {
color: red;
}
/* visited
link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
Podczas ustawiania stylu dla kilku stanów łącza obowiązują pewne zasady kolejności:
- a:najechanie MUSI nastąpić po:linku i:odwiedzonym
- Odp.: aktywny MUSI pojawić się po: najechaniu kursorem!
Dekoracja tekstu
Właściwość text-decorationsłuży głównie do usuwania podkreśleń z linków:
Przykład
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
Kolor tła
Właściwość background-colormoże służyć do określenia koloru tła linków:
Przykład
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
Przyciski linków
Ten przykład pokazuje bardziej zaawansowany przykład, w którym łączymy kilka właściwości CSS, aby wyświetlać linki jako pola/przyciski:
Przykład
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
Więcej przykładów
Przykład
Ten przykład pokazuje, jak dodać inne style do hiperłączy:
a.one:link {color: #ff0000;}
a.one:visited {color: #0000ff;}
a.one:hover
{color: #ffcc00;}
a.two:link {color: #ff0000;}
a.two:visited {color:
#0000ff;}
a.two:hover {font-size: 150%;}
a.three:link {color:
#ff0000;}
a.three:visited {color: #0000ff;}
a.three:hover {background:
#66ff66;}
a.four:link {color: #ff0000;}
a.four:visited {color:
#0000ff;}
a.four:hover {font-family: monospace;}
a.five:link {color:
#ff0000; text-decoration: none;}
a.five:visited {color: #0000ff;
text-decoration: none;}
a.five:hover {text-decoration: underline;}
Przykład
Kolejny przykład tworzenia pól/przycisków linków:
a:link, a:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align:
center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active
{
background-color: green;
color: white;
}
Przykład
Ten przykład pokazuje różne typy kursorów (mogą być przydatne w przypadku linków):
<span style="cursor: auto">auto</span><br>
<span style="cursor:
crosshair">crosshair</span><br>
<span style="cursor:
default">default</span><br>
<span style="cursor: e-resize">e-resize</span><br>
<span style="cursor: help">help</span><br>
<span style="cursor:
move">move</span><br>
<span style="cursor: n-resize">n-resize</span><br>
<span style="cursor: ne-resize">ne-resize</span><br>
<span style="cursor:
nw-resize">nw-resize</span><br>
<span style="cursor:
pointer">pointer</span><br>
<span style="cursor: progress">progress</span><br>
<span style="cursor: s-resize">s-resize</span><br>
<span style="cursor:
se-resize">se-resize</span><br>
<span style="cursor: sw-resize">sw-resize</span><br>
<span style="cursor: text">text</span><br>
<span style="cursor:
w-resize">w-resize</span><br>
<span style="cursor: wait">wait</span>