Propriedades de Fundo em CSS

CSS permite aplicar cores sólidas como fundo, bem como utilizar imagens de fundo para criar efeitos visuais complexos.

Definindo uma Cor de Fundo

A propriedade background-color é utilizada para estabelecer a cor de fundo de um elemento. Ela aceita qualquer valor de cor válido.

.caixa-destaque {
  background-color: #c0c0c0;
}

Para que a cor de fundo se estenda um pouco além do texto dentro do elemento, basta adicionar algum preenchimento interno (padding).

.caixa-destaque {
  background-color: #c0c0c0;
  padding: 1.25rem;
}

Esta propriedade pode ser aplicada a qualquer elemento, do body a elementos inline como em e a. O valor padrão de background-color é transparent, o que significa que, se não for definida, o fundo do elemento será transparente, permitindo que o fundo de seus elementos ancestrais fique visível.

Utilizando uma Imagem de Fundo

Para colocar uma imagem como fundo, utiliza-se a propriedade background-image. Seu valor padrão é none.

Para aplicar uma imagem, deve-se fornecer um valor URL.

body {
  background-image: url('/imagens/fundo_padrao.jpg');
}

Embora frequentemente aplicada ao elemento body, esta propriedade pode ser usada em qualquer elemento, incluindo elementos inline.

.link-especial {
  background-image: url('/imagens/icone_fundo.png');
}

É importante notar que background-image, assim como todas as outras propriedades de fundo, não é herdada pelos elementos filhos.

Repetição da Imagem de Fundo

O comportamento de repetição de uma imagem de fundo é controlado pela propriedade background-repeat.

O valor repeat faz com que a imagem se repita tanto na horizontal quanto na vertical. Os valores repeat-x e repeat-y causam a repetição apenas em uma direção, enquanto no-repeat impede qualquer repetição.

Por padrão, a imagem de fundo começa no canto superior esquerdo do elemento.

.cabecalho {
  background-image: url('/imagens/textura.png');
  background-repeat: repeat-x;
}

Posicionamento da Imagem de Fundo

A propriedade background-position altera a posição inicial da imagem de fundo dentro do elemento.

.secao-destaque {
  background-image: url('/imagens/padrao.gif');
  background-repeat: no-repeat;
  background-position: center center;
}

Existem várias maneiras de especificar o valor para background-position: usando palavras-chave (top, bottom, left, right, center), valores de comprimento (como 100px ou 2rem), ou valores percentuais.

Utilizando Palavras-chave

As palavras-chave de posicionamento funcionam de forma intuitiva. Por exemplo, top right posiciona a imagem no canto superior direito da área de preenchimento do elemento.

Se apenas uma palavra-chave for fornecida (por exemplo, top), a outra dimensão assume o valor center.

.titulo-secao {
  background-image: url('/imagens/seta.png');
  background-repeat: no-repeat;
  background-position: top;
}

Utilizando Valores Percentuais

Ao usar porcentagens, o ponto percentual da imagem é alinhado com o ponto percentual correspondente do elemento.

