Tutorial Avançado de CSS: Especificidade

20 07 2008

image

Se você tem duas (ou mais) regras CSS conflitantes que se aplicam ao mesmo elemento, existem algumas regras básicas que o navegador segue para determinar qual é a mais específica e por isso a vencedora.

Isso pode não parecer importante, e na maioria dos casos você não vai encontrar conflito algum, mas à medida que seus arquivos CSS se tornam maiores e mais complexos, ou você passa a lidar com um número maior de arquivos, aumentam as chances de conflitos aparecerem.

Se os seletores são os mesmos o último sempre tem prioridade. Por exemplo, se você tem:

p { color: red; }
p { color: blue; }

Elementos p seriam coloridos de azul porque é a regra que vem por último.

De qualquer forma, você geralmente não vai ter seletores idênticos com declarações conflitantes (porque não faz muito sentido). Conflitos sempre aparecem, no entanto, quando você tem seletores aninhados. No exemplo seguinte:

div p { color: red; }
p { color: blue; }

Pode parecer que um elemento p dentro de uma div vai ser colorida de azul, já que a regra de colorir elementos p de azul vem por último, mas na verdade ele vai ser colorido de vermelho devido a especificade do primeiro seletor. Basicamente, quanto mais específico for um seletor maior prioridade ele vai ter quando aparecerem estilos conflitantes.

A especifidade real de um grupo de seletores aninhados precisa de alguns cálculos. Basicamente, você atribui a cada seletor de id (“#qualquercoisa”) um valor de 100, a cada seletor de classe (“.qualquercoisa”) um valor de 10 e a cada seletor HTML (“qualquercoisa”) um valor de 1. Aí você soma tudo e que rápido!, você tem o valor da especificidade.

  • p tem especifidade de 1 (1 seletor HTML)
  • div p tem especifidade de 2 (2 seletores HTML; 1+1)
  • .tree tem especifidade de 10 (1 seletor de classe)
  • div p.tree tem especifidade de 12 (2 seletores HTML e um seletor de classe; 1+1+10)
  • #obaoba tem especifidade de 100 (1 seletor de id)
  • body #content .alternative p tem especifidade de 112 (seletor HTML, seletor de id, seletor de classe, seletor HTML; 1+100+10+1)

Então de todos os exemplos usados, div p.tree (com especificidade de 10) venceria div p (com especificidade de 2) e body #content .alternative p venceria de todos eles, independente da ordem.

Páginas Relacionadas

Esse material é uma adaptação do CSS Advanced Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Avançado de CSS: Pseudo Elementos

20 07 2008

image

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)
}

Soa maravilhoso, não é? Bem, assim como tantas outras coisas (-sigh-), a maioria dos usuários não vai ver os efeitos de before ou after porque o IE simplesmente não pode ser incomodado por eles. Preguiçoso preguiçoso preguiçoso.

Páginas Relacionadas

Esse material é uma adaptação do CSS Advanced Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Avançado de CSS: Regras @

20 07 2008

image

Essa aula foi traduzida pelo aluno do curso Ruan Carlos. Obrigado, Ruan!

Regras @ encapsulam um punhado de regras CSS para aplicar a alguma coisa específica. Woo.

Importação

A regra @import adiciona outra folha de estilo. Por exemplo, se você quiser adicionar os estilos de uma outra folha de estilo para a sua existente, você pode adicionar algo como:

@import url(estilosadicionais.css);

Isso é muitas vezes usado no lugar do elemento link para ligar um arquivo CSS a uma página HTML, essencialmente para ter uma folha de estilo interna, algo como isso:

<style type="text/css" media="all">
  @import url(macaco.css);
</style>

O benefício disso é o fato de que navegadores mais antigos, como o Netscape 4.x, por não terem idéia das regras @, não vão ligar a folha de estilos, o que, se você tiver uma marcação bem-estrurada, vai deixar o HTML puro funcional (embora sem estilo).

Tipos de mídia

A regra @media aplica seu conteúdo a um determinado meio de visualização, tal como a impressão. Por exemplo:

