Quando o layout necessita utilizar alguma fonte customizada para títulos ou textos específicos, temos que utilizar imagens ao invés do texto puro.
A técnica image replacement serve justamente para exibir uma imagem (com a fonte customizada), ao mesmo tempo que no HTML há um texto limpo, para que este seja acessível aos sistemas de busca e leitores de tela, por exemplo.
Supondo que nosso HTML seja o seguinte:
<h1>Título do site</h1>
Faremos nosso CSS para que substitua este texto por uma imagem (de 200px por 50px por exemplo):
h1 { width: 200px; height: 50px; background: url(../imagens/titulo.jpg) no-repeat; text-indent: -9999em; overflow: hidden; }
Obviamente que a largura, altura e caminho da imagem deverão ser ajustados, de acordo com a necessidade.
Há diversas maneiras de definir determinadas propriedades do CSS como background, font, margin, padding, etc.
Background
Como o próprio nome diz, a propriedade background define o fundo do elemento, com uma cor sólida ou uma imagem. Neste último caso, pode-se dizer se esta será repetida, seu posicionamento e comportamento.
seletor {
background-image: url(imagem.jpg);
background-color: #fff;
background-repeat: no-repeat;
background-position: bottom;
}
Como pode-se perceber, esta maneira deixa seu código muito extenso, então vamos abreviar estas propriedades em uma única linha. Neste caso, não há importância na ordem pela qual você dispõe os valores, mas é interessante manter um padrão de escrita:
seletor { background: url(imagem.jpg) #fff bottom no-repeat; }
Color
Como nem todos ainda sabem, é importante comentarmos sobre a abreviação na declaração da escrita das cores. Quando utilizamos os valores hexadecimais, há casos nos quais podemos escrever apenas 3 caracteres, ao invés dos 6 que estamos acostumados.
seletor { color: #aaff00; }
Podemos abreviar desta forma:
seletor { color: #af0; }
A lógica da abreviação é simples: cada caractere representa um par de caracteres da escrita não abreviada.
Margin e padding
A lógica para abreviação das propriedades margin e padding é a mesma. Vejamos o exemplo da escrita sem abreviação:
seletor {
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
margin-left: 1px;
padding-top: 1px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 1px;
}
Para abreviar existem algumas maneiras:
Neste caso, os valores são aplicados para todos os lados do elemento:
seletor { margin: 1px; padding: 1px; }
Se as unidades do topo e rodapé forem as mesmas (1px), esquerda e direita forem iguais entre si (5px), podemos escrever de outra forma:
seletor { margin: 1px 5px; padding: 1px 5px; }
Mas há situações nas quais precisa-se utilizar uma unidade para o topo (1px), outra (igual) para os lados (5px) e mais uma para o rodapé (6px):
seletor { margin: 1px 5px 6px; padding: 1px 5px 6px; }
E, por fim, uma maneira simplificada de escrever as dimensões para todos os lados, mas deve-se seguir o sentido horário, ou seja: top (1px), right (2px), bottom (3px) e left (4px):
seletor { margin: 1px 2px 3px 4px; padding: 1px 2px 3px 4px; }
Border
Para abreviar a propriedade border é tão fácil quanto a background, pois não exige uma ordem padrão. Segue abaixo exemplo da escrita sem abreviações:
seletor {
border-width: 1px;
border-style: solid;
border-color: #000;
}
Para abreviar esta propriedade é simples:
seletor { border: 1px solid #000; }
Caso queira estilizar somente a borda do topo, por exemplo, é só acrescentar “-top” após o “border”:
seletor { border-top: 1px solid #000; }
Font
Esta propriedade tem a função de estilizar o tamanho da fonte, sua linha, família, peso, etc. A forma mais complexa de escrita é a seguinte:
seletor {
font-style: normal;
font-variant: small-caps;
font-weight: bold;
font-size: 1em;
line-height: 1.3em;
font-family: "Trebuchet MS", Arial, sans-serif;
}
Muitos não sabem que a propriedade line-height se inclui nesta abreviação, por não ter o prefixo “font”. Veja agora a maneira simplificada de escrever a propriedade font:
seletor { font: normal small-caps bold 1em/1.3em "Trebuchet MS", Arial, sans-serif; }
Fique atento para a ordem de escrita e, caso o nome da fonte tenha espaço, escreva utilizando aspas duplas, como no exemplo acima.
List-style
A propriedade list-style é utilizada para estilizar a marcação de itens de lista. A escrita não abreviada é a seguinte:
seletor {
list-style-type: circle;
list-style-position: inside;
list-style-image: url(bullet.gif);
}
Para escrevê-la de forma simplificada não é necessária uma ordem certa das propriedades. Veja o exemplo da abreviação:
seletor { list-style: circle inside url(bullet.gif); }
Há outras propriedades que podem ser simplificadas, como a outline mas, devido sua falta de suporte, não é necessário exemplificá-la aqui.
A renderização correta pelos navegadores depende, inicialmente, do DOCTYPE definido no início dos códigos HTML. Portanto é bem importante conhecermos as variações que podemos usar, de acordo com as necessidades impostas pelo projeto em questão:
HTML 4 STRICT
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0 TRANSITIONAL
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 STRICT
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.1 STRICT
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Sabemos que o Internet Explorer 6 tem limitações em diversas propriedades do CSS 2.
Supondo que a largura mínima seja 333px, use a regra abaixo:
* html elemento { width: expression( document.body.clientWidth < 334 ? "333px" : "auto" ); } /* seta a min-width para o IE */
Agora, se a largura máxima seja 777px, use:
* html elemento { width: expression( document.body.clientWidth > 776 ? "777px" : "auto" ); }/* seta a max-width para o IE */
Procurando alguma boa solução para aplicação de transparência alpha do PNG no Internet Explorer 6?
Diversas soluções já foram apresentadas, desde um script que necessitava de um GIF transparente de 1×1 pixel e era aplicável somente às imagens em tags <img>, além de utilizar a propriedade filter direto no CSS, o que costumamos utilizar, pois temos total controle sobre a aplicação da funcionalidade no IE 6.
Porém, tanto esse script como a aplicação direta no CSS usavam o mesmo recurso (AlphaImageLoader Filter) para simular a transparência no Internet Explorer. Então ambos os casos apresentavam as mesmas limitações.
No caso de elementos que necessitavam de um background com o PNG, não poderíamos usar background-position, background-repeat, etc.; recursos fundamentais para aplicação de fundos via CSS, pois neste caso não se trata de um fundo propriamente dito, pois o IE não o interpreta dessa forma.
Então apresentamos a vocês o DD_belatedPNG, a solução definitiva para uso de PNG 24 bits no Internet Explorer 6!
Para utilizá-lo é bastante simples: basta baixar o script (procure mantê-lo atualizado) e usar a classe “.png_bg” (ou qualquer nome que você definir em seu código) nos elementos nos quais o PNG deve ser utilizado.
O ponto mais interessante é que, além da fácil aplicação dessa solução, o script usa outro método para simular a transparência alpha, ao contrário de tudo o que vinha sendo visto até hoje. Desta forma, poderemos utilizar background-position, background-repeat, cliques em links, elementos de formulário, etc., algo impossível de ser feito no Internet Explorer 6 até então.
Exemplo de aplicação
<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
/* Nomeando a classe que definirá quais elementos terão a correção para PNG */
DD_belatedPNG.fix('.png_bg');
</script>
<![endif]-->
Como vocês podem ver a aplicação é bem simples, mas caso haja alguma dúvida é só comentar 
Update: Download atualizado para a versão 0.8a do script.
23 2009 janeiro
Autor: g3 em CSS
Documento base para desenvolvimento CSS de projetos PEQUENOS:
estilo.css
/*
Cliente: Nome do Cliente
Projeto: Nome do Projeto
*/
/*
--------------
PALETA DE CORES
--------------
#000 - Titulos principais / texto icones principais
#6b6b6b - Links / textos
#cf191a - Mouse over links / destaques
#ff7621 - Telefone Central de Vendas
#474646 - Fontes botoes
#f63 - Laranja para destaque
*/
/*
--------------
ORDEM DOS ATRIBUTOS
--------------
{ position:; top:; left:; float:; clear:; display:; width:; height:; margin:; padding:; border:; background:; font:; text:; color:; }
*/
/*
--------------
ELEMENTOS e CLASSES
--------------
*/
/* ------- GERAL ------- */
* { margin: 0; padding: 0; z-index: 1; } /* reseta todas as margens, paddings e define o nivel das camadas do site */
.direita { float: right; }
.esquerda { float: left; }
p.direita, p.esquerda { float: none; }
p.direita { text-align: right; }
p.esquerda { text-align: left; }
.centro { text-align: center; }
/* contendo float */
.contemfloat:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.contemfloat { display: inline-block; }
/* Hides from IE-mac \*/
* .contemfloat { height: 1%; }
.contemfloat { display: block; }
/* End hide from IE-mac */
Documento base para desenvolvimento CSS de projetos GRANDES:
estilo.css
/*
Cliente: Nome do Cliente
Projeto: Nome do Projeto
*/
@import url(estilo_geral.css); /* Elementos utilizados em todo o site, incluindo classes gerais */
@import url(estilo_paginas.css); /* Estilos referentes as paginas especificas do site */
body { behavior: url(css/csshover2.htc); } /* Inclui efeito :hover, :active e :focus para Internet Explorer 6 */
Gostaria de padronizar seus documentos HTML? Uma boa forma de começar seu código é com o nosso exemplo utilizado pela equipe, ao início de todos os projetos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="Carlos Eduardo de Souza" />
<title></title>
<link href="css/estilo.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
</body>
</html>
Se o site precisar de uma versão específica para impressão, é só adicionar esta linha logo abaixo do CSS normal:
<link href="css/estilo_print.css" rel="stylesheet" type="text/css" media="print" />
* Não usamos mais conditional comments para o Internet Explorer 7, salvo os casos em que seja realmente necessário.
