Combinando classes para ações selecionadas

Essa funcionalidade é muito poderosa quando se trata de reutilizar elementos. Vamos supor que você tenha criado uma classe chamada .caixa. Sabe que com freqüência pode usa-la no seu código XHTML, mas você não quer que os elementos nelas sejam todos iguais. Por exemplo: você pode querer que as margens mude, plano de fundo, espaçamentos etc.
Se você quiser que cada h3 tenha uma cor verde de fundo, você poderia fazer assim:

h3 {
text-transform: uppercase;
display: inline;
font-size: 92%;
margin: 10px 5px 0 5px;
padding: 2px;
}

.fundo_customizado {
background: #f762e0;
}

Você chama isso da seguinte maneira:

<div class=”caixa”>
<h3 class=”fundo_customizado”>Título em verde</h3>
</div>

Isso não está bom, porque você teve que chamar duas classe para realizar este efeito e outra, para criar outros fundos customizados você teria que sempre referenciar uma classe em h3. Vamos fazer diferente. Vamos criar h3 individuais para cada .caixa.

.normal h3 {
background: #ffffff; -- branco
}

noticias h3 {
background: red; -- vermelho
color: #ffffff;
}

.promocoes h3 {
background: #b18fd1;
font-size: 110%;

Agora você só precisa decidir o propósito de cada .caixa incluida em seu documento XHTML. Exemplo:

Caixa normal são texto simples
<div class=”caixa normal”>
<h3>Titulo da Caixa normal</h3>
</div>

Caixa noticias são noticias do seu site ou blog:
<div class=”caixa noticias”>
<h3>Titulo da Caixa Notícias</h3>
</div>

Caixa promocoes são suas promoções:
<div class=”caixa promocoes”>
<h3>Titulo da Caixa Promoções</h3>
</div>

Simplesmente combinamos as classe através de um separados de espaço, imediatamente toda instancia de h3 sofrerá estilização conforme sua classe. Veja que o código XHTML ficou muito mais limpo e estruturado. Com certeza o Google vai gostar disso.
Lembre-se que você pode criar, combinando classes, várias caixas de formato diferentes e cores também. Boa Sorte!

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email

Destacando diferentes tipos de links

Uma coisa que sempre me deixava irritado era a dificuldade de saber se um link, em uma página, era externo ou interno. Links externo, geralmente, são abertos em uma nova janela, mas isso não é uma boa idéia, pois polui a área de trabalho do visitante.
Uma solução para isso é você estilizar os links externo de seu site, colocando uma imagem ao lado do link com significado.
Você pode fazer criando uma classe para cada link externo:

.externo {
background: url(images/externalLink.gif) no-repeat right top;
}

Muito fácil, mas não é a maneira mais inteligente de se fazer isso, visto que terá que colocar a classe em cada link externo que produzir dentro do seu site ou blog.
Mostrarei uma técnica avançada de atribuição com seletor da CSS3, que já são suportada pelo Firefox e navegadores compatíveis com os padrões.

a[href^=”http:”] {--quaisquer links que começarem com o texto http: serão afetados
background: url(images/externalLink.gif) no-repeat right top;
padding-right: 15px;
}

Isso vai destacar todos os links externos de seu site, colocando uma imagem do lado direito (right) superior (top) com espaço do lado direito (padding-right) de 15px.
Porém, todos seus links serão afetados. Se você referência sua própria página, também receberá a estilização. Para resolver isso crie outra propriedade.

a[href^=”http://suapagina.com.br”], [href^=”http://www.suapagina.com.br”] { --suas paginas serão afetadas para ficarem sem estilização
Background-image: none;
padding-right: 0;
}

Aqui removemos a imagem de link externo e redefinimos a margem direita do link.
Simples né?

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email

Substituição de imagens - Ajuda com o Google

Texto em páginas web são sem dúvida o melhor método de indexação de páginas nos sites de busca. Ainda existem páginas que insistem em lotar seu layout com imagens e mais ainda, colocar texto em forma de imagens. Duas situações podem ocorrer tomando essa atitude:

1- Os sites de busca não lêem imagens. Seu site talvez nem seja indexado.
2- Seu site ficará inacessível a portadores de deficiência visual. Leitores de telas também tem dificuldades de ler imagens.



Mas você que colocar imagens para deixar seu site lindão?
Tudo bem! Existem formas de fazer isso usando o CSS. Mas sempre sugiro, não exagere nas imagens, conteúdo é o que interessa.
Às vezes por motivo de uma marca de empresa você precisará trocar o texto por uma imagem de texto pelo fato de que, as fontes na internet são limitadas.
Desenvolvedores de CSS usam alguns recursos para isso sem que o texto seja retirado da página. Em vez de colocar a imagem diretamente na página, eles usam uma técnica chamada substituição de imagens.



Alguns destes métodos não são usados atualmente pela falhas dos leitores de telas e a maioria não funciona quando a CSS é desativada. Muitos pararam de usar esta técnica e começaram a usar texto simples.
A técnica que irei mostra deve ser usada com cautela e nunca para dados importantes como, por exemplo: menus que levam a informações importantes.
Esta técnica descarta divs desnecessários:

<h2>
Titulo do site
</h2>

Em vez de usar um display:none para ocultar o texto, aplica-se um recuo negativo de texto muito grande ao título.

h2 {
text-indent: -5000px;
background: url(imagem_do_Logo.gif) no-repeat;
width: 150px;
height: 35px;

Simples. Esta técnica resolve o problema com leitores de tela e buscadores, porém não funciona quando as imagens estiverem desativadas e a CSS ativada. Isso é um caso extremo e só se aplicará com conexões muito lentas e para quem acessar o site de celulares como modem.
Aproveite a técnica e usem texto em vez de imagens.

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email

A marcação XHTML em um site deve ser mínima

Seus documentos devem ser estruturados e com um código válido para que você possa aplicar estilos de forma simples e tranquila. Para aplicar estilos em um código XHTML, você precisa de elementos no código. Estes elementos são conhecidos como seletores

Seletores Comuns
Seletores de tipos e seletores descendentes são os tipos mais comuns. Os de tipos, como nome já diz, são usados para selecionar um tipo de elemento como por exemplo um parágrafo, uma âncora ou um título. Simplementes especificando o nome do elemento no CSS. Eles podem ser chamados de seletores de elementos ou seletores simples.

p {color: black;}
a {text-decoration: underline;}
h1 {font-weight: bold;}

Os seletores descendentes permitem selecionar os descendentes de um elemento ou um grupo de elementos. Os descendentes sempre são indicados por um espaço entre o elemento e o alvo. Exemplo do elemento de lista e do elemento de link:

li a {text-decoration: none;}

Esses tipos de elementos, simples e descendentes, são ótimos para aplicar estilos genéricos para todos elementos de uma página. Existem também seletores de ID e classes que são criados por você. Discutimos isso no post IDs e nomes de Classes. Os IDs são indicados com o sinal (#) e de classes pelo (.). Exemplos:

#introducao {font-weight: bold;}
.dataPostagem {color: green;}

<p id="introducao">Seu Texto</p>

<p class="dataPostagem">04-07-2008</p>

Muitos desenvolvedores de CSS ainda atribuem várias classes em seus códigos com o proposito de estilizar cada item. No post Divs e Spans e suas funções falei sobre isso. Porém isso não é necessário. Você pode atribuir um ID para o Div especifico e usar combinações de seletores de tipos, seletores descendentes, seletores de ID ou seletores de Classes.

#primeiroConteudo h1 {font-size: 1.8em;}
#segundoConteudo h1 {font-size: 1.2em;}

<div id="primeiroConteudo">
<h1>Bem Vindos ao meu site!</h1>
...
</div>
<div id="segundoConteudo">
<h1>Novas Notícias</h1>
...
</div>

Um exemplo simples e você verá que com apenas uns 4 a 5 elementos em sua página, poderá fazer combinações incríveis no seu código.
Se você estiver enchendo seu XHTML com várias classes, fique atento, seu código não está bem estruturado. Releia o post Estruturando seu código CSS. Além disso sua página ficará pesada exigindo mais tempo para ser carregada. Em vez de colocar classe para cada elemento, pense sempre no elemento Pai (O elemento ID). Você verá que a única diferença são onde cada elemento aparece na página.

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email