CSS formatação de parágrafos
•Transferir como PPTX, PDF•
0 gostou•9,965 visualizações
O documento discute as propriedades básicas de formatação de parágrafos em CSS, incluindo cor, espaçamento entre letras e palavras, alinhamento, decoração, recuo, transformação de caso e direção do texto. Ele fornece exemplos de código CSS para ilustrar cada propriedade.
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (15)
Destaque
Semelhante a CSS formatação de parágrafos
Semelhante a CSS formatação de parágrafos (20)
Mais de Agrupamento de Escolas da Batalha
Mais de Agrupamento de Escolas da Batalha (20)
CSS formatação de parágrafos
- 1. Formatação de parágrafos Agrupamento de Escolas da Batalha Miguela Fernandes Janeiro 2012
- 2. Considerações iniciais Propriedades 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. Color Em código hexadecimal: #FFFFFF Em 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. Letter-spacing normal: é o espaçamento por defeito lenght: medida reconhecida pelas CSS (px, pt, em, cm, ...). Também são válidos valores negativos Exemplo: h2 {letter-spacing: 1.2em;} p {letter-spacing: 0.4cm;} MF. 4
- 5. Word-spacing normal: espaçamento por defeito lenght: medida reconhecida pelas CSS (px, pt, em, cm, ...). Também são válidos valores negativos Exemplo: h2 {word-spacing: 1.8em;} p {word-spacing: 80px;} MF. 5
- 6. Text-align left: alinha o texto à esquerda right: alinha o texto à direita center: alinha o texto ao centro justify: força o texto a ocupar toda a extensão da linha da esquerda à direita Exemplo: h1 {text-align: left;} h2 {text-align: center;} h3 {text-align: right;} p {text-align: justify;} MF. 6
- 7. Text-decoration none: nenhuma decoração underline: coloca sublinhado no texto overline: coloca um sobrelinhado no texto line-through: coloca uma linha em cima do texto blink: faz o texto piscar Exemplo: MF. 7
- 8. Text-decoration Exemplo: <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. Text-indent lenght: medida reconhecida pelas CSS (px, pt, em, cm, ...) % : percentagem da largura do elemento pai Exemplo: <style type="text/css"> h1 {text-indent: 80px;} p {text-indent: 3em;} </style> MF. 9
- 10. Text-transform (1) none: texto normal capitalize: todas as primeiras letras do texto em maiúsculas uppercase: todas as letras do texto em maiúsculas lowercase: todas as letras do texto em minúsculas MF. 10
- 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. Direction ltr: texto escrito da esquerda para a direita rtl: texto escrito da direita para a esquerda Exemplo: <style type="text/css"> h1{direction: ltr; } p {direction: rtl;} </style> MF. 12
- 13. White-space (1) normal: os espaços em branco serão ignorados pelo browser pre: os espaços em branco serão preservados pelo browser nowrap: o texto será apresentado todo numa linha única no ecrã. Não há quebra de linha até ser encontrada uma tag <br> MF. 13
- 14. White-space (2) normal: os espaços em branco serão ignorados pelo browser pre: os espaços em branco serão preservados pelo browser nowrap: o texto será apresentado todo numa linha única no ecrã. Não há quebra de linha até ser encontrada uma tag <br> MF. 14
- 15. Webgrafia e Bibliografia http://www.ufpa.br/dicas/htm/htm-fra.htm http://www.sevenseek.com/tutorials/learning-css- important-css-concepts/ http://maujor.com/tutorial/texttut.php http://www.tizag.com/cssT/inline.php Teagu, J. C. (2004). DHTML and CSS for the World Wide Web (2ª Ed.). USA:Peachpit Press. MF. 15