@media print {
  body {
    font-size: 10pt;
    font-family: times new roman, times, serif;
  }
  #navegacao {
    display: none;
  }
}

Os meios de visualização são:

  • all – para todos os meios abaixo, acima, ao redor e dentro do sol.
  • aural – Para sintetizadores de fala.
  • handheld – para dispositivos portáteis.
  • print – para impressoras.
  • projection – para projetores.
  • screen – para visualização no computador.

Você também pode usar braille, embossed, tty ou tv.
Nota: De todos esses, os únicos tipos de mídia suportados pelo IE são all, screen e print.

Conjuntos de caracteres

A regra @charset simplesmente estabelece a regra de codificação dos caracteres de uma folha de estilos externa. A codificação aparece no alto da folha de estilos e é algo como @charset “UTF-8”;

Aparência da fonte

A regra @font-face é usada para dar uma descrição detalhada de uma fonte e pode incorporar uma fonte externa em seu CSS.
Ela requer um descritor da família da font (font-family), ao qual a fonte pode ser referenciada, cujo valor pode ser um nome de uma fonte existente (sobrescrevendo essa fonte onde forem encontradas condições) ou pode ser um nome completamente novo. Para incorporar uma fonte, o descritor src é utilizado. Outros descritores adicionados à regra font-face se tornam condições para que a fonte incorporada seja usada. Por exemplo, se você adicionar um estilo font-weight: bold na regra, o src da font-family só vai ser aplicado a seletores com a propriedade font-family se a propriedade font-weight for definida como bold (negrito).
Você pode usar uma regra font-face como essa:

@font-face {
	font-family: umnomequalquer;
	src: url(algumafonte.eot);
	font-weight: bold;
}

p {
	font-family: umnomequalquer;
	font-weight: bold;
}

Isso irá aplicar a fonte algumafonte.eof aos parágrafos (Mais não iria se o seletor p não fosse definido como font-weight:bold).
Suporte para fontes incorporadas na melhor das hipóteses é irregular. O navegador Mozilla não suporta e não tem planos imediatos para o fazer. Apenas IE tem suporte decente. Para incorporar fontes ao IE, você precisa usar o software da Microsoft WEFT, que irá converter os caracteres de uma fonte TrueType em uma fonte OpenType condensada (e isso só pode ser utilizado com a URI que você especificou). Devido a esta limitação (bastante complicada) de compatibilidade, é melhor não usar fontes que não tenham um sistema de fontes alternativo adequado, e evitar usar @font-face.

Páginas

A regra @page é para a visualização da página em mídias de página, e é um método avançado de aplicar estilos para impressão. Ela define um bloco de página que se estende pelo modelo de caixa (veja Margens e Espaçamento) de modo que você define o tamanho e apresentação de uma única página.
Há uma série de convenções que se aplicam na regra @page, como não existirem paddings (espaçamentos) ou bordas e não estarmos falando de uma tela de computador – pixels e em’s como unidades de medidas não são permitidos.
Há uma serie de propriedades específicas que podem ser usadas, tais como size (tamanho), que pode ser definido como portrait (retrato), landscape (paisagem), auto ou um tamanho. A propriedade marks também pode ser usada para definir marcas de corte.

Pseudo classes para mídia de página.

Existem três pseudo classes que são usadas especificamente em conjunto com a regra @page, que assumem a forma @page:pseudo-classe { alguma coisa }.
:first é aplicada a primeira página de uma mídiade página.
:left e :right aplicam-se às páginas da esquerda e da direita, respectivamente. Isto é usado para especificar uma margem esquerda maior em páginas que vão ficar à esquerda e uma margem direita maior para páginas à direita.
Há uma série de outras facetas específicas para a regra @page como quebras de linha e nomes de páginas, mas vendo que esta regra dificilmente funciona em algum navegador, você provavelmente já desperdiçou tempo suficiente lendo esta parte. É uma idéia bem agradável, no entanto…

Páginas Relacionadas

Esse material é uma adaptação do CSS Advanced Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.


				




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

20 07 2008

Exemplo de página dividida em seções

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;
}

