Propriedades CSS

No post anterior tivemos uma noção geral do que é a Folha de Estilo em Cascata (CSS), destacando seus benefícios, como utilizar, e quais tipos de seletores e unidades podemos usar. Neste post serão abordadas algumas propriedades e seus valores possíveis.

Bordas

Essa propriedade é utilizada para formatar a borda de qualquer elemento HTML, seja um parágrafo, uma imagem, uma tabela ou até um formulário. Podemos trabalhar com a borda toda ou determinar qual lado será formatado. Nessa propriedade podemos formatar a largura, a cor e o estilo da borda.

Propriedade	Descrição	Valor
border-top-width	Define a largura de cada um dos quatro lados: top (superior), right (direita), botttom (inferior) e left (esquerda).	thin (espessura fina); medium (espessura média); thick (espessura grossa); tamanho (unidades relativas, absolutas ou porcentagem).
border-right-width
border-bottom-width
border-left-width
border-width	Aplica a largura para as quatro bordas de uma só vez.
border-top-color	Define uma cor para cada lado da borda.	cor nos formatos: nome da cor (red, green, blue, por exemplo) rgb(x,x,x) (valor de cada cor em decimal) #RRGGBB (valor da cor em hexadecimal); transparent.
border-right-color
border-bottom-color
border-left-color
border-color	Aplica uma cor para todos os lados de uma vez só.
border-top-style	Define um estilo de borda para cada um dos quatro lados.	none (nenhum); hidden (idêntico ao none, exceto na resolução de conflito de bordas nos elementos de uma tabela); dotted (pontilhado); dashed (em pequenas linhas); solid (linha simples e contínua); double (duas linhas do tipo solid); groove (efeito 3D de entalhe); ridge (efeito 3D de ressalto); inset (efeito 3D de baixo relevo); outset (efeito 3D de alto relevo).
border-right-style
border-bottom-style
border-left-style
border-style	Aplica um estilo a todos os lados da borda.
border-top	Aplicar largura, estilo e cor a cada um dos quatro lados.
border-right
border-bottom
border-left
border	Aplicar largura, estilo e cor em todos os lados da borda de uma vez só.

Segue exemplo de formatação de borda

Borda superior amarela, dupla e grossa
Borda direita vermelha, pontilhada e fina
Borda inferior verde, solida e de largura 10px
Borda esquerda lilás, entalhada de espessura média

Margens

Em todos elementos há dois tipos de margens: externas (margin) e internas (padding, também chamado de espaçamento). Abaixo veremos como formatar cada uma delas:

Propriedade	Descrição	Valor
margin-top	Tamanho da margem para cada um dos lados.	Tamanho em unidades (px, pt, em, ex, etc.) ou em porcentagem
margin-right
margin-bottom
margin-left
margin	Tamanho da margem aplicado a todos os lados.
padding-top	Define a distância entre o conteúdo e a borda (espaçamento interno) para cada um dos lados.
padding-right
padding-bottom
padding-left
padding	Define o espaçamento interno a todos os lados.

Exemplo de formatação de margem

Margem externa superior de 15px e interna superior de 2px
Margem externa direita de 4px e interna direita de 10px
Margem externa inferior de 30px e interna inferior de 25px
Margem externa esquerda de 12px e interna esquerda de 6px

Cores e Fundo

No que diz respeito à cor em CSS, temos que saber diferenciar qual propriedade utilizar. Para cores de texto utilizamos color e para cores de plano de fundo utilizamos background-color. Segue abaixo as propriedades de formatação das cores e fundo:

Propriedade	Descrição	Valor
color	Define a cor do texto presente no elemento.	cor nos formatos: nome da cor, rgb(x,x,x) ou #rrggbb; transparent (apenas para background-color): a cor de fundo é igual a do elemento superior, caso este não exista, é adotada a cor de fundo padrão do browser.
background-color	Cor de fundo do elemento.
background-image	Define uma imagem como plano de fundo.	url (endereço da imagem)
background-repeat	Define se e como a imagem de fundo se repetirá	repeat (a imagem se repete na vertical e horizontal); repeat-x (a imagem se repete apenas na horizontal); repeat-y (a imagem se repete na vertical); no-repeat (a imagem não se repetirá)
background-attachment	Define se a imagem de fundo será fixa ou com rolagem.	scroll (a imagem acompanha a rolagem da página, mantendo-se como plano de fundo.); fixed (a imagem é fixada na página e não acompanha a rolagem)
background-position	Posição da imagem de fundo utilizada.	top (0% do posicionamento vertical); right (100% do posicionamento horizontal); bottom (100% do posicionamento vertical); left (0% do posicionamento horizontal); Também podemos definir qual a porcentagem de cada posicionamento: 50% (vertical) 20% (horizontal).
background	Define todas as propriedades de plano de fundo de uma só vez.

Exemplo:

Texto azul claro com imagem de fundo repetindo horizontalmente e com posição inferior.

Fontes Tipográficas

