-
CSS - Fundamentos Básicos
-
Lecture 1CSS – Tutorial
-
Lecture 2CSS – Introdução
-
Lecture 3CSS – Sintaxe
-
Lecture 4CSS – Unidades de medida
-
Lecture 5CSS – Cores
-
Lecture 6CSS – Backgrounds
-
Lecture 7CSS – Fonts
-
Lecture 8CSS – Text
-
Lecture 9CSS – Usando imagens
-
Lecture 10CSS – Links
-
Lecture 11CSS – Tabelas
-
Lecture 12CSS – Bordas
-
Lecture 13CSS – Listas
-
Lecture 14CSS – Margins
-
Lecture 15CSS – Paddings
-
Lecture 16CSS – Cursores
-
Lecture 17CSS – barras de rolagem
-
Lecture 18CSS – Dimensão
-
Lecture 19CSS – Outlines
-
CSS – Links
Este capítulo ensina como definir propriedades diferentes de um hiperlink usando CSS. Você pode definir as seguintes propriedades de um hiperlink –
Iremos revisitar as mesmas propriedades quando discutirmos as Pseudo-Classes de CSS.
- link significa hiperlinks não visitados.
- visitado significa hiperlinks visitados.
- hover significa um elemento que atualmente tem o ponteiro do mouse do usuário pairando sobre ele.
- active significa um elemento no qual o usuário está clicando no momento.
Normalmente, todas essas propriedades são mantidas na parte do cabeçalho do documento HTML.
Lembre-se de que um: hover DEVE vir depois de um: link e um: visitado na definição CSS para ser eficaz. Além disso, a: active DEVE vir após a: hover na definição CSS da seguinte forma:
<style type = "text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>
Agora, veremos como usar essas propriedades para dar diferentes efeitos aos hiperlinks.
Defina a cor dos links
O exemplo a seguir demonstra como definir a cor do link. Os valores possíveis podem ser qualquer nome de cor em qualquer formato válido.
<html> <head> <style type = "text/css"> a:link {color:#000000} </style> </head> <body> <a href = "">Link</a> </body> </html>
Definir a cor dos links visitados
O exemplo a seguir demonstra como definir a cor dos links visitados. Os valores possíveis podem ser qualquer nome de cor em qualquer formato válido.
<html> <head> <style type = "text/css"> a:visited {color: #006600} </style> </head> <body> <a href=""> link</a> </body> </html>
Alterar a cor dos links ao passar o mouse
O exemplo a seguir demonstra como alterar a cor dos links quando colocamos o ponteiro do mouse sobre o link. Os valores possíveis podem ser qualquer nome de cor em qualquer formato válido.
<html> <head> <style type = "text/css"> a:hover {color: #FFCC00} </style> </head> <body> <a href = "">Link</a> </body> </html>
Mudar a cor dos links ativos
O exemplo a seguir demonstra como alterar a cor dos links ativos. Os valores possíveis podem ser qualquer nome de cor em qualquer formato válido.
<html> <head> <style type = "text/css"> a:active {color: #FF00CC} </style> </head> <body> <a href = "">Link</a> </body> </html>