.container {
  background-image: url('/imagens/marca.png');
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

Neste caso, o ponto central (50% 50%) da imagem é alinhado com o ponto central (50% 50%) do elemento. Se apenas um valor percentual for fornecido, ele se aplica à posição horizontal, e a vertical assume 50%.

Utilizando Valores de Comprimento

Valores de comprimento descrevem um deslocamento a partir do canto superior esquerdo da área de preenchimento do elemento até o canto superior esquerdo da imagem.

.rodape {
  background-image: url('/imagens/selo.png');
  background-repeat: no-repeat;
  background-position: 3rem 5rem;
}

Fixação da Imagem de Fundo

Em documentos longos, a imagem de fundo pode rolar junto com o conteúdo. Para fixá-la em relação à janela de exibição (viewport), utilize a propriedade background-attachment com o valor fixed.

body {
  background-image: url('/imagens/fundo_fixo.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
}

O valor padrão é scroll, fazendo com que a imagem de fundo role com o conteúdo.

Resumo das Propriedades de Fundo

Propriedade	Descrição
background	Propriedade abreviada para definir todas as propriedades de fundo.
background-attachment	Define se a imagem de fundo é fixa ou rola com o restante da página.
background-color	Define a cor de fundo de um elemento.
background-image	Define uma imagem como fundo.
background-position	Define a posição inicial da imagem de fundo.
background-repeat	Define como a imagem de fundo é repetida.

Propriedades de Texto em CSS

As propriedades de texto em CSS permitem controlar a aparência visual do conteúdo textual, como cor, espaçamento, alinhamento, decoração e recuo.

Recuo de Texto (Indentação)

Recuar a primeira linha de um parágrafo é uma técnica comum de formatação. A propriedade text-indent facilita a implementação desse efeito.

.paragrafo-artigo {
  text-indent: 3em;
}

Esta propriedade se aplica a elementos de bloco e pode aceitar valores negativos para criar um efeito de "recuo suspenso".

.citacao {
  text-indent: -2em;
  padding-left: 2em;
}

Valores percentuais são relativos à largura do elemento pai. text-indent é uma propriedade herdável.

Alinhamento Horizontal de Texto

A propriedade text-align controla o alinhamento horizontal das linhas de texto dentro de um elemento. Seus valores principais são left (padrão para idiomas da esquerda para a direita), right, center e justify (justificado).

.cabecalho-centralizado {
  text-align: center;
}

.artigo-jornal {
  text-align: justify;
}

Esta propriedade afeta apenas o conteúdo interno do elemento, não o posicionamento do próprio elemento.

Espaçamento entre Palavras e Letras

A propriedade word-spacing modifica o espaço entre palavras. Valores positivos aumentam o espaço, valores negativos o diminuem.

.titulo-espacado {
  word-spacing: 1.5rem;
}

.subtitulo-compacto {
  word-spacing: -0.2em;
}

A propriedade letter-spacing ajusta o espaço entre caracteres individuais.

.rotulo-maiusculo {
  letter-spacing: 0.1em;
}

Transformação de Texto

A propriedade text-transform altera a capitalização do texto. Valores incluem uppercase, lowercase, capitalize (capitaliza a primeira letra de cada palavra) e none.

.titulo-principal {
  text-transform: uppercase;
}

Decoração de Texto

A propriedade text-decoration adiciona decorrações como sublinhado (underline), sobrelinha (overline), tachado (line-through) ou efeito de piscar (blink, raramente suportado). O valor none remove decorações existentes, como o sublinhado padrão dos links.

h2 {
  text-decoration: underline overline;
}

.link-estilizado {
  text-decoration: none;
}

Múltiplas decorações podem ser combinadas em uma única declaração.

Manipulação de Espaço em Branco

A propriedade white-space define como os espaços em branco e as quebras de linha dentro de um elemento são tratados.

• normal: Espaços múltiplos são colapsados; quebras de linha são ignoradas (comportamento padrão).
• pre: Os espaços em branco são preservados; funciona como o elemento <pre>.
• nowrap: Impede a quebra de linha automática dentro do elemento.
• pre-wrap: Preserva espaços, mas permite quebra de linha automática.
• pre-line: Colapsa espaços múltiplos, mas respeita quebras de linha.

Direção do Texto

A propriedade direction (complementada por unicode-bidi) define a direção do fluxo do texto. Os valores são ltr (esquerda para a direita, padrão) e rtl (direita para a esquerda).

Resumo das Propriedades de Texto

Porpriedade	Descrição
color	Define a cor do texto.
direction	Define a direção do texto.
line-height	Define a altura da linha.
letter-spacing	Define o espaço entre caracteres.
text-align	Alinha o texto horizontalmente.
text-decoration	Adiciona decorações ao texto.
text-indent	Recua a primeira linha do texto.
text-transform	Controla a capitalização do texto.
white-space	Controla o tratamento de espaço em branco.
word-spacing	Define o espaço entre palavras.

Propriedades de Fonte em CSS

As propriedades de fonte controlam a tipografia do texto, incluindo família, tamanho, peso, estilo e variantes.

Famílias de Fonte

CSS distingue entre famílias genéricas (como serif, sans-serif, monospace) e famílias específicas (como Arial, Times New Roman). A propriedade font-family aceita uma lista de preferência.

body {
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
}

.codigo-fonte {
  font-family: "Courier New", Courier, monospace;
}

É uma boa prática sempre incluir uma família genérica de fallback no final da lista.

Estilo da Fonte

A propriedade font-style define se o texto é exibido em estilo normal (normal), itálico (italic) ou oblíquo (oblique).

.enfase {
  font-style: italic;
}

Variantes da Fonte

A propriedade font-variant controla a exibição de variantes como small-caps (versaletes).

.sigla {
  font-variant: small-caps;
}

Peso da Fonte

A propriedade font-weight define a espessura da fonte. Pode ser especificada com palavras-chave (normal, bold, bolder, lighter) ou com valores numéricos de 100 a 900.

.titulo {
  font-weight: 700; /* Equivalente a bold */
}

.texto-grifado {
  font-weight: 500;
}

Tamanho da Fonte

A propriedade font-size define o tamanho do texto. Pode utilizar valores absolutos (como px, pt) ou relativos (como em, rem, %). O uso de unidades relativas como rem é recomendado para melhor acessibilidade e escalabilidade.

html {
  font-size: 16px; /* Base para cálculos com rem */
}

.paragrafo {
  font-size: 1rem; /* 16px se baseado no exemplo acima */
}

.subtitulo {
  font-size: 1.25rem; /* 20px */
}

A propriedade abreviada font permite definir múltiplas propriedades de fonte em uma única declaração.

.elemento-estilizado {
  font: italic bold 1rem/1.5 "Georgia", serif;
}

Resumo das Propriedades de Fonte

Propriedade	Descrição
font	Propriedade abreviada para definir todas as propriedades de fonte.
font-family	Define a família da fonte.
font-size	Define o tamanho da fonte.
font-style	Define o estilo da fonte (itálico, normal, oblíquo).
font-variant	Define variantes da fonte (ex: versaletes).
font-weight	Define o peso (espessura) da fonte.

Propriedades de Listas em CSS

As propriedades de listas permitem customizar os marcadores (bolinhas, números) ou usar imagens como marcadores.

Tipo do Marcador

A propriedade list-style-type define o símbolo do marcador. Para listas não ordenadas (<ul>), valores comuns incluem disc (padrão), circle e square. Para listas ordenadas (<ol>), pode-se usar decimal, upper-roman, lower-alpha, etc.

ul.opcoes {
  list-style-type: square;
}

ol.passos {
  list-style-type: upper-roman;
}

Imagem como Marcador

A propriedade list-style-image permite usar uma imagem personalizada como marcador.

ul.lista-personalizada {
  list-style-image: url('/imagens/marcador.png');
}

Posição do Marcador

A propriedade list-style-position determina se o marcador fica dentro (inside) ou fora (outside, padrão) do bloco do item da lista.

li.item-interno {
  list-style-position: inside;
}

A propriedade abreviada list-style combina todas as três.

ul.estilo-completo {
  list-style: url('/img/seta.png') circle inside;
}

Propriedades de Tabela em CSS

CSS oferece propriedades para estilizar tabelas, controlando bordas, espaçamento, dimensões e alinhamento.

Bordas da Tabela

A propriedade border é usada para definir bordas para table, th e td. Por padrão, cada elemento tem sua própria borda, criando um efeito de borda dupla.

.tabela-dados {
  border-collapse: collapse; /* Funde as bordas adjacentes */
}

.tabela-dados th,
.tabela-dados td {
  border: 1px solid #ccc;
  padding: 0.5rem;
}

A propriedade border-collapse (com valor collapse) é crucial para obter bordas simples.

Alinhamento de Texto na Tabela

Use text-align para alinhamento horizontal e vertical-align para alinhamento vertical dentro das células (td, th).

.tabela-dados td.numerico {
  text-align: right;
}

.tabela-dados td.centralizado-vertical {
  vertical-align: middle;
  height: 4rem;
}

Largura e Espaçamento

Define-se a largura da tabela com width (ex: 100%) e o preenchimento interno das células com padding.

.tabela-responsiva {
  width: 100%;
}

.tabela-responsiva th,
.tabela-responsiva td {
  padding: 0.75rem;
}

Cores e Fundo

Propriedades como background-color e color são aplicáveis a th e td para estilização visual.

.tabela-estilizada th {
  background-color: #f0f0f0;
  color: #333;
}

Resumo das Propriedades de Tabela

Propriedade	Descrição
border-collapse	Define se as bordas da tabela devem ser fundidas.
caption-side	Define a posição da legenda (<caption>).
empty-cells	Define se as bordas e fundos são exibidos em células vazias.
table-layout	Define o algoritmo de layout da tabela (auto, fixed).

Propriedades de Contorno (Outline) em CSS

Um contorno (outline) é uma linha desenhada ao redor de um elemento, fora da borda. É frequentemente usado para indicar foco (por exemplo, em links ou inputs). Não afeta o layout do documento.

As propriedades incluem outline-style, outline-color, outline-width e a propriedade abreviada outline.

.botao:focus {
  outline: 2px dotted blue;
}

.elemento-importante:hover {
  outline-style: solid;
  outline-color: orange;
  outline-width: medium;
}

O valor none remove o contorno, o que pode ser útil para remover o contorno padrão de foco em alguns elementos, mas deve ser usado com cautela para não prejudicar a acessibilidade.