Home
índice (CSS)
Página anterior
Página anterior

Espaçamento e Alinhamento de Textos

• Propriedade letter-spacing

Controla o espaçamento entre as letras de um texto. O texto fica com as letras espaçadas assim:

espaço entre as letras

Na folha de estilos ficaria assim:
p{
letter-spacing: 5px;/*espaçamento entre as letras*/
}

• Propriedade word-spacing.

Controla o espaçamento entre as palavras de um texto. Nesse caso as palavras também ficam com espaço entre si. Pode-se fazer espaçamentos negativos. Nesse caso
-as palavras ficarão amontoadas umas sobre as outras-
Na folha de estilos ficaria assim:
h5{
word-spacing: -20px;espaçamento negativo entre as palavras
}

espaçamento negativo entre as palavras

espaçamento negativo entre as palavras

• Propriedade line-height.

Controla os elementos in line dentro de um bloco. Pode ser um número ou porcentagem.
A base de cálculo, nos dois casos, é o tamanho da fonte. No primeiro caso é o dobro do tamanho.
No segundo é a porcentagem que foi especificada.

Na folha de estilos ficaria assim:
p{
line-height: 10px;/*espaçamento entre as linhas do texto. Não aceita valores negativos.*/
}

• Propriedade vertical-line.

Controla o posicionamento vertical dos boxes in-line e o modo como as palavras ficarão no texto.
Na folha de estilos ficaria assim:
span{
vertical-align:sub;/*pode-se escolher também entre:
vertical-align:text-sup; vertical-align:text-top; ou vertical-align:text-bottom;*/
}

• Propriedade text-align.

Controla a posição do texto na página.

Na folha de estilos ficaria assim:
p{
text-align: center;/*alinhamento ao centro, pode ser left ou right*/
text-align: justify;/*alinhamento justificado. Ocupa todo o espaço em branco*/
text-indent: 50px;/*altera a indentação do parágrafo. Pode ser um valor negativo.*/
}

• Propriedade text-decoration.

Permite sublinhar um texto.

/* pode ser também underline, overline, line-through, blink*/
Na folha de estilos ficaria assim:
h3{
text-decoration: line-through;

traça uma linha no meio da frase

}

• Propriedade text-transform.

Controla os efeitos de capitalização dos textos.

Na folha de estilos ficaria assim:
h4{
text-transform: uppercase;

todos os caracteres em caixa alta

ou lowercase todos em caixa baixa.
Capitalize/*o primeiro caracter de cada palavra em caixa alta*/
}