CSS - Manual de Estilo (parte 2)

Neste segundo artigo veremos como aplicar estilo ao plano de fundo de elementos, aplicar estilo aos textos e também entender o que é o Modelo da Caixa e como utilizá-lo para deixar nossas páginas web mais estilosas.

[ Hits: 23.366 ]

Por: Juliao Junior em 04/09/2009


Fontes



Usando folhas de estilo, é preciso entender a diferença entre fontes chamada "serif" e "sans-serif". As fontes "serif" possuem um acabamento mais cuidadoso, com linhas em suas extremidades para tornar o formato mais elegante. As fontes "sans-serif" não possuem tal acabamento. Em telas de computador, as fontes "sans-serif" são consideradas mais confortáveis para a leitura.

Podemos então especificar as fontes de duas formas: apenas informando o nome genérico da "família" de fontes, tal como "Serif", ou ainda especificar qual a família de fontes que queremos usar, tal como "Times New Roman".

Indicando apenas a família de fontes, permitimos que o navegador escolha a fonte baseado apenas na indicação "genérica" que passamos para ele. Assim, se uma fonte não estiver disponível, o navegador escolhe outra da mesma família.

A melhor alternativa talvez seja partir de uma fonte específica para uma família de fontes. Ou seja, usamos a fonte que realmente queremos, mas também indicamos algo mais genérico. Dessa forma podemos ter pelo menos algum controle do que será exibido pelo navegador de nossos visitantes. Veja um exemplo:

p{font-family:"Times New Roman",Georgia,Serif}

Conforme visto acima, separamos as indicações das fontes por vírgulas; e quando uma fonte possui mais de uma palavra, colocamos entre aspas.

Além de indicar a fonte, podemos alterar seu estilo. Usamos aqui a propriedade "font-style", com um dos valores: normal, italic, oblique. O valor "oblique" é similar ao valor "italic", mas não é tão bem suportado por todos os navegadores.

p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique {font-style:oblique}

Temos o controle do tamanho do texto em CSS, mas é preciso uma palavra de cautela. Não devemos fazer ajustes para confundir títulos com parágrafos e vice-versa. Para isso, use sempre as tags de HTML, como <h1> e <h6> para títulos, ou <p> para parágrafos.

Quando não indicamos o tamanho da fonte, seu padrão é 16px. E podemos usar um tamanho absoluto ou relativo. Indicando um tamanho absoluto, não permitimos que o usuário redimensione as fontes. Isto não é muito bom, simplesmente por questão de acessibilidade. Mas pode ser útil, se sabemos exatamente qual o tamanho físico real do dispositivo de leitura que será usado. Já uma especificação relativa de tamanho é o que normalmente conhecemos, com as fontes podendo ser redimensionadas ao gosto do visitante.

Siga o exemplo abaixo e indique exatamente o tamanho do texto em pixels. Aparentemente esta formatação não funciona no Internet Explorer.

h1 {font-size:40px}
h2 {font-size:30px}
p {font-size:14px}

Para contornar o "problema" indicado acima, sobre o Internet Explorer, você pode usar outro tipo de formatação. Use um tipo de unidade, chamado "em". Um "em" (1em) indica o tamanho normal do texto. Com ele indicamos a proporção do texto normal com os demais. Assim, se usamos "2em", teremos uma fonte com o dobro de tamanho. Se usamos "1.5", teremos uma fonte com 50% a mais de tamanho, e assim por diante. A fórmula para calcular é: pixels/16 = em

Abaixo, veja o mesmo exemplo que vimos acima com pixels, agora usando "em":

h1 {font-size:2.5em}
h2 {font-size:1.875em}
p {font-size:0.875em}

Se você quer segurança total, use porcentagens. Isto é suportado por todos os navegadores. Novamente, o mesmo exemplo acima, agora com porcentagens.

body {font-size:100%}
h1 {font-size:250%}
h2 {font-size:187.5%}
p {font-size:87.5%}

Página anterior     Próxima página

Páginas do artigo
   1. Aplicando estilo ao background
   2. Estilos em textos
   3. Fontes
   4. Modelo da Caixa
Outros artigos deste autor

Octave - Programação científica no Linux

manDVD - Produza DVD-vídeo rápido e fácil

Real Football 2012 - Futebol de qualidade no Android

Atualização para o Ubuntu 10.10

Guia introdutório do Linux IV

Leitura recomendada

Entendendo validações e operações aritméticas com Javascript

Manual de XHTML

AJAX - Parte 1

Servidor LAMP no Linux Mint e Ubuntu

Extensões imperdíveis para quem usa o Git (e o GitHub) no Brackets

  
Comentários
[1] Comentário enviado por giselinhaconfere em 04/11/2010 - 10:59h

modo de instalaçõa dos programas e como efetuar danwold

[2] Comentário enviado por giselinhaconfere em 04/11/2010 - 11:00h

como efetuar danwold

[3] Comentário enviado por giselinhaconfere em 04/11/2010 - 11:00h

o que é firewall


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts