CSS - Manual de Estilo (parte 3)

Veremos como facilitar o código, tornando-o mais legível. Aspectos avançados de posicionamento de objetos também serão vistos em detalhes.

[ Hits: 17.201 ]

Por: Cicero Juliao da Silva Junior em 18/03/2010


Agrupamento e código mais limpo



Este artigo é o terceiro da série "CSS - Manual de Estilo", baseado no ótimo site da W3Schools. Iremos direto ao assunto, sem rodeios, pois já temos uma boa introdução nos artigos anteriores. Portanto, se precisar, leia tais artigos nos links abaixo:

Seletores em grupo

Em CSS, normalmente teremos vários elementos possuindo o mesmo estilo, como neste caso:

h2
{
   color:red;
}
h3
{
   color:red;
}
p
{
   color:red;
}

Podemos diminuir o código, e ainda torná-lo mais fácil de ler se usarmos seletores em grupo. Para isso, separe cada seletor com uma vírgula. Apenas isso. Veja como ficaria o exemplo acima:

h2,h3,p
{
   color:red;
}

Uma outra forma de facilitar a leitura tornando o código mais ágil, é agrupar o estilo em elementos aninhados. Por exemplo, imagine que todos os parágrafos possuam o mesmo estilo: cor verde da fonte, e alinhamento centralizado. Mas alguns poucos parágrafos, que chamaremos de 'destak', possuem uma característica adicional: seu background será azul. Você não precisa fazer duas marcações separadas. Faça um tipo de agrupamento no código, dessa forma:

p
{
   color:green;
   text-align:center;
}
.destak
{
   background-color:blue;
}

    Próxima página

Páginas do artigo
   1. Agrupamento e código mais limpo
   2. Exibição
   3. Posicionamento
   4. Sobreposição
Outros artigos deste autor

Programando em Octave (parte 1)

SystemRescueCd - Corrigindo o sistema e recuperando dados

Explorando a máquina sem abrí-la

PORTAGE - Gerenciamento de pacotes no Gentoo Linux

Inkscape - Introdução (Parte 3)

Leitura recomendada

CSS - Manual básico sobre estilo

CSS pela W3schools (Parte 1) - Uma introdução

BlueGriffon, o dreamweaver do Linux

Criando JPG animado com o JpegAnim

Aplicações para webdesign

  
Comentários

Nenhum comentário foi encontrado.


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts