As medidas CSS de comprimento

As unidades de medida de comprimento CSS referem-se a medidas na horizontal ou na vertical (e em sentido mais amplo, em qualquer direção).
O formato para declarar o valor de uma unidade de medida CSS é um número com ou sem ponto decimal imediatamente precedido do sinal ‘+’ (mais) ou do sinal ‘-’ (menos), sendo o sinal ‘+’ (mais) o valor “default” e imediatamente seguido por uma unidade identificadora (medida CSS válida – p.ex., px, em, deg, etc…). A unidade identificadora é opcional quando se declara um valor ’0′ (zero).
Algumas das propriedades CSS permitem que sejam declarados valores negativos para unidades de medida. A adoção de valores negativos podem complicar a formatação do elemento e devem ser usados com cautela. Se valores negativos não forem suportados pela aplicação de usuário, eles serão convertidos para o valor mais próximo suportado (e isso pode tornar-se desastroso para um layout).

Unidades relativas
• em
• ex
• px – pixel
• % – percentagem

Unidades absolutas
• pt – point :1/72 in;
• pc – pica :12 points ou 1/6 in;
• mm – milímetro :1/10 cm;
• cm – centímetro :1/100 m;
• in – polegada :2,54 cm;

Unidade relativa – é aquela tomada em relação a uma outra medida. Folhas de Estilo em Cascata que usam unidades de comprimento relativas são mais apropriadas para ajustes de uso em diferentes tipos de mídia. (p. ex., de uma tela de monitor para uma impressora laser).
O valor é tomado em relação:

• em: …ao tamanho da fonte (‘font-size’) herdada;
• ex: …a altura da letra x (xis) da fonte herdada;
• px: …ao dispositivo (midia) de exibição;
• %: … a uma medida previamente definida.

Unidade absoluta – é aquela que não esta referenciada a qualquer outra unidade e nem é herdada. São unidades de medida de comprimento definidas nos sistemas de medidas pela física e em fim são os conhecidos “centímetros, polegadas etc.). São indicadas para serem usadas quando as mídias de exibição são perfeitamente conhecidas.
Entendendo as unidades de medida CSS

Vamos a seguir definir e analisar cada uma das unidades de medida CSS e apresentar exemplos práticos.

A unidade de medida – pixel
A unidade de medida de comprimento pixel é relativa a resolução do dispositivo de exibição (p.ex: a tela de um monitor).
Sem entrar em maiores considerações teóricas a mais simplista definição de pixel que encontrei é esta:
Pixel é o menor elemento em um dispositivo de exibição, ao qual é possivel atribuir-se uma cor.
Considere um dispositivo de exibição construido com uma densidade de 90 dpi (dpi = dots per inch = pontos por polegada). Por definição, a referência padrão para pixel é igual a um ponto no citado dispositivo. Daí pode-se concluir que 1 pixel naquele dispositivo de exibição é igual a 1/90 inch = 0,28 mm.
Para uma densidade de 300 dpi 1 pixel é igual a 1/300 inch = 0,085mm
Assim, pixel é uma medida relativa a resolução do dispositivo de exibição.

A unidade de medida – em
A unidade de medida de comprimento em referencia-se ao tamanho da fonte (letra) do seletor onde for declarada. Quando em for declarada para a propriedade font-size referencia-se ao tamanho da fonte (letra) do elemento pai. Quando em for declarada para o elemento raiz do documento (p. ex: em documentos html) referencia-se ao valor inicial (default) do tamanho de fonte (letra).
Os exemplos abaixo esclarecem as definições:

h1 { line-height: 1.2em }
line-height de <h1> será 20% maior do que o tamanho das letras de
h1 { font-size: 1.2em }
font-size de será 20% maior do que o tamanho das letras herdado por
p.ex.: se h1 estiver contido numa div com font-size=10px então font-size de h1 = 12px

A unidade de medida – ex
A unidade de medida de comprimento ex é igual a altura da letra x(xis) minúscula).

A unidade de medida – percentagem, %
Valores em percentagem são relativos a um outro valor anterior declarado. Este valor anterior há que estar bem definido e em geral esta definição está em uma determinada propriedade do mesmo elemento, na propriedade do elemento “pai” (por exemplo: uma medida CSS de comprimento) ou mesmo no contexto geral da formatação (por exemplo: a largura do bloco de conteúdo).

