Agrupe seus seletores – 1a. Parte
Publicado em: 2006-03-17 — 28.148 visualizacoes
Em uma folha de estilos os seletores CSS que compartilham uma mesma regra CSS podem e devem ser agrupados.
Para agrupar seletores separe-os com uma vírgula como mostrado no exemplo a seguir:
p, span.dois, code {
color: #000;
font-size: 0.9em;
}
Na regra CSS acima os elementos p, span da classe ‘dois’ e code, todos eles serão na cor #000 e terão um tamanho de fonte igual a 0.9em.
Observe a folha de estilos abaixo, onde destaquei as declarações compartilhadas por todos os seletores:
.principal {
font-size: 1.0em;
text-align: justify;
padding: 10px;
}
.principal li {
margin: 15px 0 3px;
font-size: 1.0em;
padding: 10px;
list-style: none;
text-align: justify;
}
.principal p {
text-align: justify;
margin: 10px 5px 10px 0;
padding: 10px;
font-size: 1.0em;
}
p.destaque {
color:#600;
border:1px dotted #ffe;
background:#eee;
padding:10px 10px 5px;
text-align: justify;
font-size: 1.0em;
}
Vamos agrupar os seletores que compartilham das declarações comuns e reescrever a folha de estilos assim:
.principal, .principal li, .principal p, p.destaque {
font-size: 1.0em;
text-align: justify;
}
.principal {
padding: 10px;
}
.principal li {
margin: 15px 0 3px;
padding: 10px;
list-style: none;
}
.principal p {
margin: 10px 5px 10px 0;
padding: 10px;
}
p.destaque {
color:#600;
border:1px dotted #ffe;
background:#eee;
padding:10px 10px 5px;
}
Retiramos as declarações compartilhadas de cada um seletores e agrupamos aqueles seletores em uma regra única.
Podemos simplificar ainda mais a folha de estilo apresentada como exemplo, tirando proveito do efeito cascata. Mas, isto será assunto para uma matéria futura:
Agrupando seletores – 2a.Parte.
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
Esta matéria foi publicada em: 2006-03-17 (sexta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2006/03/17/agrupesel/trackback no seu site.
Olá, Mauricio!
Gostaria de agradecer pela sua iniciativa de fazer um tutorial tão rico em informações e detalhes e com exemplos completos.
Estou usando seus exemplos para a aprender CSS, mas não consigo visualizar o resultado no FireFox 1.0.8 e nem no Mozila. O estranho é que seu site utiliza folha de estilo e vejo normalmente. Vc tem algum palpite sobre isso?
Muito obrigada,
Marly
Mais uma vez, parabéns Maujor pelo seu trabalho… atualmente virei fã desse homem… criei até uma comunidade no orkut em homenagem ao JEDI Maujor… vlw!! :]
O elemento HTML code está previsto nas especificações do HTML.
Destina-se a marcar porções de código em uma página Web.
Legal maujor, que bom :).
E quanto a tag code? Ela foi criada por ti ou existe mesmo ela? Não achei referencia alguma no google :).
Grato a todos pelas mensagens.
Farley:
Lamento mas não entendi o que vc está pretendendo.
Se vc quer montar uma página personalizada crie um template.
César Oliveira:
Boa! você descobriu o tema da 2a. Parte desta matéria.
Felipe:
Não é erro de renderização.
A parte superior da coluna de conteúdo foi projetada apoiada em cima da barra de navegação.
Olá Maujor, parabéns, o blog ficou legal :).
Só um detalhe, a caixa branca de conteúdo, no meu firefox (Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.0.1) Gecko/20060227 Firefox/1.5.0.1) no Linux aparece comendo parte da barra verde do menu.
Não sei se é um erro, mas fica ai a dica :).
O que eu ia perguntar, é se existe essa tag code, ou você criou ela?
Andei vendo seu CSS e o código gerado pelo wordpress a título de aprendizado e achei interessante.
Eu sou o mantenedor do planet.gentoobr.org e achei que seria interessante procurar usar as caixas com rolagem como ti usas no teu blog.
Se puder me contatar via e-mail para conversarmos seria interessante.
Abraços.
Felipe ‘chronos’ Prenholato.
http://chronosinside.blogspot.com
http://planet.gentoobr.org
http://www.gentoobr.org
Olá, boa tarde
Fiquei muito contente ao ter conhecimento do blog maujor pois já adorava o site.
Aprendi muito sobre CSS neste site, e por isso aqui deixo a mensagem da minha gratidão.
Só uma questão:
o padding: 10 px;
Não podia ser incluido na agregação dos selectores tirando é claro o ultimo padding que é diferente dos outros.
Um abraço de Portugal
César Oliveira
Olá Maurício. Como está a usar o WP para seu blog, queria te perguntar algo que me ajudaria muito: Você faz idéia de como posso colocar uma determinada página pra carregar (eu crio uma página como por exemplo AGD) como página principal, que não seja a dos assuntos do blog? Tentei encontrar algumas coisas e um único plug-in que encontrei não funcionou bem.
Obrigado.
D+! Obrigado maurício, por mais essa contribução! Eu, como muitos só temos de agradecer!
abraços..
Parabéns! Parabéns! Parabéns!
É o mínimo que se pode dizer sobre o seu excelente trabalho!
Continue assim!
olá Maurício,
Parabéns pela iniciativa, seus tutoriais influem muito no processo de criação das minhas páginas e também nas minhas aulas, hoje sou entusiasta do CSS e recomendo sempre a sua utilização. Ainda estou caminhando na área mas já migrei parte do meu site para CSS.
Obrigado MAUJOR (exército de um homem só)
Aprender, comparando exemplos, usando a memória visual que todos temos, é uma maravilha.
Um milhão de palavras não têm a mesma eficiência de um simples e singelo “olha só como se faz”…
Obrigada por mais esse presente.
Vida longa ao blog do maujor!
E aí cara, parabéns pelo blog e pelo site. Acompanho seu trabalho há um tempo já…
Abraço