Campus Online

Propriedades de Texto

Propriedades de Texto

As propriedades a seguir definem qual será o comportamento do texto. Ou seja, suas características básicas como justificação, espaço entre as letras, espaços entre palavras, identação, altura de linha, etc...

Propriedade color

• color: nome da cor por extenso | hexadecimal | código RGB
• Valor padrão: definido pelo browser
• Aplicável a: todos os elementos
• Propriedade herdada: sim
• Valores percentuais: N/a
• A propriedade color define a cor do texto.

Os valores podem ser compostos por extenso, hexadecimal ou RGB.

p {color: red;}
h1 {color: #FF0000;}
h2 {color: rgb(255,0,0;}

As opções de cores por extenso são limitadas a 16: 'aqua' , 'black' , 'fuchsia' , 'gray', 'green', 'lime', 'maroon', 'navy', 'olive', 'purple', 'red', 'silver', 'teal', 'white' e 'yellow'. Elas foram tiradas da paleta VGA do Windows. Por isso, é preferível que você use valores hexadecimais ou RGB.

Propriedade word-spacing

• word-spacing: normal |
• Valor padrão: normal
• Aplicável a: todos os elementos
• Propriedade herdada: sim
• Valores percentuais: N/a

Esta propriedade define qual será o espaçamento entre as palavras do texto.

p {word-spacing: 10px;}

Cada browser tem seu valor padrão. O valor que você definir no CSS será apenas acrescentado ao valor do browser. Você pode definir valores negativos, seguindo as mesmas regras.

Propriedade letter-spacing

• letter-spacing: normal |
• Valor padrão: normal
• Aplicável a: todos os elementos
• Propriedade herdada: sim
• Valores percentuais: N/a

A propriedade 'letter-spacing' define qual será o valor adicional do espaço entre as letras das palavras. Ela segue as mesmas regras que a propriedade word-spacing citada logo acima.

p {letter-spacing: 10px;}

Propriedade text-decoration

• text-decoration: none | [ underline || overline || line-through || blink ]
• Valor padrão: none
• Aplicável a: todos os elementos
• Propriedade herdada: não, mas veja a observação abaixo
• Valores percentuais: N/a

Esta propriedade nos permite fazer alguns "efeitos" com o texto. Se o elemento for vazio (não conter texto) ou não for um texto como o IMG, não ocorrerá efeito algum.

Propriedade vertical-align

• vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom |
  
• Valor padrão: baseline
• Aplicável a: elementos internos
• Propriedade herdada: não
• Valores percentuais: referidos à 'line-height' do próprio elemento

Esta propriedade age sobre a posição vertical do elemento. Um conjunto de palavras chaves diz respeito às atribuições do elemento pai:

baseline

Alinha as partes inferiores dos elementos pai e filho;

middle

Alinha os pontos médios verticais dos elementos pai e filho;

sub

Aplica o efeito de subscrito ao elemento;

super

Aplica o efeito de sobrescrito ao elemento;

text-top

Alinha o topo do elemento com o topo das fontes usadas no elemento pai;

text-bottom

Alinha a parte inferior de um elemento com a parte inferior das fontes usadas no elemento pai.

Um outro conjunto de valores são relativos à formatação da linha que contém o elemento:

top

Alinha o topo do elemento com o elemento mais alto que a linha contiver;

bottom

Alinha a parte inferior do elemento com o elemento mais baixo contido na linha.

O emprego dos valores 'top' e 'bottom' pode levar a situações insolúveis, nas quais surge um loop entre as interdependências dos elementos.

Os valores percentuais são referidos em relação ao valor da propriedade 'line-height' do próprio elemento (não do elemento pai). Eles colocam a parte inferior do elemento acima da parte inferior do elemento pai, usando o valor especificado para determinar o quanto de elevação aplicar. São aceitos valores negativos. Ou seja, um valor '-100%' irá descer a parte inferior do elemento até encontrar a parte correspondente do próximo elemento. Esta propriedade permite o controle preciso da posição vertical dos elementos (tais como imagens de letras usadas no lugar das próprias letras).

Propriedade text-transform

• text-transform: capitalize | uppercase | lowercase | none
• Valor padrão: none
• Aplicável a: todos os elementos
• Propriedade herdada: sim
• Valores percentuais: N/a

Esta propriedade transforma o texto, por exemplo, em caixa alta.

p {text-transform: uppercase;}

Propriedade text-align

• text-align: left | right | center | justify
• Valor padrão: depende de cada browser
• Aplicável a: elementos em nível de bloco
• Propriedade herdada: sim
• Valores percentuais: N/a

Esta propriedade define a direção que o texto deve ser alinhado dentro do elemento.

p {text-align: right;}

No exemplo acima, o texto será alinhado à direita.
Como esta propriedade é herdada, todo elemento em nível de bloco, que esteja dentro do elemento 'DIV' que possua a classe 'center' (class="center") será centralizado. Note que os alinhamentos dependem da largura do elemento, não da largura do ambiente de exibição. Se o valor 'justify' não é suportado pelo browser, este irá substituí-lo, normalmente, por 'left' para os idiomas ocidentais.
Aconselhamos a não usar largamente o valor Justify. Os browsers não sabem fazer hifenização, portanto o texto pode ficar com grandes espaços entre as palavras, dificultado a leitura do texto.

Propriedade text-indent

• text-indent: length | percentage
• Valor padrão: 0
• Aplicável a: elementos a nível de bloco
• Propriedade herdada: sim
• Valores percentuais: referentes à largura do elemento pai

Esta propriedade define a identação (deslocamento para a direita) que o texto terá em sua primeira linha. Ele aceita valores negativos.

p {text-indent: 15px;}

Propriedade line-height

• line-height: normal | number>| length | percentage
• Valor padrão: normal
• Aplicável a: todos os elementos
• Propriedade herdada: sim
• Valores percentuais: referentes ao tamanho da fonte do próprio elemento

Esta propriedade define a altura de cada linha do texto, ou seja, ele define a distância entre a base das duas linhas adjacentes.

p {line-height: 15px;}