HTML (HyperText Markup Language) fornece seis tags especiais para exibir cabeçalhos de níveis diferentes. Todos eles possuem parâmetros padrão (tamanho e estilo da fonte, a quantidade de recuos dos elementos anteriores e posteriores, etc.). Essas opções podem ser substituídas usando instruções CSS (folhas de estilo em cascata) e, assim, alterar a aparência dos títulos no texto de uma página da web.
Instruções
Passo 1
Coloque títulos de níveis diferentes entre as tags de abertura e fechamento correspondentes, se ainda não tiver feito no código-fonte da página da web. Por exemplo, o título mais importante (primeiro nível) deve estar entre as tags
e
:
Título de primeiro nível
O próximo subtítulo de nível mais importante deve ser colocado entre as tags
e
etc. O último dos níveis previstos é o sexto -
e
Passo 2
Coloque na parte do cabeçalho do código-fonte (entre as tags e) uma declaração informando ao navegador do visitante que há uma descrição dos estilos em CSS neste local:
/ * As instruções CSS estarão aqui * /
etapa 3
Entre as tags de estilo de abertura e fechamento, adicione descrições de estilo para os títulos de cada nível cuja aparência você deseja alterar. Por exemplo, se você só precisa alterar a aparência dos títulos de primeiro nível, este código pode ser assim:
h1 {
cor vermelha;
tamanho da fonte: 20px;
estilo da fonte: itálico;
intensidade da fonte: Negrito;
margem superior: 30px;
margin-bottom: 20px;
}
Aqui, h1 indica que a descrição entre chaves se refere à tag h1 e é chamada de "seletor". O parâmetro color define a cor do texto, o parâmetro font-size é o tamanho da fonte, o estilo da fonte com o valor itálico é a fonte itálica, a espessura da fonte com o valor negrito é negrito, a margem superior é a parte superior margin, e margin-bottom é a margem inferior. Para títulos de segundo nível, adicione um bloco semelhante com um seletor h2, etc.
Passo 4
Use a sintaxe abreviada se houver muitos níveis para descrever. Por exemplo, as descrições das fontes podem ser colocadas em um parâmetro, assim como as descrições dos tamanhos dos recuos. Amostra:
h1 {
cor vermelha;
fonte: arial em negrito, 20px;
margem: 30px 0 20px 0;
}
h2 {
cor laranja;
fonte: arial negrito 18px;
margem: 25px 0 15px 0;
}
No parâmetro margem, as margens devem ser especificadas no sentido horário, a partir da margem superior, por meio de um espaço (canto superior direito inferior esquerdo).
