Source Code:
(back to article)
Submit
Result:
Report an issue
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
›
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
a
.
one
:
link
{
color:
#ccc
;
}
a
.
one
:
visited
{
color:
#095484
;
}
a
.
one
:
hover
{
color:
#8ebf42
;
}
a
.
two
:
link
{
color:
#ccc
;
}
a
.
two
:
visited
{
color:
#095484
;
}
a
.
two
:
hover
{
font-size:
150
%
;
}
a
.
three
:
link
{
color:
#ccc
;
}
a
.
three
:
visited
{
color:
#095484
;
}
a
.
three
:
hover
{
background:
#8ebf42
;
}
a
.
four
:
link
{
color:
#ccc
;
}
a
.
four
:
visited
{
color:
#095484
;
<!DOCTYPE html> <html> <head> <style> a.one:link { color: #ccc; } a.one:visited { color: #095484; } a.one:hover { color: #8ebf42; } a.two:link { color: #ccc; } a.two:visited { color: #095484; } a.two:hover { font-size: 150%; } a.three:link { color: #ccc; } a.three:visited { color: #095484; } a.three:hover { background: #8ebf42; } a.four:link { color: #ccc; } a.four:visited { color: #095484; } a.four:hover { font-family: monospace; } a.five:link { color: #095484; text-decoration: none; } a.five:visited { color: #095484; text-decoration: none; } a.five:hover { text-decoration: overline underline; } </style> </head> <body> <p>Bewegen Sie die Maus über die Links und beobachten Sie, wie sie geändert werden:</p> <p><b><a class="one" href="#">Dieser Link ändert die Farbe</a></b></p> <p><b><a class="two" href="#">Dieser Link ändert die Schriftgröße</a></b></p> <p><b><a class="three" href="#">Dieser Link ändert die Hintergrundfarbe</a></b></p> <p><b><a class="four" href="#">Dieser Link ändert die Schriftart</a></b></p> <p><b><a class="five" href="#">Dieser Link ändert die Textgestaltung</a></b></p> </body> </html>