Agrupar seletores em CSS é algo bastante útil, principalmente quando lidamos com grandes páginas. Basicamente essa técnica é um atalho para poupar código e tornar o trabalho mais ágil, pois podemos aplicar propriedades a diversos seletores de uma vez só.

Imaginem que seja necessário aplicar o texto da cor azul a todas as tags <h>,de 1 a 6. Poderíamos fazer isso com os seguintes códigos:

h1 {color:blue;}
h2{color:blue;}
h3{color:blue;}

 E assim sucessivamente. Ou podemos agrupá-los, deixando o comando assim:

h1,h2,h3,h4,h5,h6 {color: blue;}

 É muito mais simples, sem contar que deixamos nosso código mais limpo e fácil de ser compreendido.

Vamos nos aprofundar um pouco mais e tornar nosso código mais profissional.

Classes

Se você já passou por outros sites atrás de conteúdo sobre CSS deve ter lido a palavra classe em vários deles, mas afinal de contas, o que são classes em CSS?

O conceito é bem simples e seu principal objetivo é promover o reaproveitamento de código. Funciona assim: imagine que você queira criar parágrafos <h1>na cor vermelha, mas também queria destacar trechos do seu texto em um parágrafo <p>na mesma cor. Para reaproveitar o código você poderia criar seu CSS dessa maneira:

.destaqueVermelho{color:red;}

Com este código criamos uma classe chamada destaqueVermelho, que tem um parâmetro color e o valor red.

Importante!
O ponto, no início da frase, faz parte da sintaxe do comando. Você não deve se esquecer dele!

A partir disso você pode vincular qualquer seletor HTML a ela, da seguinte forma:

<html>
<body>
<h1 class="destaqueVermelho">Título </h1>
<p class="destaqueVermelho">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>
</body>
</html>

Isso gerará a seguinte página:

Agrupamento de Seletores CSS

Vejam que tanto a tag <h1>quando a <p>receberam o texto em vermelho, pois estão vinculados à classe destaqueVermelho.

Isso é de extrema utilidade! Você pode criar classes para definir textos em negrito e chamá-los rapidamente no momento da criação do arquivo HTML. Ou poderiam ser em itálico, sublinhados, coloridos, com duplo espaçamento entre as linhas, enfim, dessa forma fica fácil estilizar textos com agilidade.

Você também pode definir um único seletor e vinculá-lo a uma classe. Se apenas parágrafos podem receber textos em vermelho, o nosso CSS ficaria assim:

p.destaqueVermelho{color:red;}

Especificamos assim que apenas a tag p pode se beneficiar dessa classe.

A chamada no arquivo HTML seria da mesma forma:

<p class="destaqueVermelho">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>

No entanto, se tentar atribuir essa classe a uma tag <h1>,não irá funcionar, pois agora a classe é de exclusividade dos seletores p.

Vale lembrar que o agrupamento de seletores pode ser usado para seletores vinculados a alguma classe, por exemplo:

p.destaqueVermelho, h1.destaqueVermelho, h4.destaqueVermelho{color:red;}

Com o código acima os seletores p, h1 e h4 podem fazer uso da classe destaqueVermelho.

Bem, assim fica fácil perceber que uma classe pode ser acessada por vários seletores, mas e o contrário? E se um seletor precisar fazer parte de várias classes, é possível? Sim, claro que é! Você pode colocar um seletor em quantas classes quiser. Vamos criar um CSS assim:

.destaqueVermelho{color:red;}
.destaqueFonte{font-family:Georgia;}
.tituloGrande{font-size:28px;}
Para vincular um seletor a todas essas classes ao mesmo tempo, nosso HTML ficará assim:

<h1 class="destaqueVermelho destaqueFonte tituloGrande">Título </h1>

Basta inserir todas as classes no comando class, separadas por um espaço. Vejam o resultado na página:

Agrupamento de Seletores CSS

A palavra título foi exibida em vermelho, com fonte Georgia e tamanho de 28pixels, ou seja, ela recebeu as propriedades de todas as classes.

Seletor universal

 É possível criar uma regra que se aplique a qualquer seletor, mesmo sem especificá-lo. Essa é uma opção bastante interessante para ser usada em conjunto com a característica da herança. Imagine que você queira criar uma página tendo todo o seu texto em itálico, exceto quando aparecerem nomes de cidades. Bem, então podemos criar um seletor universal para textos em itálico e, apenas para os nomes de cidades criaremos uma regra específica.

Ficaria da seguinte forma:

*{font-style:italic;}
.nomeCidade{font-style:normal;}

 E nosso HTML:

<html>
<body>
<h1>Cidade de <span class="nomeCidade">São Carlos </h1>
<p> <span class="nomeCidade">São Carlos </span>é um município brasileiro localizado no interior do estado de <span class="nomeCidade">São Paulo </span>,próximo de seu centro geográfico, e a uma distância rodoviária de 231 quilômetros da capital paulista. Com uma população recenseada em 221.936 habitantes (IBGE/2010), distribuídos em uma área total de 1.141 km², é a 13ª maior cidade do interior do estado em número de residentes. </p>
</body>
</html>

Percebam que para criar o seletor universal, apenas usei um asterisco, que representa todos os seletores. Nossa página ficou assim:

Agrupamento de Seletores CSS

Vejam que todas as palavras estão em itálico, exceto os nomes de cidades. A regra aplicada a todos os seletores funcionou perfeitamente, sendo utilizada tanto pela tag h1 quanto pela tag p. Quando aparecia um nome de cidade eu usei a tag span para chamar nossa classe que não exibia o texto em itálico. Simples!

Existem muitas outras regras envolvendo seletores CSS, mas não vamos falar delas agora. O objetivo dessas primeiras páginas era introduzi-lo nessa interessante linguagem de formatação de páginas HTML. Acredito que com o que foi falado você pode criar qualquer página. Faça bom proveito!

HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

Playstation

O Playstation só nasceu porque uma parceria entre Sony e Nintendo, para desenvolver uma unidade de CD para o Super Nintendo, fracassou. Clique aqui e saiba mais.

Recorde de patentes

A IBM detém o recorde de patentes em um único ano, atingindo a marca de 4186 registros no ano de 2008. Clique aqui e saiba mais sobre esta gigante do mundo da tecnologia.

Nintendo Wii

Nos primeiros oito dias após o lançamento do console Nintendo Wii foram vendidas 600 mil unidades. Isso equivale a quase um por segundo e estes incríveis números são referentes às vendas apenas nos EUA!

Final Fantasy X

O jogo Final Fantasy X para o Sony Playstation 2 vendeu, apenas no dia do seu lançamento, 1.455.732 cópias, estabelecendo um recorde de vendagem para as primeiras 24 horas de um game. Méritos da SquareSoft, que desenvolveu um excelente produto!

Street Fighter 2

Street Fighter 2, lançado para o Super Nintendo no início dos anos 90, foi o principal responsável pelo aumento nas vendas deste console. Graças ao sucesso do título nos Arcades e à perfeita adaptação ao console, muitos consumidores adquiriram o SNES para jogarem o título em casa. Saiba mais.

Mouse

O mouse foi criado em 9 de dezembro de 1968, por um americano chamado Douglas Engelbart, que o batizou de "XY Position Indicator for a Display System". Conheça a história do mouse clicando aqui.

River Raid

O épico jogo River Raid, do Atari, foi desenhado e boa parte de sua programação foi feita por uma mulher: Carol Shaw, uma excelente programadora e funcionária da Activision em 1982. Saiba mais sobre a história deste incrível jogo, aqui.

Máquina de Pascal

A Máquina de Pascal, criada em 1642 pelo filósofo, físico e matemático francês Blaise Pascal, é reconhecida como o primeiro computador do mundo e ele foi criado com o objetivo de calcular impostos. Saiba mais.