Um truque chave na manipulação de elementos HTML é entender que não existe absolutamente nada especial no modo como a maioria deles funciona. A maioria das páginas pode ser feita com apenas algumas tags que podem ser estilizadas do jeito que você quiser. A representação visual padrão do navegador da maioria dos elementos HTML consiste apenas de diversos estilos de fontes, margens, espaçamentos e, principalmente, tipo de exibição (display type).
Os tipos de exibição mais básicos são inline, block-line e none e eles podem ser manipulados com a propriedade CSS display e os valores inline, block e none.
inline significa “na linha” e faz só o que diz – elementos do tipo inline seguem o fluxo de uma linha. Os elementos ênfase forte ( ), âncora ( ) e ênfase ( ) geralmente são exibidos inline.
block coloca uma quebra de linha antes e depois do elemento. Os elementos cabeçalho (
até
) e parágrafo (
) geralmente são mostrados em blocos. São os chamados “elementos de bloco”.
none, bem, não mostra o elemento. Pode soar meio inútil mas pode ser usado para bons efeitos relacionados à acessibilidade (veja Links Acessíveis), folhas de estilo alternativas ou efeitos avançados de hover ( = mouse sobre o elemento).
A folha de estilos original para o site HTML Dog, por exemplo, manipula alguns elementos tradicionalmente inline e de bloco para se ajustar ao design.
h1 {
display: inline;
font-size: 2em;
}
#cabecalho p {
display: inline;
font-size: 0.9em;
padding-left: 2em;
} O código abaixo é usado em folhas de estilo apenas para impressão e basicamente “desliga” esses elementos, como navegação, que são insignificantes em páginas impressas.
#navegacao, #vejaTambem, #comentarios {
display: none;
} A diferença entre display: none e visibility:hidden é que display: none retira completamente o elemento da jogada, enquanto visibility: hidden mantém o elemento e o espaço que ele ocupa na página, sem representar visualmente seu conteúdo. Por exemplo, se o segundo parágrafo numa página com três fosse definido como display: none, o terceiro parágrafo ia subir pra perto do primeiro, mas se o segundo parágrafo fosse definido como visibility: hidden, existiria um espaço vazio entre o primeiro e o terceiro, onde o parágrafo ia estar.
Tabelas
Talvez o melhor jeito de entender os valores da propriedade display relacionadas a tabelas é pensar em tabelas HTML. Os valores table, table-row e table-cell imitam os elementos table, tr e td, respectivamente.
A propriedade display vai além, oferecendo os valores table-column (coluna de tabela), table-row-group (grupo de linhas), table-column-group (grupo de colunas), table-header-group (grupo de cabeçalhos da tabela), table-caption (legenda da tabela), todos auto-explicativos. Usar esses valores permite fazer com que qualquer conjunto de elementos HTML seja visualizado como uma tabela. O benefício mais óbvio desses valores é que você pode construir uma tabela através de suas colunas, ao invés do método baseado em linhas do HTML.
Por último, o valor inline-table basicamente faz com que a tabela não tenha quebras de linha antes e depois.
Ficar fascinado por tabelas com CSS pode prejudicar seriamente sua acessibilidade. HTML deve ser usado pra comunicar significado, então se você tem dados tabulares eles devem ser organizados em tabelas HTML. Usar apenas tabelas CSS pode resultar numa mistura de dados completamente ilegível sem CSS. Mal, muito mal.
Outros tipos de exibição
list-item (“item de lista”) é auto explicativo, e é mostrado do jeito que você geralmente espera que um elemento li seja. Pra funcionar direito, elementos com esse tipo de exibição devem ser aninhados em um elemento ul ou ol.
run-in faz com que um elemento seja inline ou de bloco dependendo do tipo de exibição de seu elemento pai. Ele não funciona no IE nem em navegadores baseados no Mozilla. Muito útil, não é?
compact também faz com que um elemento seja inline ou de bloco dependendo do contexto. Também não funciona tão bem…
marker é usado exclusivamente com os pseudo elementos :before e :after pra definir o display do valor da propriedade content. O display padrão para a propriedade content já é marker, então isso só é útil se você estiver sobrescrevendo a propriedade display para um pseudo elemento.
Comentários