Baixe em PDF
Baixe em PDF
Embora você possa mudar a cor do texto usando a tag <font> no HTML, o HTML5 não permite mais o uso desse método. Em vez disso, você usará o CSS básico para definir a cor do texto em vários elementos da página, garantindo que seu site seja compatível com todos os navegadores possíveis.
Passos
-
Abra seu arquivo HTML. A melhor maneira de mudar a cor do seu texto é usando o CSS. O antigo atributo HTML <font> não pode mais ser usado no HTML5. O melhor método para definir o estilo dos seus elementos é usar o CSS.
- Ele também funcionará com folhas de estilo externas (arquivos CSS separados). Os exemplos abaixo são válidos para um arquivo HTML usando uma folha de estilo interna.
-
Coloque o cursor dentro da tag <head> . Você definirá os estilos dentro dessa tag se estiver usando uma folha de estilo interna.
-
Escreva <style> para criar uma folha de estilo interna. Quando a tag <style> estiver na tag <head>, o CSS dentro dela será aplicado a todos os elementos da página. Quando você terminar, o começo do seu arquivo HTML ficará parecido com o exemplo a seguir: [1] X Fonte de pesquisa
<!DOCTYPE html> < html > < head > < style > </ style > </ head >
-
Digite o elemento cuja cor do texto você quer mudar. Você usará a seção <style> para definir a aparência dos diferentes elementos da página. Portanto, para mudar, por exemplo, o estilo de todo o texto da página, digite o seguinte:
<!DOCTYPE html> < html > < head > < style > body { } </ style > </ head >
-
Insira o atributo color: no seletor de elementos. Ele dirá à página que cor de texto usar para aquele elemento. Nesse exemplo, ele mudará a cor do texto de toda a página:
<!DOCTYPE html> < html > < head > < style > body { color : } </ style > </ head >
-
Defina uma cor para o texto. Isso pode ser feito de três maneiras: pelo nome da cor, pelo valor hexadecimal ou pelo valor RGB. Por exemplo, para a cor azul, você pode digitar blue , rgb(0, 0, 255) ou #0000FF .
<!DOCTYPE html> < html > < head > < style > body { color : red ; } </ style > </ head >
-
Acrescente outros seletores para mudar a cor de vários elementos. Você pode usar os diferentes seletores para alterar a cor do texto em diversas partes da página:
<!DOCTYPE html> < html > < head > < style > body { color : red ; } h1 { color : #00FF00 ; } p { color : rgb ( 0 , 0 , 255 ) } </ style > </ head > < body > < h1 > Este título será verde </ h1 > < p > Este parágrafo será azul. </ p > Este texto será vermelho. </ body > </ html >
-
Defina uma classe CSS em vez de mudar um elemento. Você pode definir uma classe e aplicá-la a qualquer elemento que quiser ao longo da página para acrescentar instantaneamente o estilo dela. Por exemplo, no arquivo a seguir, a classe ".redtext" fará com que qualquer elemento ao qual ela seja aplicada fique com o texto vermelho:
<!DOCTYPE html> < html > < head > < style > . redtext { color : red ; } </ style > </ head > < body > < h1 class = "redtext" > Este título ficará vermelho </ h1 > < p > Este parágrafo ficará normal. </ p > < p class = "redtext" > Este parágrafo ficará vermelho. </ p > </ body > </ html >
Publicidade
-
Abra seu arquivo HTML. Você pode usar os atributos de estilo na linha para alterar o estilo de um elemento da página, o que pode ser útil para uma ou duas mudanças rápidas, mas não é recomendado para o uso em larga escala. Para alterações mais abrangentes, use o método anterior. [2] X Fonte de pesquisa
-
Encontre o elemento daquele arquivo que você deseja alterar. Você pode usar atributos de estilo na linha para mudar a cor do texto de qualquer um dos seus elementos. Por exemplo, se quiser alterar a cor do texto de um título específico, encontre-o no arquivo:
<!DOCTYPE html> < html > < body > < h1 > Este é o título que você deseja modificar </ h1 > </ body > </ html >
-
Acrescente o atributo "style" ao elemento. Digite style="" dentro da tag de abertura do elemento que você quer alterar:
<!DOCTYPE html> < html > < body > < h1 style = "" > Este é o título que você deseja modificar </ h1 > </ body > </ html >
-
Digite o atributo color: dentro do "" . Por exemplo:
<!DOCTYPE html> < html > < body > < h1 style = "color:" > Este é o título que você deseja modificar </ h1 > </ body > </ html >
-
Escolha a cor desejada para o texto. Você pode expressar uma cor de três maneiras: digitando o nome dela, inserindo o valor RGB ou usando o valor hexadecimal. Por exemplo, para mudar a cor para amarelo, você pode digitar yellow; , rgb(255,255,0); , ou #FFFF00; :
<!DOCTYPE html> < html > < body > < h1 style = "color:#FFFF00;" > Este título agora é amarelo </ h1 > </ body > </ html >
Publicidade
Dicas
- Há uma lista com os nomes das cores e os valores hexadecimais delas em http://www.w3schools.com/colors/colors_names.asp
Publicidade
Referências
Publicidade
Inscreva-se na Newsletter Gratuita do wikiHow!
Receba tutoriais úteis em seu email semanalmente!
Inscreva-me!