Você vai ver que isso vai levar a barra de navegação pra esquerda e modificar a largura pra 10 em’s. Porque a navegação está posicionada absolutamente, ela não tem nada a ver com o fluxo do resto da página, e por isso é necessário definir a margem esquerda da área de conteúdo como sendo igual a largura da barra de navegação.

Fácil até demais. E você não está limitado a essa abordagem de duas colunas. Com um posicionamento mais engenhoso, você pode dispor de quantos blocos você quiser. Se você quisesse adicionar uma terceira coluna, por exemplo, você poderia adicionar o pedaço ‘navegacao2’ no seu HTML e mudar seu CSS para:

#navegacao {
  position: absolute;
  top: 0;
  left: 0;
  width: 10em;
}

#navegacao2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 10em;
}

#conteudo {
  margin: 0 10em; /* definindo as margens superior e inferior pra 0 e a esquerda e direita pra 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.

Páginas Relacionadas

Exemplos

Referência

Esse material é uma adaptação do CSS Advanced Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Avançado de CSS: A propriedade Display

20 07 2008

image

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.

Páginas Relacionadas

Exemplos

Referência

Esse material é uma adaptação do CSS Advanced Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Avançado de CSS

20 07 2008

image

O Tutorial Avançado de CSS é pra quem quer levar CSS ao extremo, explorando métodos que podem não ser imediatamente óbvios para um desenvolvedor intermediário.

Conteúdos

  • A Propriedade Display – Definindo o modo de exibição de um elemento.
  • Layout de Página – Construindo uma página sem tabelas.
  • Regras @ – Importando folhas de estilo, estilos para tipos de mídia diferentes especificando o conjunto de caracteres de uma folha de estilos e incorporando fontes.
  • Pseudo Elementos – Estilizando primeiras letras, primeiras linhas e colocando conteúdo antes e depois de elementos.
  • Especificidade – Como um navegador lida com regras CSS conflitantes.

Páginas Relacionadas

Esse material é uma adaptação do CSS Advanced Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Intermediário de CSS: Imagens de Background

19 03 2008

Página com Imagem de Background

Existem várias propriedades envolvidas na manipulação de imagens de background.

Felizmente, a propriedade background cuida de todas as outras.

body {
	background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
}

Esse código une essas propriedades:

  • background-color, que nós já vimos antes.
  • background-image, que é o endereço da imagem que vai servir de fundo.
  • background-repeat, que é como a imagem se repete na página. Pode ser repeat-y (repetindo no eixo y, de cima até embaixo), repeat-x (repetindo no eixo x, lado a lado), repeat (repetindo nos eixos x e y, efeito semelhante a um telhado, por exemplo) ou no-repeat (que mostra apenas uma ocorrência da imagem).
  • background-position, que pode ser top (topo), center (centro), bottom (parte inferior), left (esquerda) e right (direita), ou uma combinação de dois desses elementos. Nesse caso, o primeiro indica a posição no eixo horizontal e o segundo a posição no eixo vertical.

Imagens de background podem ser usadas na maioria dos elementos HTML – não apenas pra página inteira (body) e podem ser usados pra efeitos simples mas eficazes, como bordas arredondadas.

É fácil se envolver demais com imagens de background e querer usá-las na página inteira. Algumas pessoas visualmente hiperativas podem acreditar que é uma boa ter uma foto cheia de cores vivas em todo o fundo da página, dando ao usuário o desafio de decifrar o texto no primeiro plano. Isso é um exemplo meio radical, mas o fato é que o texto mais amigável ao usuário, legível, é fonte preta em um fundo simples branco ou fonte branca num fundo preto. Algumas pessoas defendem que um fundo “quase” branco ou “quase” preto é melhor, já que reduz a claridade. Sugiro que você teste essas possibilidades e escolha a que você achar mais adequada ao seu projeto.

O melhor uso pra imagens de background é preencher espaços onde não haja nenhum conteúdo, deixando a página mais visualmente agradável sem atrapalhar o conteúdo.

Páginas Relacionadas

Exemplos

Referência

BlogBlogs Tags: , ,

Esse material é uma adaptação do CSS Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.