Laboratório de Informática CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula.

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

1 Laboratório de Informática CSS Seletores Texto em CSS 1º Semestre 2010 > 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 3 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 4 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 5

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

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

8 8 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 9

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 10

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

12 letter-spacing Espaçamento entre letras 12

13 word-spacing Espaçamento entre palavras 13

14 line-height Altura das linhas Pode ser usado para centralização de texto verticalmente; 14

15 text-align Alinhamento horizontal 15

16 text-decoration Efeitos em texto Suporte a blink limitado; 16

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

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

19 text-shadow efeito de sombra Gerador de text-shadow. 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. 19

20 20

21 vertical-align Alinhamento vertical 09/06/09 21

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

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

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

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

26 Exemplo text-overflow emulado 09/06/09 26

27 2709/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

28 2809/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

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