Startseite Skripte für das Wintersemester 2018/19 Webdesign Semantic Web CSS für Links


CSS für Links

Links haben in CSS eine spezielle Syntax, weil sie unterschiedliche Zustände haben können:

CSS

a:link          /* ein unbesuchter Link */
a:visited       /* ein besuchter Link */
a:hover         /* ein Link, auf dem der Cursor liegt */
a:active        /* ein Link, der gerade gedrückt wird (mouseDown) */
a:focus         /* ein Link, der gerade via Tabbing erreicht wurde */

/* konkrete Beispiele */

a:link {
    /* Link ist nicht unterstrichen */
    text-decoration:none;
    font-weight:bold;
    color:red;
} 

a:visited {
    text-decoration: none; 
    /* Link „verblast“, nachdem er besucht wurde*/
    color:"#FF6666";
}

a:hover {
    background-color:red;
    color:white;
}

a:active {
    background-color:blue;
    color:white;
}

a:focus {
    background-color:green;
    color:white;
    border:3px solid black;
}

Hier die Demo dazu