Texto de iluminação numa página web ajuda a trazer imediatamente à atenção do leitor informações importantes. Por exemplo, este texto é destacado em amarelo e provavelmente chamou primeiro a sua atenção. Há vários métodos para destacar o texto. Para prosseguir, seleccione um método da lista abaixo e siga as instruções.
Highlight usando o HTML5 <mark> tag
Se estiver a trabalhar numa página HTML5, o <mark> tag pode rapidamente destacar o texto. Abaixo está um exemplo de como usar a tag da marca e o seu resultado. Se o seu browser suporta a tag <mark> tag, “texto destacado” deve ter um fundo amarelo.
Código da amostra
Here is an example of <mark>highlighted text</mark> using the <mark> tag.
Resultado da amostra
Aqui está um exemplo de texto destacado utilizando o < marca> marca.
Texto em destaque apenas com código HTML
Para destacar texto com código HTML e suporte para todos os navegadores, definir o estilo de cor de fundo, como mostrado no exemplo abaixo, usando o <span> tag HTML.
Código da amostra
<span style="background-color: #FFFF00">This text is highlighted in yellow.</span>
Resultado da amostra
Este texto é destacado a amarelo.
No exemplo acima, o <span> tag HTML tem um código de cor de fundo de #FFFF00, que é amarelo. Neste caso, a palavra “amarelo” poderia ser usada em vez do código de cor, ou qualquer outro nome de cor para esse efeito.
Com o mesmo código, também se poderia destacar uma ou mais palavras dentro de um parágrafo para chamar a atenção para uma secção específica do texto.
Texto com CSS & HTML
P>P>Pode também criar uma classe CSS e definir o atributo “cor de fundo”, como mostrado no exemplo abaixo.
Código de exemplo
<style>body { background-color:blue; }.highlightme { background-color:#FFFF00; }p { background-color:#FFFFFF; }</style>
No código CSS acima, há três elementos a serem definidos. Primeiro, a cor de fundo do corpo é definida para azul, segundo, uma nova classe chamada “highlightme” com um fundo amarelo, e finalmente, a etiqueta do parágrafo tem um fundo branco.
Se quiser usar a classe “highlightme” para destacar o seu texto, pode criar uma etiqueta <span> no seu HTML que faz referência à classe CSS.
Código de exemplo
<span class="highlightme">test</span>
Como destacar um parágrafo completo
A classe CSS ou classe de estilo acima mencionada também pode ser aplicada a uma etiqueta de parágrafo se desejar destacar um parágrafo completo, como se mostra abaixo.
Código da amostra
<p style="background-color: #FFFF00">This whole paragraph of text is highlighted in yellow.</p>
Resultado da amostra
Este parágrafo inteiro do texto é destacado a amarelo.
Informação adicional
- Ver o nosso CSS, destaque, e definição HTML para páginas relacionadas com informação adicional.
- ajuda e suporte de cor CSS e HTML.