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.png) no-repeat; text-indent: -999em; 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-color: #fff;
background-image: url(imagem.jpg);
background-position: bottom;
background-repeat: no-repeat;
}

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 { #fff background: url(imagem.jpg) 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.

Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.

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">

* Update: Versão 5 do html – Vejo o documento base para HTML5.

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 */

Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.

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.

Nosso padrão de organização para estilização é separar os estilos nos seguintes arquivos:

1. estilo_geral.css – para estilos gerais de todo o site
2. estilo_paginas.css – estilos específicos de todas as páginas
3. estilo_print.css – estilos para impressão

Incluímos no HTML nesse formato:

  <link href="css/estilo_geral.css?v=1" rel="stylesheet" />
  <link href="css/estilo_paginas.css?v=1" rel="stylesheet" />
  <link href="css/estilo_print.css?v=1" rel="stylesheet" media="print" />

Caso o projeto seja pequeno, não usamos o arquivo “estilo_paginas.css”, incluímos os estilos no arquivo “estilo_geral.css”.

No documento de estilos gerais incluímos nosso padrão de estilização para formulários. Que incluí estilos prontos para determinados códigos HTML pré-definidos.

estilo_geral.css

/*
  Cliente:
  Projeto: 

  --------------
  PADROES DE CODIGO - Frameworks FED v2.5
  --------------

  Nossos projetos sao desenvolvidos de acordo com um padrao de escrita.
  Mais informacoes sobre ele em: http://www.webstandards.blog.br/checklist-para-desenvolvimento-css/
  Qualquer duvida, mande um e-mail para: contato[at]webstandards.blog.br

  --------------
  PALETA DE CORES
  --------------

  #000000 - Textos
*/

/*
  --------------
  ELEMENTOS e CLASSES
  --------------
*/

/* ------- ELEMENTOS ------- */

  /* reset */
  body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dd, ol, ul, menu, form, fieldset, legend, button, figure, section, summary { margin: 0; padding: 0; }
  article, aside, details, summary, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
  button, fieldset, iframe, img { border: 0; }
  input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; }
  details summary::-webkit-details-marker { display: none; }

  html { font: 100% Arial, Helvetica, sans-serif; color: #000; }
  body { font-size: .75em; } /* tamanho da fonte: 12px */

  /* formulario */
  form ol, form ul { list-style: none; }
  form ol li { margin-bottom: .41em; padding: .41em 0; }
  .ie6 form ol li { height: 1%; overflow: hidden; }
  form #instrucoes_formulario { padding: 1.66em 0; }
  form #instrucoes_formulario p { margin-bottom: .83em; }
  form #instrucoes_formulario p:last-child { margin-bottom: 0; }

    /* label */
    form ol label, form ol p, form ol ol li:first-child label { float: left; width: 80px; padding-right: 10px; line-height: 2em; text-align: right; }

    /* listas internas */
    form ol ol, form ol ul, form ol li li { display: inline-block; vertical-align: top; }
    .ie7 form ol ol, .ie7 form ol ul, .ie7 form ol li li, .ie6 form ol ol, .ie6 form ol ul, .ie6 form ol li li { display: inline; }
    form ol li li { margin: 0 10px 0 0; padding: 0; }

    /* label interno */
    form ol li li label, form ol p.erro, form ol li.confirmacao label { float: none; width: auto; padding-right: 0; text-align: left; }
    form ol ul li label { margin-right: 0; }

    /* mensagem de erro */
    form ol p.erro { display: block; }
    .ie6 form ol p.erro { display: inline; float: left; }
    form p.erro, form ol li.erro { color: #e33; }
    form li.erro { border-radius: 3px; }
    form li.erro, form input.erro, form textarea.erro { background-color: #f7cac9; }
    form ol li li p.erro { margin-left: 0; }

  form #instrucoes_formulario,
  form ol li p.erro,
  form ol ol li:first-child p.erro,
  form ol li.confirmacao label,
  form button { margin-left: 90px; }

/* ------- CLASSES ------- */
.limites { width: 980px; margin: 0 auto; }

  /* alinhamentos */
  .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; }

  /* paginacao */
  .paginacao li { display: inline-block; }
  .paginacao li a[rel="prev"], .paginacao li a[rel="next"] { }
  .paginacao li a[rel="prev"]:hover, .paginacao li a[rel="next"]:hover { }

  /* popup */
  .popup { display: none; position: absolute; z-index: 10; }
  .popup a.fechar { }
  .pelicula { position: absolute; z-index: 9; }

  /* botoes */
  a.botao, a.botao strong { display: inline-block; background: url(../images/botao.png) no-repeat; line-height: 25px; text-decoration: none; }
  a.botao { padding-left: 10px; }
  a.botao strong { padding-right: 10px; background-position: right 0; font-weight: normal; }
  a.botao:hover { background-position: 0 0; }
  a.botao:hover strong { background-position: right 0; }

/*
  --------------
  ESTRUTURA
  --------------
*/

/* ------- TOPO ------- */
#topo { }

/* ------- CONTEUDO ------- */
#conteudo { }

  /* coluna1 */
  #conteudo #coluna1 { }

  /* coluna2 */
  #conteudo #coluna2 { }

/* ------- RODAPE ------- */
#rodape { }

estilo_paginas.css

/*
  --------------
  PAGINAS ESPECIFICAS
  --------------
*/

/* ------- PAGINA INICIAL ------- */
#home { }

estilo_print.css

/*
  --------------
  VERSAO PARA IMPRESSAO
  --------------
*/

/*
  --------------
  ELEMENTOS, CLASSES E ESTRUTURA
  --------------
*/

/* ------- ELEMENTOS ------- */
* { background: transparent !important; text-shadow: none !important; color: black !important; }
body { font-size: 11pt; } /* tamanho da fonte: 12px */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
form { display: none; }
iframe, img { border: 0; }
img { max-width: 100% !important; }
table { border: 1px solid #000; border-collapse: collapse; }
a { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }

/* ------- CLASSES ------- */
.paginacao, .popup { display: none; }

/* ------- ESTRUTURA ------- */
#topo, #coluna1, #rodape { display: none; }

Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.

Gostaria de padronizar seus documentos XHTML? 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=utf-8" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <title></title>
  <link href="css/estilo_geral.css?v=1" rel="stylesheet" type="text/css" media="screen" />
  <link href="css/estilo_paginas.css?v=1" rel="stylesheet" type="text/css" media="screen" />
  <link href="css/estilo_print.css?v=1" rel="stylesheet" type="text/css" media="print" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
  <script src="scripts/swfobject.js"></script>
  <script src="scripts/funcionalidades.js"></script>
  <!--[if lt IE 9]><script src="scripts/selectivizr-min.js"></script><![endif]-->
  <!--[if lt IE 8]><script src="scripts/ie6update.js"></script><![endif]-->
  <!--[if IE 6]><script src="scripts/DD_belatedPNG_0.0.8a-min.js"></script><![endif]-->
</head>
<body>

<!-- abre limites -->
<div class="limites">

<!-- abre topo -->
  <div id="topo">

  </div>
<!-- fecha topo -->

<!-- abre conteúdo -->
  <div id="conteudo">

  </div>
<!-- fecha conteúdo -->

<!-- abre rodapé -->
  <div id="rodape">

  </div>
<!-- fecha rodapé -->

</div>
<!-- fecha limites -->

</body>
</html>

Scripts usados

• jQuery
• SWFObject
• selectivizr
• IE6 Update
• DD_belatedPNG

Preparado pela “melhor equipe de HTML da Mídia Digital“, o Blog Web Standards está aí para ajudar a melhorar sua forma de trabalho com HTML e CSS, aprimorando sua forma de escrita e resolvendo alguns problemas chatos como bugs no Internet Explorer 6, principalmente.

Estamos aqui para publicar soluções, então caso você tenha alguma idéia de conteúdo, é só entrar em contato conosco!