Laboratório de InformáticaPropriedades CSS:Texto

1º Semestre 2009 > PUCPR > BSI

Bruno C. de Paula

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.

309/06/09

Material referente ao assunto da aula

Tutorial sobre textos em CSS:http://www.maujor.com/tutorial/textt

ut.phpTextos em CSS interativo:

http://imasters.uol.com.br/cssinterativo/itext.php

Ferramenta para geração de texto sombreado:

http://tools.westciv.com/shadows/index.html

409/06/09

Material referente ao assunto da aula

Recomendação W3C do CSS 2.1 (em Inglês):

– http://www.w3.org/TR/CSS21/selector.html#pattern-matching

Capítulo do Livro CSS – Guia de Bolso:– http://altabooks.tempsite.ws/capitul

os_amostra/00_cssbolso.pdf

Material referente ao assunto da aula

CSS – Guia de Bolso;–Editora AltaBooks;–2008;–Download de um c

apítulo.

509/06/09

609/06/09

Tags HTML referenciadas na aula (em Português –site Referenciando)

Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>.

709/06/09

Tags HTML referenciadas na aula (em Inglês – site SitePoint)

Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>;

809/06/09

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.

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;

909/06/09

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;

1009/06/09

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.

1109/06/09

1209/06/09

Exemplos da aula

• Exemplo letter-spacing• Exemplo word-spacing• Exemplo line-height• Exemplo text-align• Exemplo text-decoration• Exemplo text-indent• Exemplo text-transform

1309/06/09

Exemplos da aula

• Exemplo text-shadow• Exemplo text-shadow emulado (IE, Firefox,

etc)• Exemplo vertical-align• Exemplo white-space• Exemplo direction• Exemplo writing-mode• Exemplo text-overflow• Exemplo text-overflow emulado

letter-spacingEspaçamento entre letras

1409/06/09

word-spacingEspaçamento entre palavras

1509/06/09

line-heightAltura das linhasPode ser usado para centralização de

texto verticalmente;

1609/06/09

text-alignAlinhamento horizontal

1709/06/09

text-decorationEfeitos em textoSuporte a blink limitado;

1809/06/09

text-indentDistanciamento da 1ª linhaPode-se usar valores negativos;% é em relação ao line-height;

19

text-transformControla a capitalização do texto

20

text-shadowefeito de sombra Gerador de text-shadow (apenas Safari).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.

21

09/06/09 22

Exemplo text-shadow emulado

09/06/09 23

vertical-alignAlinhamento vertical

09/06/09 24

white-spaceTratamento do espaço em branco

09/06/09 25

directionespecifica a direção de escrita

09/06/09 26

writing-mode (IE8/CSS3)Define a direção do texto

09/06/09

Disponível por completo só no IE8!

27

text-overflowPermite habilitar reticências (...)

09/06/09

Disponível a partir do IE6;Emulador para Firefox;

28

Exemplo text-overflow emulado

09/06/09 29

3009/06/09

Material referente ao assunto da aula

Tutorial sobre textos em CSS:http://www.maujor.com/tutorial/textt

ut.phpTextos em CSS interativo:

http://imasters.uol.com.br/cssinterativo/itext.php

Ferramenta para geração de texto sombreado:

http://tools.westciv.com/shadows/index.html

3109/06/09

Material referente ao assunto da aula

Recomendação W3C do CSS 2.1 (em Inglês):

– http://www.w3.org/TR/CSS21/selector.html#pattern-matching

Capítulo do Livro CSS – Guia de Bolso:– http://altabooks.tempsite.ws/

capitulos_amostra/00_cssbolso.pdf

Material referente ao assunto da aula

CSS – Guia de Bolso;–Editora AltaBooks;–2008;–Download de um

capítulo.

3209/06/09

3309/06/09

Próximas aulas de CSS

Propriedades CSS: –Imagens e Fundos.