Como usar CSS para estilizar hiperlinks em páginas da Web

Abril 19, 2024

Se você conhece o HTML, sabe que pode controlar a cor do texto e os hiperlinks em uma página da web. Mas com as Cascading Style Sheets, você pode fazer muito mais. Certas marcas, como a marca âncora do hiperlink, têm o que chamamos de pseudo-classes associadas aos diferentes estados da marca. Por exemplo, a tag de hiperlink possui quatro estados; link, visitado, pairar e ativo.

Quando um link não está sendo usado (não selecionado), esse é o ligação pseudo-classe ou estado. o visitado O estado é após o link ter sido usado. o flutuar O estado é quando o mouse passa pelo link e o ativo O estado é quando você clica no link. A mágica do CSS é que cada estado do link seja controlado independentemente por meio de pseudo-classes. Assim, você pode definir propriedades diferentes para cada estado. Você pode usar qualquer propriedade associada à marca de âncora do hiperlink em CSS.

No exemplo abaixo, definiremos o estado do link para vermelho, o estado visitado para roxo (# 400040), o hover e os estados ativos para vermelho, sublinhado e itálico.

Nota--A flecha

indica que o código está quebrado em uma segunda linha e realmente deve estar tudo em uma linha.

Como você pode ver, definimos a propriedade color para vermelho em todos os estados, exceto no estado visitado, que definimos como roxo. Como apenas queremos que o hiperlink seja sublinhado para os estados de foco e ativo, definimos a propriedade de decoração de texto como nenhuma para os outros dois estados. Por fim, definimos o estilo da fonte como itálico para os estados de foco e ativo, o que fará com que o texto fique em itálico quando você passar o mouse ou clicar no link e definir a decoração do texto novamente para sublinhar. Este é apenas um exemplo simples. Você pode tornar seus estilos tão simples ou sofisticados quanto desejar. No entanto, existem algumas coisas para lembrar.

Os navegadores da Web diferem na maneira como lidam com isso. Normalmente, se você definir uma propriedade para um determinado valor, ela será herdada (transmitida a) pelos estados listados após ela. No exemplo acima, o primeiro estado listado em nosso código foi o estado do link e configuramos a propriedade color para vermelho. Na maioria das vezes, isso seria passado para os outros três estados, a menos que o alterássemos com o código, como fizemos no estado visitado. Além disso, se não tivéssemos definido a decoração de texto de volta para sublinhado, o texto para os estados de foco e ativo não teria sido sublinhado porque a desativamos no primeiro estado. Mas você não pode contar com todos os navegadores para fazer isso. Portanto, é melhor definir todas as propriedades para cada estado individualmente.

Ao criar links sofisticados, não faça grandes alterações entre estados, como aumentar o tamanho do texto. Isso fará com que o navegador recarregue a página e seus visitantes ficarão muito chateados com você.

A ordem na qual você lista o código para essas pseudo-classes é influenciada pela ordem em cascata. Discutiremos a ordem em cascata em um tutorial posterior. Por enquanto, lembre-se de que, para evitar conflitos, codifique os estados na ordem que usamos acima; link, visitado, pairar e ativo.

Instruções De Vídeo: Curso de HTML e CSS Inserindo links e estilizando com CSS (Abril 2024).

Como usar CSS para estilizar hiperlinks em páginas da Web, pseudo-classes HTML associadas aos diferentes estados da tag, pseudo-classe, hiperlink, hiperlinks de codificação em CSS, pseudo-classe CSS, estados CSS, estado de uma marca, links sofisticados em uma página da Web com CSS, links sofisticados

Artigo Anterior

Próximo Artigo

Crítica de livros - Adobe Photoshop Elements 3 Idea Kit

Abril 2024

Idea Kit é um bom nome para Kit de ideias do Adobe Photoshop Elements 3.0, que inclui tudo o que você precisa para concluir 17 projetos fáceis e divertidos com o Photoshop Elements. Tudo que você...

computadores

Guerra Civil - Uma nação dividida

Abril 2024

Guerra Civil - Uma nação dividida, pelo History Channel, permite que você jogue como o norte ou o sul. Este jogo de tiro em primeira pessoa tenta mergulhá-lo na luta corajosa de irmão em irmão. Para...