17 CSS - layouts de textos
Transferir como PPTX, PDF0 gostou707 visualizações
O documento descreve propriedades CSS para formatar texto, incluindo text-indent para recuar texto, text-align para alinhar texto, text-decoration para adicionar decoração a texto, letter-spacing para espaçar letras, e text-transform para alterar caixa de texto. Exemplos ilustram como aplicar essas propriedades para formatar diferentes elementos HTML como parágrafos, cabeçalhos e células de tabela.
![Indentação de texto [text-indent]
A propriedade text-indent permite que você aplique um recuo à primeira linha
de um parágrafo. No exemplo a seguir um recuo de 30px é aplicado à todos os
textos marcados com <p>:
p {
text-indent: 30px;
}](https://image.slidesharecdn.com/17csstextos-151027123749-lva1-app6891/85/17-CSS-layouts-de-textos-4-320.jpg)
![Alinhamento de textos [text-align]
A propriedade text-align corresponde ao atributo align das antigas versões
do HTML. Textos podem ser alinhados à esquerda (left), à direita (right) ou
centrados (centred). E temos ainda o valor justify que faz com o texto contido
em uma linha se estenda tocando as margens esquerda e direita. Este tipo de
alinhamento é usado em jornais e revistas.](https://image.slidesharecdn.com/17csstextos-151027123749-lva1-app6891/85/17-CSS-layouts-de-textos-5-320.jpg)
![Decoração de textos [text-decoration]
A propriedade text-decoration possibilita adicionar "efeitos" ou "decoração"
em textos. Você pode por rexemplo, sublinhar textos, cortar o texto com uma
linha, colocar uma linha sobre o texto, etc. No exemplo a seguir os
cabeçalhos <h1> são sublinhados, os cabeçalhos <h2> levam um linha em cima
e os cabeçalhos <h3> são cortados por uma linha.
h1 { text-decoration: underline; }
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }](https://image.slidesharecdn.com/17csstextos-151027123749-lva1-app6891/85/17-CSS-layouts-de-textos-7-320.jpg)
![Espaço entre letras [letter-spacing]
O espaçamento entre os caracteres de um texto é controlado pela propriedade letter-
spacing. O valor desta propriedade define o espaço entre os caracteres. Por exemplo,
se você deseja um espaço de 3px entre as letras do texto de um parágrafo <p> e
de 6px entre as letras do texto de um cabeçalho <h1> o código a seguir deverá ser
usado.
h1 { letter-spacing: 6px; }
p { letter-spacing: 3px; }](https://image.slidesharecdn.com/17csstextos-151027123749-lva1-app6891/85/17-CSS-layouts-de-textos-8-320.jpg)
![Transformação de textos [text-transform]
A propriedade text-transform controla a capitalização (tornar maiúscula) do
texto.Você pode
escolher capitalize, uppercase ou lowercaseindependentemente de como o
texto foi escrito no código HTML.](https://image.slidesharecdn.com/17csstextos-151027123749-lva1-app6891/85/17-CSS-layouts-de-textos-9-320.jpg)
17 CSS - layouts de textos
- 1. PáginasWeb com: HTML, CSS e JavaScript Profª. Marlene da Silva Maximiano de Oliveira & Profª. Alessandra Aparecida da Silva
- 3. CSS:Textos Para formatar e adicionar layout aos textos seguem as propriedades abaixo: • text-ident • text-align • text-decoration • letter-spacing • text-transform
- 4. Indentação de texto [text-indent] A propriedade text-indent permite que você aplique um recuo à primeira linha de um parágrafo. No exemplo a seguir um recuo de 30px é aplicado à todos os textos marcados com <p>: p { text-indent: 30px; }
- 5. Alinhamento de textos [text-align] A propriedade text-align corresponde ao atributo align das antigas versões do HTML. Textos podem ser alinhados à esquerda (left), à direita (right) ou centrados (centred). E temos ainda o valor justify que faz com o texto contido em uma linha se estenda tocando as margens esquerda e direita. Este tipo de alinhamento é usado em jornais e revistas.
- 6. No exemplo a seguir o texto contido na célula de cabeçalho <th> é alinhado à direita e os contidos nas células de dados <td> são centrados. E, os textos normais em parágrafos são justificados: th { text-align: right; } td { text-align: center; } p { text-align: justify; }
- 7. Decoração de textos [text-decoration] A propriedade text-decoration possibilita adicionar "efeitos" ou "decoração" em textos. Você pode por rexemplo, sublinhar textos, cortar o texto com uma linha, colocar uma linha sobre o texto, etc. No exemplo a seguir os cabeçalhos <h1> são sublinhados, os cabeçalhos <h2> levam um linha em cima e os cabeçalhos <h3> são cortados por uma linha. h1 { text-decoration: underline; } h2 { text-decoration: overline; } h3 { text-decoration: line-through; }
- 8. Espaço entre letras [letter-spacing] O espaçamento entre os caracteres de um texto é controlado pela propriedade letter- spacing. O valor desta propriedade define o espaço entre os caracteres. Por exemplo, se você deseja um espaço de 3px entre as letras do texto de um parágrafo <p> e de 6px entre as letras do texto de um cabeçalho <h1> o código a seguir deverá ser usado. h1 { letter-spacing: 6px; } p { letter-spacing: 3px; }
- 9. Transformação de textos [text-transform] A propriedade text-transform controla a capitalização (tornar maiúscula) do texto.Você pode escolher capitalize, uppercase ou lowercaseindependentemente de como o texto foi escrito no código HTML.
- 10. Como exemplo tomamos a palavra "cabeçalho" que pode ser apresentada ao usuário como "CABEÇALHO" ou "Cabeçalho". São quatro os valores possíveis para text-transform: capitalize Capitaliza a primeira letra de cada palavra. Por exemplo: "john doe" transforma-se para "John Doe". uppercase Converte todas as letras para maiúscula. Por exemplo: "john doe" transforma-se para "JOHN DOE". lowercase Converte todas as letras para minúscula. Por exemplo: "JOHN DOE" transforma-se para "john doe". none Sem transformações - o texto é apresentado como foi escrito no código HTML.
- 11. Para exemplificar vamos usar uma lista de nomes. Os nomes estão marcados com o elemento <li> (item de lista). Vamos supor que desejamos os nomes capitalizados e os cabeçalhos em letras maiúsculas. Ao consultar o exemplo sugerido para este código dê uma olhada no HTML da página e observe que os textos no código foram escritos com todas as letras em minúsculas. h1 { text-transform: uppercase; } li { text-transform: capitalize; }