Bruno C. de Paula
Laboratório de Informática
CSS Seletores
Texto em CSS
1º Semestre 2010 > PUCPR > BSI
Resumo da aula
Após finalizarmos nosso trabalho com os
seletores do CSS, é chegado o momento
de conhecer as principais propriedades
do CSS;
Nosso objetivo hoje será conhecer as
propriedades que lidam com textos.
Material referente ao assunto da aula
Tutorial sobre textos em CSS:
http://www.maujor.com/tutorial/text
tut.php
Textos em CSS interativo:
http://imasters.uol.com.br/cssintera
tivo/itext.php
Ferramenta para geração de texto
sombreado:
http://tools.westciv.com/shadows/index.ht
ml
3
Material referente ao assunto da aula
Recomendação W3C do CSS 2.1 (em
Inglês):
– http://www.w3.org/TR/CSS21/selecto
r.html#pattern-matching
Capítulo do Livro CSS – Guia de Bolso:
– http://altabooks.tempsite.ws/capitulo
s_amostra/00_cssbolso.pdf
4
Material referente ao assunto da
aula
CSS – Guia de
Bolso;
– Editora AltaBooks;
– 2008;
– Download de um
capítulo.
5
Tags HTML referenciadas na aula (em
Português –site Referenciando)
Tag de estilo: <style>;
Tag de link: <link>;
Tag de script: <script>.
6
Tags HTML referenciadas na aula (em
Inglês – site SitePoint)
Tag de estilo: <style>;
Tag de link: <link>;
Tag de script: <script>;
7
Propriedades CSS referenciados na aula
(em Inglês –site SitePoint)
letter-spacing: espaçamento das letras
do texto;
word-spacing: espaçamento das
palavras do texto;
line-height: altura das linhas;
text-align: alinhamento horizontal;
text-decoration: efeitos em texto;
text-indent: distanciamento da 1ª linha
do texto.
8
Propriedades CSS referenciados na
aula (em Inglês –site SitePoint)
text-transform: controla a capitalização
do texto;
text-shadow: especifica o efeito de
sombra em um texto;
vertical-align: alinhamento vertical;
9
Propriedades CSS referenciados na aula
(em Inglês –site SitePoint)
white-space: controla o espaçamento
em branco em um elemento;
direction: especifica a direção de
escrita;
10
Propriedades CSS referenciados na aula
(em Inglês –site SitePoint)
Específicos do IE e CSS3:
writing-mode (CSS3/IE8): define a
direção do texto;
text-overflow (CSS3/IE6): permite
aplicar (...) em um texto que não
serve em um elemento.
11
letter-spacing
Espaçamento entre letras
12
word-spacing
Espaçamento entre palavras
13
line-height
Altura das linhas
Pode ser usado para centralização de
texto verticalmente;
14
text-align
Alinhamento horizontal
15
text-decoration
Efeitos em texto
Suporte a blink limitado;
16
text-indent
Distanciamento da 1ª linha
 Pode-se
usar valores negativos;
 % é em relação ao line-height;
17
text-transform
Controla a capitalização do texto
18
text-shadow
efeito de sombra
 Gerador
de text-shadow.
 Emulador para IE / Firefox 3.0;
 text-shadow: h v b cor;
h: deslocamento horizontal;
v: descolamento vertical;
b: blur (“borrado”).
 Pode-se aplicar mais de uma sombra
separando por vírgulas.
19
20
vertical-align
Alinhamento vertical
09/06/09
21
white-space
Tratamento do espaço em branco
09/06/09
22
direction
especifica a direção de escrita
09/06/09
23
writing-mode (IE8/CSS3)
Define a direção do texto
Disponível por completo só no IE8!
09/06/09
24
text-overflow
Permite habilitar reticências (...)
Disponível a partir do IE6;
Emulador para Firefox;
09/06/09
25
Exemplo text-overflow emulado
09/06/09
26
Material referente ao assunto da aula
Tutorial sobre textos em CSS:
http://www.maujor.com/tutorial/text
tut.php
Textos em CSS interativo:
http://imasters.uol.com.br/cssintera
tivo/itext.php
Ferramenta para geração de texto
sombreado:
http://tools.westciv.com/shadows/index.ht
ml
09/06/09
27
Material referente ao assunto da aula
Recomendação W3C do CSS 2.1 (em
Inglês):
– http://www.w3.org/TR/CSS21/selecto
r.html#pattern-matching
Capítulo do Livro CSS – Guia de Bolso:
– http://altabooks.tempsite.ws/capitulo
s_amostra/00_cssbolso.pdf
09/06/09
28
Material referente ao assunto da
aula
CSS – Guia de
Bolso;
– Editora AltaBooks;
– 2008;
– Download de um
capítulo.
09/06/09
29