Scroll Top

Aprenda tudo que você precisa para criar o seu negócio na internet.  São 30 vídeos aulas totalmente gratuitas. Basta se cadastrar em um de nossos formulário.

Tutoriais

Links

links

Links personalizados

Você pode aplicar aos links tudo que aprendeu nas lições anteriores (mudar cores, fontes, sublinhados, etc). A novidade aqui é que você pode definir as propriedades de maneira diferenciada de acordo com o estado do link ou seja visitado, não visitado, ativo ou com o ponteiro do mouse sobre o link. Isto possibilita adicionar interessantes efeitos ao seu website. Para estilizar estes efeitos você usará as chamadas pseudoclasses. O seu negócio online vai te surpreender com estas dicas.

O que é pseudo-classe?

Uma pseudo-classe permite estilizar levando em conta condições diferentes ou eventos ao definir uma propriedade de estilo para uma tag HTML.

Vamos ver um exemplo. Como você já sabe, links são marcados no HTML com as  tags <a>. Podemos então usar a como um seletor CSS:

Usando o editor de códio Notepad+ +, salve o código abaixo no arquivo estilo.css.

a {
color: blue; /* o texto do link ficará na cor azul */
}

E o código abaixo no arquivo index.html:

<html>

<head>
<title>Meu Primeiro Estudo de CSS</title>
<link rel=”stylesheet” type=”text/css” href=”estilo.css”/>
</head>
<body>
<a>www.criarnegociosonline.com</a>
</body>
</html>

Agora rode no seu navegador e deverá aparecer a algo como a imagem abaixo:

 

links

 

Os negócios online, são a sensação do momento, mas deve ser feito com muita eficiência para que possa ter resultados positivos. Seja dedicado em tudo o que fizer e terá sucesso.

Continuando o estudo: 

Os links podem ter diferentes estados. Por exemplo, pode ter sido visitado ou não visitado. Você usará pseudo-classes para estilizar links visitados e não visitados.

Usando o editor de códio Notepad+ +, salve o código abaixo no arquivo estilo.css.

a:link {
color: blue;  /*Cor azul para o link aqui ainda não foi clicado */
}
a:visited {
color: red;  /* Cor vermelha para o link que foi clicado */
}

E o código abaixo no arquivo index.html:

<html>
<head>
<title>Meu Primeiro Estudo de CSS</title>
<link rel=”stylesheet” type=”text/css” href=”estilo.css”/>
</head>
<body>
<a href=”http://www.criarsites.com.br”>Link Visitado</a><br>
<a href=”http://www.sitepx.com”>Link Visitado</a>
</body>
</html>

 

Agora rode no seu navegador e deverá aparecer a algo como a imagem abaixo:

links1

 

Use as pseudo-classes a:link e a:visited para estilizar links não visitados e visitados  respectivamente. Links ativos são estilizados com a pseudo-classe a:active e a:hover, esta última é a pseudo-classe para links com o ponteiro do mouse sobre ele.

A seguir explicaremos com mais detalhes e exemplificação, as quatro pseudo-classes.

Pseudo-classe: link

a:link {
color: green;
}

Pseudo-classe: visited

A pseudo-classes: visited é usada para links visitados. No exemplo a acima os links visitados ficarão na cor vermelha como mostra o código abaixo:

a:visited {
color: red;
}

Pseudo-classe: active

A pseudo-classe :active é usada para links ativos.

No exemplo a seguir links ativos terão seu fundo na cor verde:

a:active {
background-color: green;
}

Pseudo-classe: hover

A pseudo-classe :hover é usada para quando o ponteiro do mouse está sobre o link.

Isto pode ser usado para conseguir efeitos bem interessantes. Por exemplo, podemos mudar a cor do link para laranja e o texto para itálico quando o ponteiro do mouse passa sobre ele, o código CSS para estes efeitos é o mostrado a seguir:

a:hover {
color: orange;
font-style: italic;
}

Vamos aplicar agora todos os exemplos citados acima.

Digite o código abaixo e no seu editor de HTML , e salve no arquivo estilo.css:

a:link {
color: blue; /* Cor do link será azul*/
}
a:visited {
color: red; /* Cor dor link visitado será vermelha */
}
a:active {
background-color: green; /*Cor do link ativo será verde */
}
a:hover {
color: orange; /* Cor do link quando a mãozinha do mouse aparecer será amarela */
font-style: italic;  /* Link ficará itálico quando a mãozinha do mouse aparecer */ 
}

 

Digite o código abaixo no seu editor de HTML, e salve no arquivo index.html:

 

<html>
<head>
<title>Meu Primeiro Estudo de CSS</title>
<link rel=”stylesheet” type=”text/css” href=”estilo.css”/>
</head>
<body>
<a href=”http://www.criarsites.com.br”>Link Visitado</a><br>
<a href=”http://www.sitepx.com”>Link Não Visitado</a>
</body>
</html>

Agora abra o arquivo index.html em seu navegador e deverá aparecer uma imagem semelhante a que vai aparecer após você clicar no botão logo abaixo:

visualizar

 

 

 

Continue estudando  Aqui:

Está Gostando do Artigo?

Se inscreva em nossa lista e receba 30 vídeos aulas grátis, ensinando como criar o seu negócio na internet a partir do zero.

| Website

Sou blogueiro por que gosto de ler e escrever. Criei este blog para te ajudar a criar o seu negócio na internet e ter um novo estilo de vida.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.
error: Este conteúdo está protegido ! Se precisar de alguma coisa envie mensagem pelo formulário de contato.