Laboratório de InformáticaCSS SeletoresTexto em CSS

1º Semestre 2010 > PUCPR > BSI

Bruno C. de PaulaBruno 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.

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

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

Material referente ao assunto da aula

CSS – Guia de Bolso;–Editora AltaBooks;–2008;–Download de um c

apítulo.

5

6

Tags HTML referenciadas na aula (em Português –site Referenciando)

Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>.

7

Tags HTML referenciadas na aula (em Inglês – site SitePoint)

Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>;

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.

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

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

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

letter-spacingEspaçamento entre letras

12

word-spacingEspaçamento entre palavras

13

line-heightAltura das linhasPode ser usado para centralização de

texto verticalmente;

14

text-alignAlinhamento horizontal

15

text-decorationEfeitos em textoSuporte a blink limitado;

16

text-indentDistanciamento da 1ª linha

Pode-se usar valores negativos; % é em relação ao line-height;

17

text-transformControla a capitalização do texto

18

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

20

vertical-alignAlinhamento vertical

09/06/09 21

white-spaceTratamento do espaço em branco

09/06/09 22

directionespecifica a direção de escrita

09/06/09 23

writing-mode (IE8/CSS3)Define a direção do texto

09/06/09

Disponível por completo só no IE8!

24

text-overflowPermite habilitar reticências (...)

09/06/09

Disponível a partir do IE6;Emulador para Firefox;

25

Exemplo text-overflow emulado

09/06/09 26

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

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

Material referente ao assunto da aula

CSS – Guia de Bolso;–Editora AltaBooks;–2008;–Download de um

capítulo.

2909/06/09