CSS Links
Links de várias formas diferentes
Link de texto Link de
texto Botão de link Botão de link
Links de estilo
Links com as propriedades do CSS, como: color, font-family, background, e outros.
NA PRÀTICA:
<!DOCTYPE html>
<html>
<head>
<style>
a {
color: hotpink;
}
</style>
</head>
<body>
<h2>Estilizar um link com uma cor</h2>
<p><b><a href="nomedapagina.html"
target="_blank">Clique no Link</a></b></p>
</body>
</html>
Os quatro estados dos links
são:
Ø
a:link-
um link normal não visitado
Ø
a:visited-
um link que o usuário visitou
Ø
a:hover-
um link quando o usuário passa o mouse sobre ele
Ø
a:active-
um link no momento em que é clicado
Na prática:
<!DOCTYPE html>
<html>
<head>
<style>
/* Link não visitado */
a:link {
color: red;
}
/* Link visitado */
a:visited {
color: green;
}
/* Passar mouse sobre link */
a:hover {
color: hotpink;
}
/* Link selecionado */
a:active {
color: blue;
}
</style>
</head>
<body>
<h2>Estilizando um link dependendo do
estado</h2>
<p><b><a href="nomedapagina.html"
target="_blank">Clique aqui</a></b></p>
<p><b>Nota:</b> a:hover DEVE vir depois
de a:link e a:visited na definição CSS para ser eficaz. </p>
<p><b>NOTA</b> a:active DEVE vir depois
de a:hover na definição CSS para ser eficaz.</p>
</body>
</html>
Decoração de texto
A text-decoration propriedade
é usada principalmente para remover sublinhados de links:
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
text-decoration:
none;
}
a:visited {
text-decoration:
none;
}
a:hover {
text-decoration:
underline;
}
a:active {
text-decoration:
underline;
}
</style>
</head>
<body>
<h2>Estilizando um link com a propriedade
text-decoration</h2>
<p><b><a href="nomedapagina.html"
target="_blank">Clique no link</a></b></p>
</body>
</html>
Cor de fundo
A background-color propriedade
pode ser usada para especificar uma cor de fundo para links:
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color:
lightgreen;
}
a:active {
background-color: hotpink;
}
</style>
</head>
<body>
<h2>Estilizando um link com a propriedade
background-color</h2>
<p><b><a href="nomedapagina.html"
target="_blank">Clique no link</a></b></p>
</body>
</html>
Botões de link
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #f44336;
color: black;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<h2>Link Button</h2>
<p>Um link estilizado como um botão:</p>
<p>Este é um link</p>
<a href="nomedapagina.html"
target="_blank">Clique no link</a>
</body>
</html>
Na prática 1
<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>
<h2>Links de estilo</h2>
<p>Passe o mouse sobre os links e observe-os mudarem de
layout:</p>
<p><b><a class="one"
href="nomepagina.html" target="_blank">Este link muda de
cor</a></b></p>
<p><b><a class="two"
href="nomepagina.html" target="_blank">Este link altera
o tamanho da fonte</a></b></p>
<p><b><a class="three"
href="nomepagina.html" target="_blank">Este link muda a
cor de fundo</a></b></p>
<p><b><a class="four"
href="nomepagina.html" target="_blank">Este link altera
a família da fonte</a></b></p>
<p><b><a class="five"
href="nomepagina.html" target="_blank">Este link altera
a decoração do texto</a></b></p>
</body>
</html>
Na prática 2
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<h2>Link de botão</h2>
<a href="nomepagina.html"
target="_blank">Meu link</a>
</body>
</html>
Na prática 3
<!DOCTYPE html>
<html>
<body>
<h2>A propriedade do cursor</h2>
<p>Passe o mouse sobre as palavras para mudar o
cursor.</p>
<span
style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">retícula
automática</span><br>
<span
style="cursor:default">default</span><br>
<span
style="cursor:e-resize">e-resize</span><br>
<span
style="cursor:help">help</span><br>
<span
style="cursor:move">move</span><br>
<span
style="cursor:n-resize">n-resize</span><br>
<span
style="cursor:ne-resize">ne-resize</span><br>
<span
style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span
style="cursor:progress">progress</span><br>
<span
style="cursor:s-resize">s-resize</span><br>
<span
style="cursor:se-resize">se-resize</span><br>
<span
style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span
style="cursor:w-resize">w-resize</span><br>
<span
style="cursor:wait">wait</span><br>
</body>
</html>