p { font-size: 10px }
p { line-height: 120% }/*120% de'font-size'=12px*/

Dúvida sanada, agora fica a critério de cada um escolher a sua unidade de medida preferida.

Bookmark It

Hide Sites

Bem como o CSS3 o HTML 5 vem para mudar totalmente a forma que a web é construída.

O HTML é a primeira camada do desenvolvimento client-side. Como você sabe, existem 3: a primeira que é a informação, que é o HTML que vai exibi-la na página. A segunda é o CSS, que vai formatar esse HTML de forma que fique legível, usável, bonito. E a terceira que vai definir o comportamento desses elementos, que é o Javascript e Ajax.
Deles o HTML é mais importante. É o HTML que cuida da exibição da formatação. É ele que serve os buscadores e leitores de tela. É ele que serve a informação para aplicações e te dão toda a informação que você busca na web todos os dias.

Hoje em dia, a maioria dessa informação tem significado. Leitores de tela e o Google conseguem distinguir o que é um título, parágrafo, ênfase, listas, etc… Mas como eles sabem o que é um telefone? Ah, sim, fazendo microformatos. Mas microformatos é uma tecnologia que veio para tapar um buraco de semântica do HTML. E esse é um assunto interessante.

Na nova versão do HTML, a 5, o pessoal do W3C está estudando novas formas de inserir significado no HTML. Hoje, só o básico é feito. Você define o que é título, parágrafo, links, endereços, e só. Com algum microformato, você consegue definir um contato, localização e outras informações.

Abaixo, segue uma lista de alguns elementos que podemos utilizar no nosso dia-a-dia para trazer mais significado para a informação dos seus sites:

a

Define a ancora de um elemento.

abbr

Define uma abreviação.

acronym

Indica um acrônimo.

address

A tag address é utilizada para conter informações de endereço e contatos.

blockquote

Blockquote define longos blocos de citação.

cite

Define uma citação ou referência a outra fonte

code

Define que aquele texto é um código.

dfn

Define que certo texto é a definição de um termo.

div, span

Div e Span definem a estrutura dos elementos. Div é um elemento de bloco e Span um elemento de linha.

dl, dd, dt

Listas de definição são feitas para criar um grupo de termos e definições. Muito usada para fazer glossários, dicionários ou entrevistas textuais.

del, ins

INS é utilizado para mostrar que certo texto foi inserido e DEL define o texto que foi deletado da redação. Isso é bastante utilizado para corrigir artigos, textos e etc.

em

Como o strong, indica uma ênfase no texto.

h1 .. h6

Grupo de títulos definidos por importância, onde o H1 é o mais importante e o H6 o menos importante.

ul, ol, li

Listas ordenadas (OL) e listas não ordenadas (UL) são utilizadas para definir e criar listas de itens.

p

Define um parágrafo.

q

Define uma citação ou reposta que não necessita de quebra de linha ou marcação de um parágrafo.

strong

Define uma ênfase, como o EM.

var

Indica uma instância de uma variavel ou argumento de programa.

Além dessas tags, podemos também trabalhar com a semântica com atributos. Alguns deles: Alt, Title, classe, cite, id, lang, longdesc, rev, rel.

Tudo isso traz mais significado ao HTML. Mas ainda não é o bastante.

Como o John Allsopp disse em seu artigo no A List a Part. Nós precisamos de tipos de mecanismos no HTML, que solucionem a necessidade dos desenvolvedores de enriquecer as informações exibidas no HTML dando significado inteligentes para os elementos. Essa é a verdadeira meta do HTML 5.

Infelizmente a adoção do HTML 5 não é tão simples assim. Temos que lembrar da regra Don´t Break the Web. Esse suporte deve ser leve, caso contrários, browsers como o Internet Explorer 6 ou 7 podem sofrer com a falta de compatibilidade com as novas características.

Fonte: http://www.tableless.com.br/html-5-semantica-e-o-que-e-importante-na-web

Bookmark It

Hide Sites