Linkki

Linkki tarkoittaa www-sivulla olevia elementtejä joita painamalla kosketusnäytöllä tai hiirellä klikkaamaalla avautuu selaimeen linkkiin liitetty kohde, siirrytään www-sivulla olevaan kohteeseen tai suoritetaan jokin muu toiminto.
Teksti-linkeillä on esimerkiksi perusväri, väri kun hiiren osoitin on linkin kohdalla, väri kun linkkiä painetaan ja väri jos linkkiä on käytetty.
Linkki voidaan liittää painikkeeseen (buttom-elementiin), kuvaan videoon, sivulle div-elementin avulla CSS-muotoiltuun kehykseen jne.

TEKSTI-LINKKI

Yksinkertaisin teksti-linkin CSS-muotoilu. Esimerkeissä linkin avattava www-sivu jätetty tyhjäksi ja malliksi target-asetuksina selaimessauuteen välilehteen avaaminen:

  TEKSTILINKKI - CSS-ohje:

  a {
    color: RED;
  }

 
  TEKSTINLINKKI - HTML:

  <p><a href="" target="_blank"> Google </a></p> 
  <h3><a href="" target="_blank"> Yuotube </a></h3>
  

Tulos www-sivulla:

Edellisen esimerkkin linkki-muotoiluina voi lisäksi käyttää tekstin yleisiäkin muotoiluja kuten fontin tyyppiä, kokoa ja kursivointia.
HUOMAA TÄMÄ !
Linkkien yleinen CSS-muotoilu vaikuttaa kaikkiin www-sivulla oleviin linkkeihin !!

LAAJEMMIN MUOTOILTU TEKSTI-LINKKI

Esimerkissä toteuttaan monipuolisempaa CSS-muotoilua linkille. Alla, linkeille käytettyt asetukset:

  Linkit CSS-ohjeet:
  a:link {
    color: RED;
  }
  a:visited {
    color: BLUE;
	text-decoration: underline;
  }
  a:hover {
    color: DarkOrange;
	text-decoration: none;
  }
  a:active {
    color: GREEN;
	text-decoration: none;
	background-color: YELLOW;
  }
   
  HTML-koodaus:
  <p><a href="" target="_blank"> Google  </a></p> 
  <p><a href="" target="_blank"> Yuotube </a></p>
  

Tulos www-sivulla, kokeile esim hiirellä:

LINKKI-PAINIKE

Linkki joka on muotoiltu painikkeeksi:

  CSS-ohjeet:
  
  a:link, a:visited {
    background-color: RGB(57, 96, 96);
    color: white;
    padding: 11px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    box-shadow: 4px 4px 8px 4px rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  a:hover {
    background-color: RGB(128, 179, 179);
    box-shadow: 4px 4px 8px 4px rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  a:active {
    color: yellow;
	padding: 10px 25px;
    background-color: RGB(128, 179, 179);
    box-shadow: 4px 4px 8px 4px rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  } 
 
 
  HTML-elementtiin liittäminen:
  
  <a href="" target="_blank"> Linkki jonnekin </a>
  <a href="" target="_blank"> Linkki jonnekin </a>
  

Tulos www-sivulla:

Erilaisia hiiren osoittimia

Linkin kohdalla voidaan hiiren osoitinta vaihtaa, esimerkissä vaihto on liitettyn span-elementteihin, kokeile liikuttamalla hiiren osoitinta taulukon www-sivulla sarakkeissa: