• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
CSS formatação de parágrafos
 

CSS formatação de parágrafos

on

  • 5,698 views

 

Statistics

Views

Total Views
5,698
Views on SlideShare
5,255
Embed Views
443

Actions

Likes
0
Downloads
23
Comments
0

2 Embeds 443

http://asminhasaulas.wordpress.com 442
https://asminhasaulas.wordpress.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    CSS formatação de parágrafos CSS formatação de parágrafos Presentation Transcript

    • Formatação deparágrafos Agrupamento de Escolas da Batalha Miguela Fernandes Janeiro 2012
    • Considerações iniciaisPropriedades básicas para o texto:Color: cor do texto;letter-spacing: espaçamento entre letras;word-spacing: espaçamento entre palavras;text-align: alinhamento do texto;text-decoration: decoração do texto;text-indent: recuo do texto;text-transform: forma das letras;direction: direção do texto;white-space: forma como o browser trata os espaços em branco. MF. 2
    • ColorEm código hexadecimal: #FFFFFFEm código rgb: rgb(255,235,0)Com o nome da cor: yellow, red, blue, entre outras.Exemplo:h1 {color: #FFFFFF;}h2 {color: rgb(124,234,255);}p {color: #000000;} MF. 3
    • Letter-spacingnormal: é o espaçamento por defeitolenght: medida reconhecida pelas CSS (px, pt,em, cm, ...). Também são válidos valoresnegativosExemplo:h2 {letter-spacing: 1.2em;}p {letter-spacing: 0.4cm;} MF. 4
    • Word-spacingnormal: espaçamento por defeitolenght: medida reconhecida pelas CSS (px, pt,em, cm, ...). Também são válidos valoresnegativosExemplo:h2 {word-spacing: 1.8em;}p {word-spacing: 80px;} MF. 5
    • Text-alignleft: alinha o texto à esquerdaright: alinha o texto à direitacenter: alinha o texto ao centrojustify: força o texto a ocupar toda a extensão dalinha da esquerda à direitaExemplo:h1 {text-align: left;}h2 {text-align: center;}h3 {text-align: right;}p {text-align: justify;} MF. 6
    • Text-decorationnone: nenhuma decoraçãounderline: coloca sublinhado no textooverline: coloca um sobrelinhado no textoline-through: coloca uma linha em cima do textoblink: faz o texto piscarExemplo: MF. 7
    • Text-decorationExemplo:<style type="text/css">h1 {text-decoration: underline;}h2 {text-decoration: line-through;}h3 {text-decoration: overline;}a {text-decoration: none;}</style></head><body><h1>Texto com sublinhado</h1><h2>Texto com linha em cima</h2><h3>Texto com sobrelinhado</h3><p> <a href="http://web20t11.blogspot.com"> Este é um link sem sublinhado</a> </p> MF. 8
    • Text-indentlenght: medida reconhecida pelas CSS (px, pt, em, cm, ...)% : percentagem da largura do elemento paiExemplo:<style type="text/css"> h1 {text-indent: 80px;}p {text-indent: 3em;}</style> MF. 9
    • Text-transform (1)none: texto normalcapitalize: todas as primeiras letras do texto emmaiúsculasuppercase: todas as letras do texto emmaiúsculaslowercase: todas as letras do texto emminúsculas MF. 10
    • Text-transform (2)Exemplo:<style type="text/css">h1 {text-transform: none;}h2 {text-transform: capitalize;}h3 {text-transform: uppercase;}h4 {text-transform: lowercase;}</style> MF. 11
    • Directionltr: texto escrito da esquerda para a direitartl: texto escrito da direita para a esquerdaExemplo:<style type="text/css">h1{direction: ltr; }p {direction: rtl;}</style> MF. 12
    • White-space (1)normal: os espaços em branco serão ignoradospelo browserpre: os espaços em branco serão preservadospelo browsernowrap: o texto será apresentado todo numalinha única no ecrã. Não há quebra de linha atéser encontrada uma tag <br> MF. 13
    • White-space (2)normal: os espaços em branco serão ignoradospelo browserpre: os espaços em branco serão preservadospelo browsernowrap: o texto será apresentado todo numalinha única no ecrã. Não há quebra de linha atéser encontrada uma tag <br> MF. 14
    • Webgrafia e Bibliografiahttp://www.ufpa.br/dicas/htm/htm-fra.htmhttp://www.sevenseek.com/tutorials/learning-css- important-css-concepts/http://maujor.com/tutorial/texttut.phphttp://www.tizag.com/cssT/inline.phpTeagu, J. C. (2004). DHTML and CSS for the World Wide Web (2ª Ed.). USA:Peachpit Press. MF. 15