Elementos CSS decorativos sublinhados
A tecnologia de folhas de estilo executa duas funçõesno registro de páginas HTML. Em primeiro lugar, com a sua ajuda, a posição dos elementos individuais do site é formada. Em segundo lugar, torna os blocos visualmente atraentes para o usuário. A segunda função é implementada de diferentes maneiras. Um deles está sublinhando. CSS fornece para este atributo texto-decoração.
Especificação do registro de atributo
Aproveite a propriedade texto-decoração simplesmente. É suficiente escrever a seguinte linha para o elemento no código do arquivo de estilo:
texto-decoração: atributo_valor;
Em vez de "attribute_value"A especificação CSS oferece várias opções:
- sublinhado - a linha está localizada estritamente sob o texto;
- overline - a linha passa do topo do texto;
- nenhum - remoção de todos os efeitos decorativos;
- herdar - adota o valor do elemento pai.
O acima não são todas as formas possíveis do registro, já que este atributo especifica não apenas o sublinhado do CSS, mas também outros efeitos, por exemplo, "piscando" o texto ou seu entrelaçamento.
Exemplos de design de hiperlink
Iniciantes em Web Design e Programaçãosurge a pergunta: por que fazer a linha de fundo do texto? No alvorecer da era da tecnologia da Internet, essa maneira de destacar indicou ao usuário que há um hiperlink na frente dele - um texto que será clicado para uma nova página.
Por padrão, os hiperlinks têm um conjunto de propriedades sublinhado. Na prática, surge o problema de remover a linha de elementos inativos e torná-la visível quando o usuário passa o ponteiro do mouse. Aqui está um código de exemplo que desabilita o sublinhado do CSS:
um {texto-decoração: nenhum;}
Para links ativos, use a seguinte entrada:
a: hover {text-decoration: underline;}
Sublinhado decorativo para avançado
Atributo padrão texto-decoração tem várias limitações:
- a cor da linha não difere da cor do texto do link, é impossível distinguir entre a sua "coloração";
- somente a linha sólida é usada como um sublinhado. CSS não implica o uso de outros estilos.
Mas técnicas especiais ajudam a contornar o design clássico do texto. No primeiro caso, uma tag adicional <é usada para definir o hiperlink.extensão>.
Por exemplo:
<a href="#" style="text-decoration: underline; color: red">
<span style = "color: blue"> hiperlinks</ span>
</a>. </p>
Como resultado, a palavra de hiperlink será escrita em azul na página e a cor da linha será vermelha.
Outra maneira avançada de implementar CSS sublinhado, - beira-fundo. O exemplo abaixo explica seu uso:
um {border-bottom: 1px solid red;}
O resultado será o mesmo que no exemplo acima. Mas esse método tem uma vantagem importante. Além de alterar a cor da linha (agora definida como vermelha - vermelho), é possível transformar a maneira como está marcado:
- pontilhado - faz um ponto sublinhado;
- desfeito - a linha consiste em traços;
- duplo - desenha uma linha dupla.
Então atributo fronteirafundo mais funcional. Além de exibir uma linha decorativa sob o texto, permite personalizar sua aparência.
