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>Placez le souris autour des liens et voyez comment ils changent:</p> <p> <b><a class="one" href="#">Ce lien change le couleur</a></b> </p> <p> <b><a class="two" href="#">Ce lien change la taille de police font-size</a></b> </p> <p> <b><a class="three" href="#">Ce lien change le couleur de fond</a></b> </p> <p> <b><a class="four" href="#">Ce lien change font-family</a></b> </p> <p> <b><a class="five" href="#">Ce lien change la décoration de text text-decoration</a></b> </p> </body> </html>