Laboratório de Informática Propriedades 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: tut.php tut.php Textos em CSS interativo: tivo/itext.php tivo/itext.php Ferramenta para geração de texto sombreado: ml ml

409/06/09 Material referente ao assunto da aula Recomendação W3C do CSS 2.1 (em Inglês): – or.html#pattern-matching or.html#pattern-matching Capítulo do Livro CSS – Guia de Bolso: – os_amostra/00_cssbolso.pdf os_amostra/00_cssbolso.pdf

Material referente ao assunto da aula CSS – Guia de Bolso; – Editora AltaBooks; – 2008; – Download de um capítulo. Download de um capítulo 509/06/09

6 Tags HTML referenciadas na aula (em Português –site Referenciando)Referenciando Tag de estilo: ; Tag de link: ; Tag de script:.

709/06/09 Tags HTML referenciadas na aula (em Inglês – site SitePoint)SitePoint Tag de estilo: ; Tag de link: ; Tag de script: ;<script>

809/06/09 Propriedades CSS referenciados na aula (em Inglês –site SitePoint)SitePoint letter-spacing: espaçamento das letras do texto; letter-spacing word-spacing: espaçamento das palavras do texto; word-spacing line-height: altura das linhas; line-height text-align: alinhamento horizontal; text-align text-decoration: efeitos em texto; text-decoration text-indent: distanciamento da 1ª linha do texto. text-indent

Propriedades CSS referenciados na aula (em Inglês –site SitePoint)SitePoint text-transform: controla a capitalização do texto; text-transform text-shadow: especifica o efeito de sombra em um texto; text-shadow vertical-align: alinhamento vertical; vertical-align 909/06/09

Propriedades CSS referenciados na aula (em Inglês –site SitePoint)SitePoint white-space: controla o espaçamento em branco em um elemento; white-space direction: especifica a direção de escrita; direction 1009/06/09

Propriedades CSS referenciados na aula (em Inglês –site SitePoint)SitePoint Específicos do IE e CSS3: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 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-spacing Espaçamento entre letras 1409/06/09

word-spacing Espaçamento entre palavras 1509/06/09

line-height Altura das linhas Pode ser usado para centralização de texto verticalmente; 1609/06/09

text-align Alinhamento horizontal 1709/06/09

text-decoration Efeitos em texto Suporte a blink limitado; 1809/06/09

text-indent text-indent Distanciamento da 1ª linha Pode-se usar valores negativos; % é em relação ao line-height; 19

text-transform text-transform Controla a capitalização do texto 20

text-shadow text-shadow efeito de sombra Gerador de text-shadow (apenas Safari). Gerador de text-shadow (apenas Safari). Emulador para IE / Firefox 3.0; Emulador para IE 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/0922

Exemplo text-shadow emuladotext-shadow emulado 09/06/0923

vertical-align vertical-align Alinhamento vertical 09/06/0924

white-space white-space Tratamento do espaço em branco 09/06/0925

direction direction especifica a direção de escrita 09/06/0926

writing-modewriting-mode (IE8/CSS3) Define a direção do texto 09/06/09 Disponível por completo só no IE8!IE8 27

text-overflow text-overflow Permite habilitar reticências (...) 09/06/09 Disponível a partir do IE6; Emulador para Firefox; Emulador para Firefox 28

Exemplo text-overflow emuladotext-overflow emulado 09/06/0929

3009/06/09 Material referente ao assunto da aula Tutorial sobre textos em CSS: tut.php tut.php Textos em CSS interativo: tivo/itext.php tivo/itext.php Ferramenta para geração de texto sombreado: ml ml

3109/06/09 Material referente ao assunto da aula Recomendação W3C do CSS 2.1 (em Inglês): – or.html#pattern-matching or.html#pattern-matching Capítulo do Livro CSS – Guia de Bolso: – os_amostra/00_cssbolso.pdf os_amostra/00_cssbolso.pdf

Material referente ao assunto da aula CSS – Guia de Bolso; – Editora AltaBooks; – 2008; – Download de um capítulo. Download de um capítulo 3209/06/09

3309/06/09 Próximas aulas de CSS Propriedades CSS: – Imagens e Fundos.