Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.

Apresentação em tema: "Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula."— Transcrição da apresentação:

1 Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula

2 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.

3 309/06/09 Material referente ao assunto da aula Tutorial sobre textos em CSS: http://www.maujor.com/tutorial/text tut.php http://www.maujor.com/tutorial/text tut.php Textos em CSS interativo: http://imasters.uol.com.br/cssintera tivo/itext.php http://imasters.uol.com.br/cssintera tivo/itext.php Ferramenta para geração de texto sombreado: http://tools.westciv.com/shadows/index.ht ml http://tools.westciv.com/shadows/index.ht ml

4 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/select or.html#pattern-matching http://www.w3.org/TR/CSS21/select or.html#pattern-matching Capítulo do Livro CSS – Guia de Bolso: – http://altabooks.tempsite.ws/capitul os_amostra/00_cssbolso.pdf http://altabooks.tempsite.ws/capitul os_amostra/00_cssbolso.pdf

5 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 6 Tags HTML referenciadas na aula (em Português –site Referenciando)Referenciando Tag de estilo: ; Tag de link: ; Tag de script:.

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

8 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

9 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

10 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

11 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

12 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

13 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

14 letter-spacing Espaçamento entre letras 1409/06/09

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

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

17 text-align Alinhamento horizontal 1709/06/09

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

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

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

21 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

22 09/06/0922

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

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

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

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

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

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

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

30 3009/06/09 Material referente ao assunto da aula Tutorial sobre textos em CSS: http://www.maujor.com/tutorial/text tut.php http://www.maujor.com/tutorial/text tut.php Textos em CSS interativo: http://imasters.uol.com.br/cssintera tivo/itext.php http://imasters.uol.com.br/cssintera tivo/itext.php Ferramenta para geração de texto sombreado: http://tools.westciv.com/shadows/index.ht ml http://tools.westciv.com/shadows/index.ht ml

31 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/select or.html#pattern-matching http://www.w3.org/TR/CSS21/select or.html#pattern-matching Capítulo do Livro CSS – Guia de Bolso: – http://altabooks.tempsite.ws/capitul os_amostra/00_cssbolso.pdf http://altabooks.tempsite.ws/capitul os_amostra/00_cssbolso.pdf

32 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

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