Como Definir A Cor Do Link

Índice:

Como Definir A Cor Do Link
Como Definir A Cor Do Link

Vídeo: Como Definir A Cor Do Link

Vídeo: Como Definir A Cor Do Link
Vídeo: Básico HTML e CSS - Inserindo tabela e alterando estilo das cores do link - Parte 10 2024, Maio
Anonim

Se o navegador do visitante do site não encontrar nenhuma indicação do design de cores dos hiperlinks no código da página, ele usará os valores padrão. Esses valores são azul para links passivos, vermelho para links ativos (em foco) e o tom da cor magenta para links já visitados. Esse esquema de cores nem sempre é combinado com o esquema de cores do design da página, portanto, um bloco de descrições de estilo de link geralmente é incluído no código.

Como definir a cor do link
Como definir a cor do link

Instruções

Passo 1

Crie um conjunto de instruções para o navegador que descreverá as cores do link em três estados. Por exemplo, pode ser assim: a: link {color: Red;}

a: visitou {cor: amarelo;}

a: hover {color: Orange;} Aqui, o "a" no início de cada linha é chamado de "seletor" e especifica a tag à qual o navegador deve aplicar a descrição do estilo entre chaves. "A" é a tag do hiperlink. A palavra adicionada ao seletor separada por dois pontos é chamada de "pseudoclasse" - que o navegador usa para determinar a qual estado de link o estilo entre chaves pertence. link corresponde a um link normal, visitou um link que já foi visitado e passou o mouse sobre um link quando o cursor está passando sobre ele. As cores atribuídas ao parâmetro color dentro das chaves podem ser especificadas pelo nome da tonalidade da cor ou por seu código hexadecimal.

Passo 2

Se você precisar atribuir cores diferentes a grupos de links diferentes na página, atribua a cada grupo sua própria designação ("classe") e faça uma descrição separada dos estilos para cada um deles. Por exemplo, nomeie um grupo LinksRed e o outro LinksGreen. Em seguida, a descrição do estilo ficará assim: a. LinksRed: link {color: Red;}

a. LinksRed: visitado {color: Yellow;}

a. LinksRed: hover {color: Orange;} a. LinksGreen: link {color: Green;}

a. LinksGreen: visitou {color: DarkGreen;}

a. LinksGreen: hover {color: Lime;} E nas tags dos links de cada grupo, você deve indicar a qual classe eles pertencem. Por exemplo: link vermelho

Link verde

etapa 3

Essas instruções são escritas em CSS (Cascading Style Sheets), portanto, precisam ser colocadas dentro de uma tag de estilo que as separa de outras instruções no código-fonte da página, escrito em HTML (HyperText Markup Language)):

a. LinksRed: link {color: Red;}

a. LinksRed: visitado {color: Yellow;}

a. LinksRed: hover {color: Orange;} a. LinksGreen: link {color: Green;}

a. LinksGreen: visitou {color: DarkGreen;}

a. LinksGreen: hover {color: Lime;}

Passo 4

Coloque o bloco de descrição do estilo de link preparado na parte do cabeçalho do código-fonte da página - ele é delimitado pelas tags e.

Recomendado: