CSS – Atributos de Texto

CSS | Paulo Castro | março 8, 2010 at 3:42 PM

As propriedades desta seção tratam de transformações e atributos aplicados a texto, não afetando a exibição das fontes. Os atributos tipográficos afetam a forma como o texto é apre-sentado na tela como o espaçamento entre linhas, entre palavras, entre letras, o alinhamento de parágrafos e a endentação.

A propriedade text-transform no CSS permite colocar letras em maiúsculas ou minúsculas e a propriedade text-decoration permite acrescentar ou tirar efeitos decorativos do texto como riscados e sublinhados.

Text-Transform

A propriedade text-transform realiza transformações no formato caixa-alta ou aixa-baixa do texto.

Sintaxe:

text-transform: capitalize

text-transform: uppercase

text-transform: lowercase

text-transform: none (valor default)

Exemplos:

H1 {text-transform: capitalize}

Capitalize coloca a primeira letra de cada palavra em maiúsculas. Uppercase coloca tudo em maiúsculas e lowercase coloca tudo em minúsculas. None remove qualquer transformação deixando o texto da forma como foi definido antes das transformações.

<style>

p {font-weight: bold}

span {font-weight: normal}

.non {text-transform: none}

.upp {text-transform: uppercase}

.cap {text-transform: capitalize}

.low {text-transform: lowercase}

</style>

(…)

Sem transformação: Aprendendo um pouco de CSS

Uppercase: Aprendendo um pouco de CSS

Capitalize: Aprendendo um pouco de CSS

Lowercase: Aprendendo um pouco de CSS

(…)

Sem transformação: Aprendendo um pouco de CSS

Uppercase: Aprendendo um pouco de CSS

Capitalize: Aprendendo um pouco de CSS

Lowercase: Aprendendo um pouco de CSS

Text-Decoration

A propriedade text-decoration permite colocar (ou tirar) sublinhados, linhas sobre e atravessando o texto, etc.

Sintaxe:

text-decoration: underline (default em links)

text-decoration: overline

text-decoration: line-through

text-decoration: blink

text-decoration: none (default)

Exemplos:

h1 {text-decoration: overline} <a href=”algumlugar.html” style=”text-decoration: none”>Link sem sublinhado</a>

<style>

.und {text-decoration: underline}

.ovr {text-decoration: overline}

.blk {text-decoration: blink}

.lin {text-decoration: line-through}

.non, .non a {text-decoration: none}

</style>

(…)

Underline. <a href=”#”>Link</a> —–

Overline. <a href=”#”>Link</a>

Blink. <a href=”#”>Link</a> —– Line-through. <a href=”#”>Link</a> —–

None. <a href=”#”>Link</a>