laboratório de informática css seletores texto em css 1º semestre 2010 > pucpr > bsi bruno...
TRANSCRIPT
![Page 1: Laboratório de Informática CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbab2/html5/thumbnails/1.jpg)
Laboratório de InformáticaCSS SeletoresTexto em CSS
1º Semestre 2010 > PUCPR > BSI
Bruno C. de PaulaBruno C. de Paula
![Page 2: Laboratório de Informática CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbab2/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 CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbab2/html5/thumbnails/3.jpg)
3
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 CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbab2/html5/thumbnails/4.jpg)
4
Material referente ao assunto da aula
Recomendação W3C do CSS 2.1 (em Inglês):– http://www.w3.org/TR/CSS21/selecto
r.html#pattern-matchingCapítulo do Livro CSS – Guia de Bolso:
– http://altabooks.tempsite.ws/capitulos_amostra/00_cssbolso.pdf
![Page 5: Laboratório de Informática CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbab2/html5/thumbnails/5.jpg)
Material referente ao assunto da aula
CSS – Guia de Bolso;–Editora AltaBooks;–2008;–Download de um c
apítulo.
5
![Page 6: Laboratório de Informática CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbab2/html5/thumbnails/6.jpg)
6
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 CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbab2/html5/thumbnails/7.jpg)
7
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 CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbab2/html5/thumbnails/8.jpg)
8
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 CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbab2/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;
9
![Page 10: Laboratório de Informática CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbab2/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;
10
![Page 11: Laboratório de Informática CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbab2/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.
11
![Page 12: Laboratório de Informática CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbab2/html5/thumbnails/12.jpg)
letter-spacingEspaçamento entre letras
12
![Page 13: Laboratório de Informática CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbab2/html5/thumbnails/13.jpg)
word-spacingEspaçamento entre palavras
13
![Page 14: Laboratório de Informática CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbab2/html5/thumbnails/14.jpg)
line-heightAltura das linhasPode ser usado para centralização de
texto verticalmente;
14
![Page 15: Laboratório de Informática CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbab2/html5/thumbnails/15.jpg)
text-alignAlinhamento horizontal
15
![Page 16: Laboratório de Informática CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbab2/html5/thumbnails/16.jpg)
text-decorationEfeitos em textoSuporte a blink limitado;
16
![Page 17: Laboratório de Informática CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbab2/html5/thumbnails/17.jpg)
text-indentDistanciamento da 1ª linha
Pode-se usar valores negativos; % é em relação ao line-height;
17
![Page 18: Laboratório de Informática CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbab2/html5/thumbnails/18.jpg)
text-transformControla a capitalização do texto
18
![Page 19: Laboratório de Informática CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbab2/html5/thumbnails/19.jpg)
text-shadowefeito de sombra
Gerador de text-shadow. 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.
19
![Page 20: Laboratório de Informática CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbab2/html5/thumbnails/20.jpg)
20
![Page 21: Laboratório de Informática CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbab2/html5/thumbnails/21.jpg)
vertical-alignAlinhamento vertical
09/06/09 21
![Page 22: Laboratório de Informática CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbab2/html5/thumbnails/22.jpg)
white-spaceTratamento do espaço em branco
09/06/09 22
![Page 23: Laboratório de Informática CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbab2/html5/thumbnails/23.jpg)
directionespecifica a direção de escrita
09/06/09 23
![Page 24: Laboratório de Informática CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbab2/html5/thumbnails/24.jpg)
writing-mode (IE8/CSS3)Define a direção do texto
09/06/09
Disponível por completo só no IE8!
24
![Page 25: Laboratório de Informática CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbab2/html5/thumbnails/25.jpg)
text-overflowPermite habilitar reticências (...)
09/06/09
Disponível a partir do IE6;Emulador para Firefox;
25
![Page 26: Laboratório de Informática CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbab2/html5/thumbnails/26.jpg)
Exemplo text-overflow emulado
09/06/09 26
![Page 27: Laboratório de Informática CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbab2/html5/thumbnails/27.jpg)
2709/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 28: Laboratório de Informática CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbab2/html5/thumbnails/28.jpg)
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/
selector.html#pattern-matchingCapítulo do Livro CSS – Guia de Bolso:
– http://altabooks.tempsite.ws/capitulos_amostra/00_cssbolso.pdf
![Page 29: Laboratório de Informática CSS Seletores Texto em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062418/552fc0fe497959413d8bbab2/html5/thumbnails/29.jpg)
Material referente ao assunto da aula
CSS – Guia de Bolso;–Editora AltaBooks;–2008;–Download de um
capítulo.
2909/06/09