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.
Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…
Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…
Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…
HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…
Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…
Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…
View Comments
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!