Idiomas

Esta é uma tradução. Ela pode conter erros ou estar desatualizada em relação à versão original em inglês. Tradutor(a): Maurício "Maujor®" Samy Silva

Folhas de estilos CSS dicas & truques

Ver index para todas as dicas.

Nesta página:

Imagens & legendas

Torre Eiffel

Miniatura da torre Eiffel no Parque Mini-France

A HTML5 criou um elemento destinado a inserir legenda em uma imagem. (Adiante mostraremos uma técnica que permite inserir legendas com uso da HTML4.)

<figure>
  <p><img src="eiffel.jpg"
    width="136" height="200"
    alt="Torre Eiffel">
  <figcaption>Miniatura da 
    torre Eiffel no 
    Parque Mini-France</figcaption>
</figure>

Para posicionar a imagem à direita em uma largura igual a 30% da largura dos parágrafos em volta usamos a seguinte regra CSS:

figure {
  float: right;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}

Na realidade apenas as duas primeiras declarações (float e width) são suficientes, as demais têm efeito puramente decorativo.

Redimensionando imagens

Existe um problema com a imagem da torre Eiffel mostrada no item anterior. Observe que ela foi definida com largura fixa de 136 px e o elemento figure que a contém com largura igual a 30%. Se você redimensionar a largura da janela acabara atingindo uma largura na qual os 30% se tornam menor do que 136 px, fazendo com que a imagem ultrapasse o container (overflow da imagem). Redimensione a janela para uma largura pequena e observe este comportamento.

Caso você conheça a largura de todas as imagens no documento você poderá criar uma regra CSS definindo uma largura mínima para o elemento figure como mostrado a seguir:

figure {
  min-width: 150px;
}

St. Tropez

Forte em Saint Tropez ao por do sol

Outra técnica para evitar o overflow da imagem é redimensionar a própria imagem, conforme fizemos com a imagem do forte St. Tropez à direita. Você pode constatar o redimensionamento da imagem redimensionando a janela do navegador. Imagens JPEG degradam quando redimensionadas, o que não acontece se a imagem for um diagrama ou um gráfico no formato SVG que escalam muito bem e sem degradar. Observe a seguir a marcação HTML usada no exemplo deste item:

<figure>
  <p><img class=scaled src="st-tropez.jpg"
    alt="St. Tropez">
  <figcaption>Forte em Saint Tropez 
  ao por do sol</figcaption>
</figure>

E, a folha de estilo:

figure {
  float: right;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
img.scaled {
  width: 100%;
}

A única diferença para a folha de estilo do exemplo anterior foi o acréscimo da segunda regra de estilo: ela define a imagem com a largura igual a largura do elemento figure (largura dentro da área da borda e do padding do elemento).

Imagem com legenda em cima

Cap Ferrat

O mar Mediterrâneo em Cap Ferrat

A HTML prevê que o elemento figcaption seja o primeiro ou o último elemento dentro do container e com isso, sem necessidade de qualquer declaração CSS a legenda será posionada em cima ou embaixo da imagem respectivamente.

Contudo independentemente da posição do elemento figcaption na marcação podemos posicionar a legenda com uso de CSS. Neste caso você consegue o posicionamento declarando que o elemento figure seja renderizado como tabela sendo a imagem sua única célula e a legenda como uma legenda de tabela (table caption). Tudo conforme mostrado na folha de estilo a seguir:

figure {
  display: table;
}
figcaption {
  display: table-caption;
  caption-side: top;
}

Nesta página usamos uma borda cinza ao redor do elemento figure. Infelizmente quando usamos a técnica do "table layout" que acabamos de mostrar há necessidade de se definir aquela borda de forma diferente pois, neste caso, por padrão a legenda é renderizada fora da borda da tabela. Para resolver este problema declaramos parte da borda no próprio elemento figcaption como mostrado a seguir:

figure {
  border-top: none;
  padding-top: 0;
}
figcaption {
  padding: 0.5em;
  border: thin silver solid;
  border-bottom: none;
}

Imagens & legendas na HTML4

Torre Eiffel

Miniatura da torre Eiffel no Parque Mini-France

A HTML4, ao contrário da HTML5, não prevê um elemento específico para inserir legendas em imagens. Esta funcionalidade foi proposta (ver HTML3), mas não foi implementada na HTML4. Observe a seguir uma maneira de simular o elemento figure:

<div class=figure>
  <p><img src="eiffel.jpg"
    width="136" height="200"
    alt="Torre Eiffel">
  <p>Miniatura da 
    torre Eiffel no 
    Parque Mini-France
</div>

Nas CSS use a classe "figure" para formatar o DIV.figure da maneira que bem entender. Por exemplo: para flutuar o DIV à direita em uma largura igual a 30% da largura dos parágrafos em volta declare a folha de estilo mostrada a seguir:

div.figure {
  float: right;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}

Na realidade apenas as duas primeiras declarações (float e width) são suficientes, as demais têm efeito puramente decorativo.

Redimensionando imagens na HTML4

Se você conhece a largura de todas as imagens do documento, para evitar o overflow da imagem você poderá declarar uma largura mínima para o DIV tal como mostrado a seguir:

div.figure {
  min-width: 150px;
}

St. Tropez

Forte em Saint Tropez ao por do sol

Para redimensionar a imagem de acordo com a largura de DIV.figure (tal como fizemos com a imagem mostrada à direita), declare o atributo CLASS e defina mais uma regra CSS de modo semelhante ao que fizemos com o exemplo para HTML5 mostrado anteriomente. Observe a marcação para este caso:

<div class=figure>
  <p><img class=scaled src="st-tropez.jpg"
    alt="St. Tropez">
  <p>Forte em Saint Tropez  
  ao por do sol
</div>

E, a folha de estilo:

div.figure {
  float: right;
  width: 30%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}
img.scaled {
  width: 100%;
}

A única diferença para a folha de estilo do exemplo anterior foi o acréscimo da segunda regra de estilo: ela define a imagem com a largura igual a largura do elemento DIV (largura dentro da área da borda e do padding do elemento).

Posicionando a legenda em cima na HTML4

Cap Ferrat

O mar Mediterrâneo em Cap Ferrat

Para posicionar a legenda em cima acrescente as seguintes regras de estilos às regras mostradas nos itens anteriores:

div.figure {
  display: table;
}
div.figure p + p {
  display: table-caption;
  caption-side: top;
}

O sinal de combinação CSS '+' casa com o elemento P que se segue a outro elemento P. Neste caso o segundo elemento P dentro do DIV, ou seja aquele que contém a legenda.

(Esta técnica pode "quebrar" em navegadores anteriores ao ano de 2003, especialmente quando usada para o redimensionamento da imagem como fizemos).

Tal como vimos anteriormente a borda cinza será renderizada ao redor da imagem somente. Para corrigir esse comportamento, colocando a borda ao redor da imagem e da legenda adicione as seguintes regras CSS:

div.figure {
  border-top: none;
  padding-top: 0;
}
div.figure p + p {
  padding: 0.5em;
  border: thin silver solid;
  border-bottom: none;
}
Bert Bos, Coordenador das atividades das CSS
Copyright © 1994–2017 W3C®

Criado em 17 Janeiro 2001;
Atualizado qui 09 nov 2017 04:40:59 UTC

Idiomas

Sobre traduções