Entendendo
Style Sheets - Parte 3
Aplicando
CSS a parágrafos
Comandos:
• line-height
• text-align
• text-indent
• margin-left, top...
• padding-right, bottom...
• border-color, width...
line-height
é
o comando que controla o espaçamento entre as linhas de um texto (também
conhecido pelo termo leading). O espaço é definido pela
distância entre a base das linhas de um texto. Veja o exemplo a seguir:
P { line-height:
8pt }
"Acima
da verdade estπo os deuses.
A nossa ciΩncia Θ uma falhada c≤pia
Da certeza com que eles
Sabem que hß o Universo"
(...)
Os valores de line-height
podem ser estipulados de três maneiras diferentes: por número,
por unidade ou por percentagem.
Estipulando o valor em
número, o browser utilizará o font-size para definir o tamanho.
Ele multiplicará o valor do font-size pelo número para definir
o espaço entre as linhas. No exemplo a seguir teremos um espaçamento
de 24 pontos:
P { font-size:
12pt; line-height: 2}
(...)
"Tudo Θ tudo, e mais alto estπo os deuses,
Nπo pertence α ciΩncia conhecΩ-los,
Mas adorar devemos
Seus vultos como αs flores
(...)
Estipulando o valor em
unidade, podemos definir diretamente o valor do espaçamento. As
unidades que podem ser utilizadas são as mesmas explicadas para o comando
font-size: pt, px, in, cm, mm, pc, ex, em.
Estipulando o valor por
percentagem, o browser utilizará o valor do font-size como referência.
No exemplo a seguir, ao estipularmos um valor de 60%, com uma fonte de 10
pontos, teremos um espaçamento de 6 pontos comom resultado:
P { font-size:
10pt; line-height:60% }
(...)
"Porque visφveis α nossa alta vista,
Sπo tπo reais como reais as flores
E no seu calmo Olimpo
Sπo outra Natureza."
Ricardo Reis
(pseudônimo de Fernando Pessoa)
text-align
é
a comando utilizado para o alinhamento de parágrafos em Style Sheets.
Ela só funciona em elementos que definam parágrafos, como <P>,
<H1>, <H2>, <BLOCKQUOTE> e <UL>. Os valores que podem
ser aplicados são: left (esquerda) , right (direita), center (centro)
e justify (justificado).
P { text-align:justify
}
Observação:
o valor justify ( que está sendo utilizado neste parágrafo)
funciona apenas para Netscape Comunicator, em ambas as plataformas operacionais
e no Internet Explorer 4 para Windows. Ele não funcionará
no Internet Explorer 3 e 4 para Macintosh. Acrescentarei mais caracteres aqui
para podermos observar melhor o efeito do text-align: nono onono non onononoo
nononononon onn onononnonoonn nonon onno nononon onon nononon nononon nonoon
non ononononon ononn ononon nononono nononon nonononononon nono.
text-indent
é
o comando que permite configurar o valor da indentação de um
parágrafo. Também só funciona em elementos que definam
parágrafos, como os descritos para o text-align.
P { text-indent:40pt
}
Aqui podemos verificar uma indentação de 40 pontos. Você
pode definir os valores em unidades, as mesmas descritas anteriormente para
o comando fonte-size.
P {
text-indent: 1% }
Também
podemos configurar a indentação em valores de percentagem, como
você pode observar aplicado a este parágrafo. Uma indentação
de 20% significa que o texto na primeira linha começará 20%
distante de onde as outras linhas iniciam normalmente.
Observação: o IE 4 assume que a percentagem refere-se ao valor
total da janela do browser, não apenas a largura do parágrafo.
P { text-indent: -20px }
Por
fim, se você configurar a indentação de um valor negativo,
terá a primeira linha do parágrafo iniciando antes de onde as
linhas normalmente começam, como neste exemplo. Algumas linhas a mais
neste parágrafo auxiliarão a percepção do efeito
ilustrado: nonono nnonon nonon no no n non nonooon n nononno onnononon non
noono nonnoonnoonoo n nooo n nonoo.
margin-left,
top...
Sabemos que em html normal
só é possível acrescentar margens a um texto com a utilização
de tabelas. Style Sheets por sua vez, permitem que tenhamos total controle
das margens de um bloco de texto.
Antes de prosseguir vamos
verificar um pouco das definições a respeito dos elementos de
uma página:
Podemos definir a margem,
borda ou padding de qualquer elemento do html que defina um parßgrafo,
como <P>, <BLOCKQUOTE>, <UL>, <H1>,<H2>...
Para controle da margem dispomos
dos seguintes comandos:
margin-left (margem esquerda)
margin-right (margem direita)
margin-top (margem superior)
margin-bottom (margem inferior)
Utilizando esses comandos
podemos definir a margem de cada lado do elemento separadamente As unidades
de medida que podem ser utilizadas são as mesmas já discutidas
anteriormente: px, pt... Também podem ser configuradas as margens utilizando
valores de percentagem. Se estipularmos valores negativos para uma margem
obtemos uma sobreposição, como verificamos no exemplo a seguir:
<P STYLE="
color:red; font-size: 24pt; font-family:'Trebuchet MS', Arial, Helvetica">PALAVRAS</P>
<P
STYLE="margin-top: -45px; margin-left: 16pt; color:orange; font-size: 14pt;
font-family:'Trebuchet MS', Arial, Helvetica">palavras</P>
PALAVRAS
palavras
Valores negativos para a
margem não são a maneira mais indicada para sobrepor elementos.
A diferença entre os browsers pode causar efeitos inesperados na visualização.
Na última lição deste tutorial veremos como utilizar
layers para conseguir esse efeito.
padding-rigth,
bottom...
Da mesma forma que a margem,
o padding do elemento pode ser estipulado em unidades ou em valores
de percentagem. Os comandos que permitem controlar o padding são:
- padding-top (padding
superior)
- padding-bottom (padding inferior)
- padding-left (padding esquerdo)
- padding-right (padding direito)
Não é possível,
entretanto, configurar valores negativos para o padding da mesma forma
que fizemos com o comando que define a margem do elemento.
Observação:
O comando padding não pode ser visualizado no Explorer 3.
border-color,
width....
Infelizmente os atributos
de borda só podem ser visualizados no Netscape Comunicator. Esperamos
que nas próximas versões do Internet Explorer ele também
incorpore os comando para o controle de borda.
border-width: define
a largura da borda. Pode ser definido nas mesmas unidades explicadas para
os comandos anteriores ou em palavras-chave:
: thin (borda fina)
: medium (borda média)
: thick (borda larga).
A borda de cada lado de um
elemento pode ser definida individualmente, utilizando os comandos border-top-width
(largura da borda superior), border-botton-width (largura da borda inferior),
border-left-width (largura da borda esquerda) e border-right-width (largura
da borda direita)
<P STYLE="border-left-width:
10px; border-right-width: 5px; border-color: white">
Neste
exemplo vemos a borda aplicada a direita e à esquerda do parágrafo
(somente em Netscape Comunicator).
border-color: define
a cor da borda do elemento.
border-style: por
fim, o comando border-style define que espécie de borda será
mostrada. Aqui estão os tipos possíveis:
: solid
: double
: dotted
: dashed
: groove
: ridge
: inset
: outset
