CSS

CSS links

Med CSS kan links designes på forskellige måder.

 

Design links

Links kan designes med forskellige CSS egenskaber(dvs. color, font-family, bacground osv.).

Eksempel

a {
    color: hotpink;
}

Udover dette kan links designes afhængig af hvilken tilstand de er i.

De fire tilstande er:

  • a:link – et normalt link, der ikke er besøgt
  • a:visited – et link der er besøgt
  • a:hover – et link når musen er over det
  • a:active – et link I det øjeblik, der bliver klikket på det

Eksempel

/* ikke besøgt link */
 a:link {
 color: red;
 }
/* besøgt link */
 a:visited {
 color: green;
 }
/* mus over link */
 a:hover {
 color: hotpink;
 }
/* valgt link */
 a:active {
 color: blue;
 }

Når der angives designs for flere link tilstande, er der nogle regler for rækkefølgen:

  • a:hover SKAL komme efter a:link og a:visited
  • a:active SKAL komme efter a:hover

Text-decoration

Egenskaben text-decoration bruges mest til at fjerne understregninger fra links:

Eksempel

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

Background Color

Egenskaben Background Color kan bruges til at specificere baggrundsfarve til linksne:

Eksempel

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

Avancerede – Links knapper

Dette eksempel demonstrere en mere avancerede eksempel hvor der kombineres adskillige CSS betingelser for at vise links som bokse/knapper:

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

Eksempel

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

Pages: 1 2 3 4