Os materiais didáticos aqui disponibilizados estão licenciados através de Creative Commons Atribuição-SemDerivações-SemDerivados CC BY-NC-ND. Você possui a permissão para visualizar e compartilhar, desde que atribua os créditos do autor. Não poderá alterá-los e nem utilizá-los para fins comerciais.
Atribuição-SemDerivações-SemDerivados
CC BY-NC-ND
Cursos / Informática para Internet / Autoria Web / Aula
Além de estilizar a fonte, é possível também estilizar textos com as propriedades e valores listados no Quadro 3, a seguir.
| Propriedade | Função | Valor |
| letter-spacing | espaçamento entre letras | normal: é o espaçamento default lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...). São válidos valores negativos |
| word-spacing | espaçamento entre palavras | normal: é o espaçamento default lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...). São válidos valores negativos |
| text-align | alinhamento do texto | left: alinha o texto à esquerda right: alinha o texto à direita center: alinha o texto no centro justify: força o texto a ocupar toda a extensão da linha da esquerda à direita |
| text-decoration | decoração do texto | 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 |
| text-indent | recuo do texto | lenght: uma medida reconhecida pelas CSS (px, pt, em, cm ) % : porcentagem da largura do elemento pa |
| text-transform | forma das letras | 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 |
| direction | direção do texto | ltr: texto escrito da esquerda para a direita rtl: texto escrito da direita para a esquerda |
| white-space | como o browser trata os espaços em branco | 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 ele numa linha única na tela. Não há quebra de linha até ser encontrada uma tag <br> |
A Figura 3 mostra a aplicação de algumas propriedades listadas acima. Perceba que nesse exemplo foram criadas 11 classes diferentes, uma para cada parágrafo marcado pelo elemento <p>. Dessa forma, é possível criar vários estilos diferentes para um mesmo tipo de elemento. Nesse exemplo, cada classe é estilizada por no máximo duas propriedades (com exceção da classe 11). Isso foi feito para que você perceba o efeito de cada propriedade. Entretanto, lembramos que cada regra pode conter um número indeterminado de propriedades.
See the Pen autoria_web_7f3_fontes by Materiais (@materiais) on CodePen.
Versão 5.3 - Todos os Direitos reservados