CSS linkit

CSS:n avulla voidaan asettaa linkin tyylejä monella tavalla.

Tekstilinkki Tekstilinkki Linkkipainike Linkkipainike

Aseta linkin tyylejä

Linkki voi käyttää mitä tahansa CSS-ominaisuutta (esim. color,font-family,background jne.) asettaakseen tyylejä.

esimerkki

a {
  color: hotpink;
}

Kokeile itse

Lisäksi linkin tilan perusteella voidaan asettaa erilaisia tyylejä.

Neljä linkin tilaa ovat:

  • a:link - Normaali, ei vieraillut linkki
  • a:visited - Käyttäjä on vieraillut linkissä
  • a:hover - Kun käyttäjä asettaa kärjen linkin päälle
  • a:active - Kun linkkiä painetaan

esimerkki

/* Ei vieraillut linkit */
a:link {
  color: red;
}
/* Vieraillut linkit */
a:visited {
  color: green;
}
/* Kärki hiiren päällä linkissä */
a:hover {
  color: hotpink;
}
/* Valittu linkki */
a:active {
  color: blue;
}

Kokeile itse

Jos asetetaan useita linkin tilan tyylejä, seurataan seuraavaa järjestystä:

  • a:hover täytyy olla a:link ja a:visited jälkeen
  • a:active täytyy olla a:hover jälkeen

Tekstiväli

text-decoration Ominaisuus käytetään pääasiassa linkin alla olevan viivan poistamiseen:

esimerkki

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}

Kokeile itse

Taustaväri

background-color Ominaisuus voidaan käyttää linkin taustavärin määrittämiseen:

esimerkki

a:link {
  background-color: yellow;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: lightgreen;
}
a:active {
  background-color: hotpink;
}

Kokeile itse

Linkkipainike

Tämä esimerkki näyttää edistyneemmän esimerkin, jossa yhdistämme useita CSS-ominaisuuksia ja näytämme linkit laatikkona/painikkeena:

esimerkki

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;
}

Kokeile itse

Lisää esimerkkejä

Lisää erilaisia tyylejä hyperlinkkeihin
Tämä esimerkki näyttää, miten lisätyylejä lisätään hyperlinkkeihin.
Edistynyt - Luo reunustettu linkkibuttoni
Tämä on toinen esimerkki linkkiboksin/butonin luomisesta.
Muuta kursoria
cursor-ominaisuus määrittää näytettävän kursorityypin. Tämä esimerkki näyttää erilaisia kursorityyppejä (hyödyllistä linkkejä varten).