Desde a invenção da linguagem de marcação de hipertexto, HTML, os conceitos de layout e layout de documentos da web mudaram drasticamente. Com o suporte quase completo de navegadores populares para os padrões de folha de estilo em cascata CSS e CSS2, tornou-se possível influenciar quase todos os aspectos da apresentação visual de um documento. Por exemplo, você pode tornar o fundo de um link colorido, preenchido com alguma imagem e também mudar dependendo das ações do usuário.
Necessário
- - a capacidade de editar o texto do documento ou o texto das folhas de estilo do documento;
- - um editor de texto que permite salvar o documento na codificação original.
Instruções
Passo 1
Faça com que o plano de fundo do link seja preenchido uniformemente com uma cor aleatória adicionando informações de estilo embutido ao elemento A. Adicione estilo aos atributos do elemento A correspondente ao link cujo plano de fundo você deseja alterar. No conteúdo do atributo style, coloque a propriedade CSS background-color com o valor fornecido, que é o identificador correto para a cor de fundo. Por exemplo, pode ser assim:
Texto do link
Passo 2
Defina o plano de fundo do link em uma folha de estilo externa ou incorporada em seu documento. Na folha de estilo apropriada, adicione um conjunto de regras endereçadas por um seletor de um nível aceitável de especificidade. No conjunto de regras, insira a propriedade background-color da mesma forma que na etapa anterior. Selecione a especificidade do seletor com base nas regras em cascata CSS2 e no escopo desejado. Portanto, se você precisar definir a cor de apenas um link, faz sentido usar um seletor de ID; se houver vários desses links, é melhor usar um seletor de atributo baseado no valor da classe.
Por exemplo, para definir um fundo verde para um link específico em um documento, você pode adicionar um conjunto de regras à folha de estilo:
A # ID_GREEN
{
cor de fundo: # 00FF00;
}
Você também deve definir o atributo ID do elemento A correspondente ao link desejado para ID_GREEN:
Texto do link
etapa 3
Preencha o fundo do link com uma imagem. Siga os métodos descritos nas etapas um e dois, mas em vez da propriedade CSS background-color, use background-image. Por exemplo:
Texto do link
Se necessário, adicione uma propriedade de repetição de plano de fundo às regras CSS definidas para definir opções para duplicar a imagem de plano de fundo horizontal e verticalmente.
Passo 4
Faça com que o plano de fundo do link mude quando você passa o mouse sobre ele ou quando o foco se move. Adicione conjuntos de regras a uma folha de estilo de documento externa ou incorporada que define o plano de fundo de um link ou grupo de links em diferentes estados. Use seletores de ID e atributo em conjunto com as pseudo classes dinâmicas: hover,: active e: focus. Por exemplo, para que o fundo de um link com um valor de atributo de ID de ID_DYNAMIC_BACKGROUND seja vermelho no estado inativo e verde no estado sob o cursor do mouse, os seguintes conjuntos de regras devem ser adicionados à folha de estilo:
A # ID_DYNAMIC_BACKGROUND
{
cor de fundo: # FF0000;
}
A # ID_DYNAMIC_BACKGROUND: pairar
{
cor de fundo: # 00FF00;
}
Você pode fazer o mesmo para criar um plano de fundo com uma imagem que muda dinamicamente.
