Com CSS, é fácil definir a cor do texto em um documento. Se você quiser que os parágrafos em sua página sejam renderizados em uma determinada cor, basta especificar isso em sua folha de estilos externa e o navegador exibirá seu texto nessa cor escolhida. O que acontece então quando você quer mudar a cor de apenas uma palavra (ou talvez apenas algumas palavras) dentro de um parágrafo de texto? Para isso, você precisará usar um elemento inline como a tag.
Em última análise, alterar a cor de uma única palavra ou um pequeno grupo de palavras dentro de uma frase é fácil usando CSS, e as tags são HTML válidas, por isso não se preocupe com isso sendo algum tipo de hack. Com essa abordagem, você também evita o uso de tags e atributos reprovados, como "fonte", que é um produto de uma era passada do HTML.
Este artigo é para desenvolvedores iniciantes que provavelmente são novos em HTML e CSS. Ele ajudará você a aprender como usar a tag HTML e CSS para alterar a cor do texto específico em suas páginas. Dito isto, há algumas desvantagens nesse método, que abordaremos no final deste artigo. Por enquanto, continue lendo para aprender as etapas para alterar essa cor de texto. É muito fácil e deve levar cerca de dois minutos.
Instrução passo a passo
- Abra a página da web que você deseja atualizar no seu editor HTML de texto favorito. Pode ser um programa como o Adobe Dreamweaver ou um editor de texto simples como o Notepad, o Notepad ++, o TextEdit, etc.
- No documento, localize as palavras que você deseja exibir em uma cor diferente na página. Por causa deste tutorial, vamos usar algumas palavras que estão dentro de um parágrafo maior de texto. Esse texto estará contido no par de tags. Encontre uma das duas palavras cuja cor você gostaria de editar.
- Coloque o cursor antes da primeira letra da palavra ou grupo de palavras que você deseja mudar de cor. Lembre-se, se você estiver usando um editor WYSIWYG como o Dreamweaver, você está trabalhando na "visualização de código" agora.
- Deixe envolver o texto cuja cor queremos alterar com uma tag, incluindo um atributo de classe. O parágrafo inteiro pode ser assim:
Este é o texto que é focado em uma frase.
- Acabamos de usar um elemento inline, o, para dar a esse texto específico um "gancho" que podemos usar em CSS. Nosso próximo passo é ir para o nosso arquivo CSS externo para adicionar uma nova regra.
- Em nosso arquivo CSS, vamos adicionar:
-
.focus-text {
-
cor: # F00;
-
}
- Essa regra configuraria esse elemento inline, o, para exibir na cor vermelha. Se tivéssemos um estilo anterior que definisse o texto de nosso documento como preto, esse estilo inline faria com que o texto de extensão fosse focalizado e se destacasse com a cor diferente. Poderíamos também adicionar outros estilos a essa regra, talvez tornando o texto em itálico ou negrito para enfatizá-lo ainda mais?
- Salve sua página.
- Teste a página no seu navegador favorito para ver as alterações em vigor.
- Observe que, além do, alguns profissionais da web optam por usar outros elementos, como os pares de tags ou. Essas tags costumavam ser para negrito e itálico especificamente, mas foram substituídas e substituídas por e. As tags ainda funcionam em navegadores modernos, no entanto, muitos desenvolvedores da Web as utilizam como ganchos de estilo inline. Essa não é a pior abordagem, mas se você quiser evitar elementos obsoletos, sugerimos que continue com a tag para esses tipos de necessidades de estilo.
Dicas e coisas para observar
Embora essa abordagem funcione bem para necessidades de estilo pequeno, como se você precisasse alterar apenas um pequeno trecho de texto em um documento, ele pode ficar fora de controle rapidamente. Se você achar que sua página está cheia de elementos embutidos, todos com classes únicas que você está usando no seu arquivo CSS, você pode estar fazendo errado, lembre-se, quanto mais dessas tags estiverem na sua página, mais difícil será É provável que seja para manter essa página daqui para frente. Além disso, a boa tipografia da Web raramente tem muitas variantes de cor, etc. em toda a página.