Propriedade	Descrição	Valor
font-family	Define a família de fontes utilizada.	No CSS2.1 as seguintes famílias-genéricas de fonte são definidas: - serif; - sans-serif; - cursive; - fantasy; - monospace.
font-style	Estilo utilizado na fonte.	normal (fonte sem estilo itálico ou oblíquo) italic (fonte em itálico); oblique (fonte obliqua).
font-variant	Exibe o texto em pequena caixa-alta ou em fonte normal.	normal (fonte sem variação); small-caps (fonte em pequena caixa alta).
font-weight	Define o peso da fonte.	normal (fonte com efeito padrão de peso - corresponde a 400); bold (fonte com efeito de negrito - corresponde a 700); bolder (fonte com valor de peso imediatamente superior ao valor herdado); lighter (fonte com valor de peso imediatamente inferior ao valor herdado); Os valores numéricos de peso são: 100, 200, 300, 400, 500, 600, 700, 800 e 900.
font-size	Determina o tamanho da fonte.	medium (fonte do elemento com valor padrão de tamanho e equivalente ao padrão do browser); larger / smaller (a fonte é aumentada ou diminuída de acordo com o valor herdado); tamanho da fonte absoluto (não pode ser negativo); porcentagem (porcentagem em relação ao valor herdado); xxsmall / xsmall / small / large / xlarge / xxlarge (são valores calculados pelo browser em relação ao tamanho medium).
font	Define todas as propriedades de fonte de uma só vez.	Além dos valores anteriores, também é possível utilizar os seguintes valores, de acordo com o ambiente do usuário: caption (fonte para controles com legenda); icon (fonte para ícones); menu (fonte para menus, tanto drop-down quanto suspensos); message-box (fonte para caixas de diálogo); small-caption (caption com fonte reduzida); status bar (fonte para barras de status das janelas).

Texto

Propriedade	Descrição	Valor
text-indent	Insere um recuo a esquerda na primeira linha do bloco de texto.	tamanho em unidades relacionais, absolutas ou porcentagem
text-align	Alinhamento do texto.	left (texto alinhado à esquerda); right (texto alinhado à direita); center (texto centralizado); justify (texto justificado, ou seja, alinhado à esquerda e à direita).
text-decoration	Adiciona efeitos decorativos ao texto.	none (sem decoração); underline (torna o texto sublinhado); overline (adiciona uma linha acima de todo o texto); line-trough (torna o texto tachado, ou seja, com uma linha o atravessando no meio); blink (deixa o texto piscando).
letter-spacing	Determina o espaçamento entre caracteres.	tamanho
word-spacing	Determina o espaçamento entre palavras.
text-transform	Transforma o texto em maiúsculas/minúsculas	capitalize (coloca o primeiro caracter de cada palavra em maiúscula); uppercase (coloca todos os caracteres de cada palavra em maiúscula); lowercase (coloca todos os caracteres de cada palavra em minúscula); none (não aplica transformação de texto).

Modelo de Formatação Visual

As seguintes propriedades ajustam a formatação visual de elementos em relação a outro(s) elemento(s):

Propriedade	Descrição	Valor
float	Determina o posicionamento adjacente do elemento.	left (o elemento será posicionado flutuando à esquerda. O fluxo do elemento não integrante do elemento será posicionado a direita, a partir da propriedade top do elemento que recebe o float); right (funciona de forma similar ao left, porém o elemento flutua à direita); none (o elemento não flutua).
text-align	Alinhamento do texto.	left (texto alinhado à esquerda); right (texto alinhado à direita); center (texto centralizado); justify (texto justificado, ou seja, alinhado à esquerda e à direita).
clear	Controle para o posicionamento do float.	none (nenhum controle de limpeza de flutuação é executado); left (limpeza de flutuação à esquerda: o elemento será posicionado abaixo da borda inferior do elemento flutuante à esquerda); right (limpeza de flutuação à direita: o elemento será posicionado abaixo da borda inferior do elemento flutuante à direita); both (o elemento será posicionado abaixo da borda inferior de qualquer elemento flutuante).
width	Determina o espaçamento entre caracteres.	tamanho
height	Determina o espaçamento entre palavras.
line-height	Transforma o texto em maiúsculas/minúsculas
vertical-align	Alinhamento vertical de um texto.	baseline (a linha de base do elemento e do elemento superior serão consideradas para alinhamento. Se não houver linha de base no elemento, será considerada sua margem inferior); sub (a linha de base do elemento será alinhada com a linha de base de conteúdo subscrito no elemento superior); super (a linha de base do elemento será alinhada com a linha de base de conteúdo superescrito no elemento superior); top (alinha o topo do elemento com a linha de topo do elemento superior); text-top (a base superior do elemento será alinhada com a linha superior do conteúdo de textos do elemento-pai; middle (a linha central do elemento e de seu elemento superior serão consideradas para alinhamento); bottom (alinha o rodapé do elemento com o rodapé do elemento superior); text-bottom (a base inferior do elemento será alinhada com a linha inferior do conteúdo de textos do elemento-pai).

Listas

As propriedades a seguir nos auxiliam na formatação do estilo de listas, possibilitam até a criação de um menu horizontal.

Propriedade	Descrição	Valor
list-style-type	Estilo visual aplicado aos marcadores de uma lista.	disc (ponto sólido); circle (círculo vazio); square (quadrado vazio); decimal (números decimais começando com 1); decimal-leading-zero (números decimais com zeros iniciais à esquerda); lower-roman (números romanos minúsculos); upper-roman (números romanos maiúsculos); georgian (numeração georgenea tradicional); armenian (numeração armênia tradicional); lower-latin / lower-alpha (letras ASCII minúsculas); upper-latin / upper-alpha (letras ASCII maiúsculas); lower-greek (caracteres gregos clássicos); none (nenhum marcador de lista);
list-style-image	Imagem aplicada aos marcadores de uma lista.	url(endereço da imagem)
list-style-position	Posicionamento interno dos marcadores de uma lista.	inside (conteúdo da lista será indentado, mas o texto não será alinhado após a quebra de linha); outside (diferente de inside, o texto será alinhado na endentação mesmo com quebra de linha).
list-style	Aplica todas as propriedades de estilo de lista de uma só vez.