Apostila Internet – Link com css – 2 Técnico
Propaganda
COLÉGIO ESTADUAL PEDRO MACEDO
Ensino Profissionalizante
Internet e Programação Web
2° Técnico – Prof. Cesar
2014
Criar Link com HTML e CSS
Implementar uma página HTML com três link. Nome do arquivo; projeto006.html
<html lang="pt-br">
<head>
<title>Projeto006</title>
<link
href="projeto006.css"
type="text/css" media="all">
rel="stylesheet"
</head>
<body><p>
<p><a href="projeto006.html">Link 1</a></p>
<p><a href="projeto007.html">Link 2</a></p>
<p><a href="projeto008.html">Link 3</a></p>
</body>
</html>
Estilizando os links
Para estilizarmos links em uma página web devemos conhecer os quatro
"Seletores: pseudo classes de links", bem como a "Prioridade nas declarações para
links" ou seja a sequência em que as regras CSS para cada um dos estados deve ser
declarada na folha de estilos. Este assunto foge ao escopo deste tutorial mas se você
quiser rever ou entender aqueles conceitos consulte este tutorial
Vamos estabelecer os seguintes parâmetros de estilização.
Links no estado UP ou inicial: cor #FF0000 (vermelha), sem sublinhado;
Links no estado VISITED ou link visitado: cor #999999 (cinza), sem sublinhado;
Links no estado HOVER ou mouse sobre o link: cor #000000 (preta), com sublinhado;
Links no estado ACTIVE ou link que foi clicado: cor #00FF00 (verde), com sublinhado e
fundo na cor #000000 (preta);
Criar um arquivo com o nome: projeto006.css
a:link {
color:#FF0000;
text-decoration:none;
}
a:visited {
color:#999999;
text-decoration:none;
}
a:hover {
color:#000000;
text-decoration:underline;
font-size:150%;
}
a:active {
color:#00FF00;
text-decoration:underline;
background-color:#000000;
}
Exercicio:
1 – Implementar uma página HTML com 4 link (home, cursos, notícias, contato), as
páginas devem ser nomeadas da seguinte maneira: exercicio004.html,
exercicio005.html, exercicio006.html, exercicio007.html
Deverá ser implementado uma página de CSS (exercicio004.css), na qual será definido
as propriedades do link, link estado inicial verde escuro e fundo azul claro, link visitado
verde claro a fundo cinza, link com mouse posicionado sobre o mesmo da cor preta, e
link ativado da cor cinza e fundo vermelho claro.
