CSS formatação de parágrafos

9.125 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
9.125
No SlideShare
0
A partir de incorporações
0
Número de incorporações
589
Ações
Compartilhamentos
0
Downloads
39
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

CSS formatação de parágrafos

  1. 1. Formatação deparágrafos Agrupamento de Escolas da Batalha Miguela Fernandes Janeiro 2012
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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

×