O CSS em si não fornece diretamente a função de alterar o sublinhado dos links HTML, mas contanto que usemos algumas técnicas, ainda podemos fazer com que o sublinhado monótono dos links da web fique colorido.
1. Princípios básicos
Em primeiro lugar, o primeiro passo para personalizar o sublinhado dos links HTML é criar um gráfico. Repita este gráfico na direção horizontal para formar um efeito de sublinhado. Se quiser mostrar o plano de fundo da página da web atrás do sublinhado, você pode usar um gráfico .gif transparente.
Em segundo lugar, se a altura do gráfico sublinhado for grande, a altura do texto deverá ser aumentada adequadamente para que haja um espaço maior entre a parte inferior de uma linha de texto e o topo da próxima linha de texto, como p { altura da linha: 1,5 }.
Exemplo de sublinhado de link personalizadoTerceiro, para exibir um sublinhado personalizado, o sublinhado padrão deve estar oculto, ou seja, { text-decoration: none };
Quarto, defina o gráfico de sublinhado para o elemento do link e construa um sublinhado personalizado. Supondo que o gráfico sublinhado seja underline.gif, o código CSS para definir o gráfico sublinhado é { background-image: url(underline.gif });
Quinto, precisamos fazer com que o gráfico sublinhado se repita na direção horizontal, mas não na direção vertical, caso contrário ele ficará oculto atrás do texto. O código que exige que o sublinhado seja repetido apenas na direção horizontal é: a { background-repeat: repeat-x };
Sexto, para garantir que o gráfico apareça abaixo do texto do link (independentemente do tamanho da fonte), use o atributo background-position para colocar o gráfico na parte inferior do elemento do link. Para gráficos sublinhados, como setas, você também pode considerar o alinhamento horizontal dos gráficos. Suponha que você queira colocar o gráfico sublinhado no canto inferior direito, o código CSS é: a { background-position: 100% 100% };
Sétimo, espaço em branco apropriado deve ser adicionado para permitir espaço para gráficos personalizados abaixo do texto do link. A posição específica do gráfico sublinhado em relação ao texto do link está relacionada ao tamanho do texto, mas de modo geral, você pode primeiro tornar a margem inferior igual à altura do gráfico sublinhado e, em seguida, ajustá-la se necessário. Por exemplo: a { padding-bottom: 4px }.
Oitavo, como o gráfico sublinhado é colocado na parte inferior do elemento do link, deve-se garantir que o link não seja quebrado (se o link puder abranger várias linhas, apenas o texto do link na linha seguinte terá um sublinhado personalizado ). Use o atributo CSS white-space para evitar que o texto do link seja quebrado, ou seja, um { white-space: nowrap }.
Para resumir, um exemplo completo de definição de propriedades de estilo CSS para um elemento de link seria:
um {
decoração de texto: nenhuma;
plano de fundo: url(sublinhado.gif) repetir-x 100% 100%;
preenchimento inferior: 4px;
espaço em branco: nowrap;
}
Se você quiser que o sublinhado personalizado apareça apenas quando o mouse estiver pairando , basta alterar a propriedade CSS background originalmente definida diretamente no elemento link para:hover, por exemplo:
um {
decoração de texto: nenhuma;
preenchimento inferior: 4px;
espaço em branco: nowrap;
}
a: passar o mouse {
plano de fundo: url(sublinhado.gif) repetir-x 100% 100%;
}
2. Valorização de exemplos
Suponha que haja dois gráficos sublinhados diagonal.gif (linha ondulada) e flower.gif (flor). A altura e largura do primeiro são 3 e 9, e a altura e largura do último são 11 e 15. Aqui está um exemplo completo de configuração de dois tipos de sublinhado:
Exemplo de sublinhado de link personalizadoO código-fonte da página da web é o seguinte:
Nota: diagonal.gif e flower.gif foram copiados para o mesmo diretório onde a página web está localizada.
<html>
<cabeça>
<title>ex</title>
<tipo de estilo=texto/css>
a#exemplo1a {
decoração de texto: nenhuma;
plano de fundo: url(diagonal.gif) repetir-x 100% 100%;
espaço em branco: nowrap;
preenchimento inferior: 2px;
}
a#exemplo1b {
decoração de texto: nenhuma;
espaço em branco: nowrap;
preenchimento inferior: 2px;
}
a#exemplo1b:hover {
plano de fundo: url(diagonal.gif) repetir-x 100% 100%;
}
a#exemplo2a {
decoração de texto: nenhuma;
plano de fundo: url(flor.gif) repetir-x 100% 100%;
espaço em branco: nowrap;
preenchimento inferior: 10px;
}
a#exemplo2b {
decoração de texto: nenhuma;
espaço em branco: nowrap;
preenchimento inferior: 10px;
}
a#exemplo2b:hover {
plano de fundo: url(flor.gif) repetir-x 100% 100%;
}
-->
</estilo>
</head>
<corpo>
<p>Exemplo:</p>
<p> <a href=# id=example1a>sublinhado estático ondulado</a>,
<a href=# id=example1b>A linha ondulada que aparece quando o mouse passa</a>. </p>
<p> <a href=# id=example2a>Sublinhado estático de flor</a>,
<a href=# id=example2b>O sublinhado da flor que aparece quando o mouse passa</a>. </p>
</body>
</html>