Alinhamento e decoração de texto

Alinhamento e decoração de texto

Já vimos uma série de propriedades e subpropriedades que determinam o estilo do tipo (fonte). Vamos conhecer algumas maneiras de alterarmos as disposições dos textos.

Uma das propriedades mais simples, porém muito utilizada, é a que diz respeito ao alinhamento de texto: a propriedade text-align.

p {
  text-align: right;
}

O exemplo anterior determina que todos os parágrafos da nossa página tenham o texto alinhado para a direita. Também é possível determinar que um elemento tenha seu conteúdo alinhado ao centro ao definirmos o valor center para a propriedade text-align, ou então definir que o texto deve ocupar toda a largura do elemento aumentando o espaçamento entre as palavras com o valor justify. O padrão é que o texto seja alinhado à esquerda, com o valor left, porém é importante lembrar que essa propriedade propaga-se em cascata.

É possível configurar também uma série de espaçamentos de texto com o CSS:

p {
  line-height: 3px; /* tamanho da altura de cada linha */
  letter-spacing: 3px; /* tamanho do espaço entre cada letra */
  word-spacing: 5px; /* tamanho do espaço entre cada palavra */
  text-indent: 30px; /* tamanho da margem da primeira linha do texto */
}

2.14 - Imagem de fundo

A propriedade background-image permite indicar um arquivo de imagem para ser exibido ao fundo do elemento. Por exemplo:

h1 {
  background-image: url(sobre-background.jpg);
}

Com essa declaração, o navegador vai requisitar um arquivosobre-background.jpg, que deve estar na mesma pasta do arquivo CSS onde consta essa declaração.