Entendendo
Style Sheets - Parte 2
Aplicando
CSS a fontes
Comandos:
• font-family
• font-size
• font-weight
• font-style
• text-transform
• text-decoration
font-family
é o comando CSS utilizada para indicar qual a fonte que uma
tag ou documento irá mostrar. Em uma aplicação
geral de CSS a uma página, a linha de comando parecerá
com esta:
P { font-family:
Trebuchet MS, Arial, Helvetica }
No exemplo acima, tudo o
que estiver entre as tag <P> e </P> no seu documento html
será visualizado em Trebuchet MS. A razão de definir
mais de uma fonte deve-se ao fato de que nem todos os computadores possuem
as mesmas fontes instaladas. No caso, se o computador não possuir a
Trebuchet MS instalada em seu hard disk, automaticamente passará
para a segunda opção e mostrará o texto em Arial.
Deve-se observar que o nome
da fonte especificadas na linha de comando do CSS deve ser exatamente
igual ao nome da mesma no diretório "fontes" do computador.
A fonte "Courier", por exemplo, leva este nome na plataforma
Mac, mas se chama "Courier New" no Windows.
font-size
é utilizado para definir o tamanho pelo qual as fontes serão
apresentadas na tela. Há três formas básicas para definição
de tamanho:
1. pontos, pixels, cm e outras unidades de medida;
2. palavras-chave;
3. percentagem
1. Unidades de medida:
Ponto é uma
medida familiar para designers, e pode ser usada para definir o tamanho de
um elemento em uma página html. Tem sido a medida mais utilizada na
programação em CSS pois funcionam bem em todos os browsers
e plataformas operacionais. A única observação sobre
esta medida é que as fontes costumam aparecer um pouco maiores na tela
dos PCs do que nos monitores da linha Mac. Uma linha de comando geral em CSS
parecerá assim:
P { font-size:
20pt }
para pontos
ou:
B { font-size:
20px }
para pixels, por exemplo.
As unidades de medida que
podem ser utilizadas são:
- pt: pontos
- px: pixels
- in: inches
- cm: centímetros
- mm: milímetros
- pc: picas
- em: ems
- ex: x-weight
Pixel é uma
medida familiar aos web designers. Pode dar uma boa noção
do tamanho que a fonte aparecerá na tela, mas infelizmente a utilização
dessa medida tem causado problemas para na impressão das páginas
em papel.
Como já foi dito anteriormente,
não há limites para a especificação do tamanho
de uma fonte em CSS. Para quem estava acostumado a utilizar as tag
<FONT> que permitia apenas sete tamanhos para a visualização
de uma palavra, a possibilidade de aplicar qualquer tamanho através
do atributo font-size será bastante útil. Compare:
•
HTML tradicional:
tag <FONT>
Tamanho 1
Tamanho 2
Tamanho 3
Tamanho 4
Tamanho 5
Tamanho 6
Tamanho 7
•
Comando Font-size:
5 Pontos
(5 Pontos)
10 Pontos
15 Pontos
20 Pontos
30 Pontos
50 Pontos
100...
2. Palavras-chave:
Outra maneira de determinar
tamanhos de fonte em CSS é utilizar palavras chave. A seguir,
a lista de comandos em ordem crescente:
xx-small
x-small
small
medium
large
x-large
xx-large
Esses tamanho pré-configurados
deixam o browser decidir qual o tamanho exato de fonte apropriado para
cada palavra-chave. Por exemplo, x-large é mostrado em 28 pontos no
Netscape 4.0, em 24 pontos no IE 4 e em 18 pontos no Internet
Explorer 3 para Windows 95.
3. Percentagem:
O tamanho das fontes também
pode ser determinado segundo regras de percentagem:
P { font-size:
12pt }
I { font-size: 200% }
No exemplo acima, todo o
texto que estiver compreendido entre as tags <P> e </P>
no corpo da página será mostrados em 12 pontos, assim como todas
as palavras em itálico entre as duas tags serão apresentadas
em um tamanho duas vezes maior.
font-weight
é o comando CSS que controla a propriedade bold (negrito) de
uma tag:
H1 { font-weight:
bold }
No exemplo acima, todas as
palavras da página que estiverem compreendidas entre as tags
<H1> e </H1> serão mostradas em negrito. Da mesma forma
você pode configurar "font-weight : normal" se quiser desativar
todos os bolds de uma página. Podemos também especificar as
características do negrito através de valores numéricos:
100, 200, 300...
400 é o valor normal
de uma fonte sem negrito. 900 é o valor máximo de negrito disponível.
Para uma fonte Arial, por exemplo, um browser com apenas a versão normal
e a versão bold poderá mostrar a versão normal para valores
de 100 à 600 e a versão bold para valores de 700 à 900.
font-style
é o comando CSS que controla a propriedade italic de uma tag.
H1 { font-style:
italic }
No exemplo acima o browser
irá procurar uma versão itálico da fonte para apresentar
o texto compreendido entre as tags <H1> e</H1>. Algumas
fontes tem uma versão chamada "oblique" em lugar de "italic".
Nesse caso, use a palavra oblique como valor para font-style.
text-transform
serve para controlar os
atributos maiúsculas e minúsculas de um texto:
P { text-transform:
uppercase }
No exemplo, tudo o que estiver
compreendido entre as tags <P> e </P> será mostrado
em maiúsculas COMO NESTE EXEMPLO.
Os outros valores possíveis
para o text transform são:
P { text-transform:
lowercase }
Tudo entre as tags
<P> e </P> será mostrado em maiúsculas como
neste exemplo.
P { text-transform:
capitalize }
Tudo entre as tags
<P> e </P> será mostrado com as iniciais maiúsculas
Como Neste Exemplo.
P { text-transform:
none }
Tudo entre as tags
<P> e </P> será mostrado normalmente.
Observação:
O Internet Explorer 3.0 não aceita o comando text-transform.
text-decoration
serve para controlar o sublinhado das palavras.
B { text-decoration:
underline }
No exemplo acima todas as
palavras em negrito da página aparecerão também sublinhadas.
As opções são:
• underline: sublinha
as palavras compreendidas e dentro de uma tag. Exemplo
• overline: coloca uma
linha em cima da palavra compreendida entre as tags. Exemplo
• line-trought: coloca
uma linha em sobre o texto. Exemplo
• blink: sua palavra
pisca (lembram da tag blink?). Exemplo
• none: tira o sublinhado
de uma palavra (inclusive de um link). Exemplo
Observação:
o atributo overline ainda não é mostrado no Netscape
e o atributo blink não funciona em nenhuma das versões do Internet
Explorer.
O mais interessante do comando
text-decoration é que utilizando o atributo none finalmente
podemos eliminar o sublinhado de um link! Se você inserir as linhas
abaixo no cabeçalho de suas páginas, todos os sublinhados dos
links desaparecerão. Mas não esqueça de configurá-los
para serem de outra cor, ou ninguém saberá o que é e
o que não é um link...
<style
type="text/css">
<!--
A {
text-decoration: none }
-->
</style>
