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?

Civilization

A empresa Take-Two pagou à Infogrames mais de 22 milhões de dólares pelos direitos de Civilization, em novembro de 1994. Ainda sobre este título, Sid Meier, um dos seus fundadores, é o profissional da área dos games mais premiado em todo o mundo.

Galaxy Game

As primeiras máquinas de fliperama do mundo a utilizarem moedas, chamadas de Galaxy Game, custavam mais de 20 mil dólares para serem produzidas. Saiba mais sobre elas aqui.

Computadores de 1,5 tonelada

Em 1949 a revista Popular Mechanics fez uma previsão para o futuro, dizendo: "Um dia os computadores pesarão menos do que 1,5 tonelada". E pensar que temos smartphones capazes de realizar milhões de vezes mais operações do que os computadores daquela época.

Tetris

O título Tetris detém o recorde de jogo mais adaptado de todos os tempos. No total foram mais de 60 plataformas diferentes que receberam alguma versão do quebra-cabeças criado por Alexey Pajitnov. Conheça mais sobre este incrível jogo clicando aqui.

PC com barulho?

Excesso de barulho dentro do seu gabinete, principalmente logo que você o liga, pode ser sintoma de problemas nas ventoinhas, que podem precisar ser limpas ou trocadas. Entre em contato com um técnico de sua confiança e verifique isso o quanto antes.

Muitos aplicativos

Instalar vários aplicativos com o mesmo propósito, como editores de texto, reprodutores de músicas ou vídeos e até programas antívirus sobrecarregam o seu sistema operacional e ainda ocupam espaço desnecessário em seu HD. Tenha apenas um bom programa para cada função.

Duck Hunt

Ao completar o nível 99 do jogo Duck Hunt, para Nintendo, o jogo retorna ao primeiro nível, mas um bug impede que se acerte os patos neste recomeço. Este é um exemplo do que é chamado no mundo dos games de "Kill Screen".

Cuidados com o notebook

Utilizar seu notebook em camas, sofás ou qualquer superfície macia pode obstruir as entradas e saídas de ar, elevando a temperatura e provocando danos a diversos componentes. Utilize-o sempre sobre uma superfície rígida. Saiba mais aqui.