Tutorial Avançado de CSS: A propriedade Display

[Regis~ 0]

A pedido de um amigo estarei postando aqui um pequeno tutorial de CSS avançado.

 

Tutorial Avançado de CSS - A Propriedade Display

 

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 ( <strong> ), âncora ( <a> ) e ênfase ( <em> ) geralmente são exibidos inline.

 

block coloca uma quebra de linha antes e depois do elemento. Os elementos cabeçalho ( <h1> até <h6> ) e parágrafo ( <p> ) 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

 

-----------------------------

 

Tutorial Avançado de CSS – Layout da Página

 

Construir layouts com CSS é fácil. Se você está acostumado a desenhar suas páginas com tabelas, no começo usar CSS pode parecer difícil, mas não é, é apenas diferente e na verdade faz bem mais sentido.

 

Você precisa ver cada parte da página como um pedaço individual que você pode empurrar em qualquer lugar que você quiser. Você pode posicionar esses pedaços de modo aboluto ou em relação a outro pedaço.

 

Posicionamento

A propriedade position é usada pra definir se um elemento está posicionado de forma absoluta (valor absolut), relativa (relative), estática (static) ou fixa (fixed).

 

O valor static é o valor padrão e renderiza os elementos na ordem normal, como eles aparecem no HTML.

 

relative é bem parecido com static, mas os elementos podem ser deslocados de sua posição original com as propriedades top (topo), right (direita), bottom (inferior) e left (esquerda).

 

absolute empurra um elemento pra fora do fluxo normal do HTML e o coloca em seu próprio mundo. Em seu pequeno e louco mundo, o elemento absoluto pode ser colocado em qualquer lugar na página usando top, right, bottom e left pra definir a distância de cada lado.

 

fixed funciona como absolute, mas o elemento vai ser posicionado em relação à janela e não em relação à página, então, teoricamente, um elemento fixado deve ficar exatamente onde ele está na tela mesmo quando a página é rolada. Por que teoricamente? Pelo motivo de sempre – isso funciona perfeitamente em navegadores como Mozilla e Opera, mas no IE não funciona de jeito nenhum.

 

Layout usando posicionamento absoluto

Você pode criar um layout tradicional com duas colunas usando posicionamento absoluto se você tem algo como o HTML seguinte:

<div id="navegacao">

<ul>

<li><a href="esse.html">Esse</a></li>

<li><a href="aquele.html">Aquele</a></li>

<li><a href="oOutro.html">O Outro</a></li>

</ul>

</div>

 

<div id="conteudo">

<h1>Ra ra banjo banjo</h1>

<p>Bem-vindo à página Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>

<p>(Ra ra banjo banjo)</p>

</div>

 

E se você aplicar o CSS abaixo:

#navegacao {

position: absolute;

top: 0;

left: 0;

width: 10em;

}

 

#conteudo {

margin-left: 10em;

}

 

A única desvantagem de elementos posicionados absolutamente é que eles vivem num mundo próprio, não existe nenhum jeito preciso de determinar aonde eles vão parar. Se você for usar os exemplos acima e todas as suas páginas têm barras de navegação pequenas e áreas de conteúdo grandes, tudo bem. Mas, especialmente quando usar valores relativos para larguras e tamanhos, você geralmente tem que abandonar qualquer esperança de posicionar qualquer coisa, como um rodapé, embaixo desses elementos. Se você quiser fazer algo assim vai ser necessário flutuar todos os seus pedaços, ao invés de posicioná-los absolutamente.

 

Flutuando

Flutuar um elemento vai deslocá-lo para a direita ou esquerda de uma linha, com o conteúdo fluindo ao seu redor.

 

Flutuar normalmente é usado para posicionar elementos menores em uma página (Veja o exemplo :first-letter na página sobre Pseudo Elementos), mas também pode ser usada para porções maiores, como colunas de navegação.

 

Usando o HTML do exemplo acima, você pode aplicar o CSS seguinte:

 

#navegacao {

float: left;

width: 10em;

}

 

#navegacao2 {

float: right;

width: 10em;

}

 

#conteudo {

margin: 0 10em;

}

 

Se você não quer que o póximo elemento envolva os elementos flutuando, você pode aplicar a propriedade clear (limpar). clear: left vai limpar elementos flutuados para a esquerda, clear:right vai limpar elementos flutuados para a direita e clear: both vai limpar elementos flutuados para a esquerda e direita. Então se, por exemplo, você quiser um rodapé na sua página, você pode usar um pedaço de HTML com a id ‘rodape’ e adicionar o CSS seguinte:

 

#rodape {

clear: both;

}

 

E aí está. Um rodapé que vai aparecer debaixo de todas as colunas, independente do tamanho de qualquer uma delas.

 

Essa foi uma introdução geral sobre posicionamento e flutação, com ênfase nos ‘pedaços’ maiores de uma página, mas lembre-se que esses métodos podem ser aplicados também em qualquer elemento dentro desses pedaços. Com uma combinação de posicionamento, flutuação, margens, paddings (enchimentos) e bordas, você pode representar QUALQUER design web.

 

Qualquer coisa que puder ser feita com tabelas pode ser feita melhor com CSS. A ÚNICA razão para usar tabelas na construção do layout é se você está tentando acomodar navegadores anciãos, que não suportam CSS.

 

Para se aprofundar na construção de layouts com CSS, é altamente recomendado que você acompanhe o tutorial “Criando um Layout com CSS a partir do zero“, feito pelo Subcide e traduzido pelo Café com Gelo. E não esqueça de conferir o código-fonte dos exemplos dessa página – é importante!

 

É aqui que CSS mostra mesmo suas vantagens – ele resulta numa página altamente acessível com apenas uma pequena fração do peso de uma página equivalente baseada em tabelas.

 

-----------------

 

Tutorial Avançado de CSS: Pseudo Elementos

 

Pseudo elementos se ligam a seletores do mesmo jeito das pseudo classes, na forma seletor : pseudoelemento { propriedade: valor; }. Existem quatro pseudo elementos.

 

Primeira Letra e Primeira Linha

O pseudo elemento first-letter é aplicado à primeira letra de um elemento e first-line à primeira linha. Você pode, por exemplo, criar letras capitulares (drop caps) e parágrafos com a primeira linha em negrito dessa forma:

 

p:first-letter {

font-size: 3em;

float: left;

}

 

p:first-line {

font-weight: bold;

}

 

Before e after

Os pseudo elementos before (antes) e after (depois) são usados em conjunto com a propriedade content pra colocar conteúdo de qualquer lado de um elemento sem tocar no HTML.

 

O valor da propriedade content pode ser open-quote (aspas de abertura), close-quote (aspas de fechamento), no-open-quote (sem aspas de abertura), no-close-quote (sem aspas de fechamento), qualquer texto delimitado por aspas duplas ou qualquer imagem usando url(nomedaimagem).

 

blockquote:before {

content: open-quote;

}

 

blockquote:after {

content: close-quote;

}

 

li:before {

content: "POW: "

}

 

p:before {

content: url(images/jam.jpg)

 

Espero ter ajudado pois fiquei atarde inteira fazendo o post. suahsuah mt tempo sem mexer com CSS sauhsaus - ta aew! Edu

[tribal44 0]

:yes:

[Owner 7]

Tópico Ressuscitado.

 

Fechado.