Como estamos construindo ainda nosso blog e foi demonstrado interesse pelas faixas separadoras, achei que pudesse ser interessante também implementarmos separadores de seções. Em textos longos eu costumo usá-los, mas não como os que temos em nosso CSS agora. São divisores de seções para dar melhor hierarquia ao texto dos posts.
Como funcionam os headers
Em html, existem tags muito especiais: os cabeçalhos h1, h2, h3... Estas tags formatam o texto gerando certo grau de hierarquia, sendo h1 o texto que deve estar mais aparente. Pode ser utilizado, por exemplo, como título de seções. Subseções dentro de uma seção formatada com h1 podem ser formatadas com h2 ou algum outro menor.
Atualmente, com a possibilidade de usarmos CSS (ao menos em quase todo navegador), os cabeçalhos são excelentes ferramentas de customização. Por exemplo, em meu blog pessoal eu uso as faixas separadoras que descrevo em meu primeiro post como o h4. Assim, se eu aplicar algum texto como cabeçalho h4, ele será exibido na mesma forma daquela faixa separadora.
Divisão de seções em posts
De forma similar às faixas separadoras, poemos definir um divisor de seções usando apenas uma linha abaixo do nome da seção e aplicando cores diferentes no texto. Isto já é um estilo bem interessante.
Em nosso CSS, como não utilizávamos o cabeçalho h4, resolvemos customizá-lo da seguinte forma:
Assim, para criar as divisões das seções mostradas acima, apenas aplicamos a formatação no nome da seção, algo como
Temos assim o resultado apresentado neste post.
Atualmente, com a possibilidade de usarmos CSS (ao menos em quase todo navegador), os cabeçalhos são excelentes ferramentas de customização. Por exemplo, em meu blog pessoal eu uso as faixas separadoras que descrevo em meu primeiro post como o h4. Assim, se eu aplicar algum texto como cabeçalho h4, ele será exibido na mesma forma daquela faixa separadora.
Divisão de seções em posts
De forma similar às faixas separadoras, poemos definir um divisor de seções usando apenas uma linha abaixo do nome da seção e aplicando cores diferentes no texto. Isto já é um estilo bem interessante.Em nosso CSS, como não utilizávamos o cabeçalho h4, resolvemos customizá-lo da seguinte forma:
h4
{
border-bottom: 3px solid #d6d0cc;
font-weight: normal;
color: #0f0f0f;
font-size: 10pt;
}
{
border-bottom: 3px solid #d6d0cc;
font-weight: normal;
color: #0f0f0f;
font-size: 10pt;
}
Assim, para criar as divisões das seções mostradas acima, apenas aplicamos a formatação no nome da seção, algo como
<h4> Subdivisões de seções em posts </h4>
Temos assim o resultado apresentado neste post.
Post scriptum
- Como as cores que eu propus inicialmente não estavam muito boas, atualizei algumas vezes este post e com a ajuda de Ponhovo Loreno conseguimos encontrar cores boas para estas seções. Portanto, agradecimentos sinceros ao referido internauta.
- Ponhovo Loreno sofre de daltonismo e confunde vermelho com verde.
2 comentários:
Bem legal
Realmente deixa o texto bem mais organizado
Ficou bem legal!
Postar um comentário