Controles de validação 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula.
Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de...
Transcript of Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de...
![Page 1: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/1.jpg)
Laboratório de InformáticaPropriedades CSS:Texto
1º Semestre 2009 > PUCPR > BSI
Bruno C. de Paula
![Page 2: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/2.jpg)
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.
![Page 3: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/3.jpg)
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
![Page 4: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/4.jpg)
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
![Page 5: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/5.jpg)
Material referente ao assunto da aula
CSS – Guia de Bolso;–Editora AltaBooks;–2008;–Download de um c
apítulo.
509/06/09
![Page 6: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/6.jpg)
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>.
![Page 7: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/7.jpg)
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>;
![Page 8: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/8.jpg)
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.
![Page 9: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/9.jpg)
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
![Page 10: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/10.jpg)
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
![Page 11: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/11.jpg)
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
![Page 12: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/12.jpg)
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
![Page 13: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/13.jpg)
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
![Page 14: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/14.jpg)
letter-spacingEspaçamento entre letras
1409/06/09
![Page 15: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/15.jpg)
word-spacingEspaçamento entre palavras
1509/06/09
![Page 16: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/16.jpg)
line-heightAltura das linhasPode ser usado para centralização de
texto verticalmente;
1609/06/09
![Page 17: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/17.jpg)
text-alignAlinhamento horizontal
1709/06/09
![Page 18: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/18.jpg)
text-decorationEfeitos em textoSuporte a blink limitado;
1809/06/09
![Page 19: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/19.jpg)
text-indentDistanciamento da 1ª linhaPode-se usar valores negativos;% é em relação ao line-height;
19
![Page 20: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/20.jpg)
text-transformControla a capitalização do texto
20
![Page 21: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/21.jpg)
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
![Page 22: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/22.jpg)
09/06/09 22
![Page 23: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/23.jpg)
Exemplo text-shadow emulado
09/06/09 23
![Page 24: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/24.jpg)
vertical-alignAlinhamento vertical
09/06/09 24
![Page 25: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/25.jpg)
white-spaceTratamento do espaço em branco
09/06/09 25
![Page 26: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/26.jpg)
directionespecifica a direção de escrita
09/06/09 26
![Page 27: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/27.jpg)
writing-mode (IE8/CSS3)Define a direção do texto
09/06/09
Disponível por completo só no IE8!
27
![Page 28: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/28.jpg)
text-overflowPermite habilitar reticências (...)
09/06/09
Disponível a partir do IE6;Emulador para Firefox;
28
![Page 29: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/29.jpg)
Exemplo text-overflow emulado
09/06/09 29
![Page 30: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/30.jpg)
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
![Page 31: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/31.jpg)
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
![Page 32: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/32.jpg)
Material referente ao assunto da aula
CSS – Guia de Bolso;–Editora AltaBooks;–2008;–Download de um
capítulo.
3209/06/09
![Page 33: Laboratório de Informática Propriedades CSS: Texto 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.](https://reader035.fdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbade/html5/thumbnails/33.jpg)
3309/06/09
Próximas aulas de CSS
Propriedades CSS: –Imagens e Fundos.