Propriedades CSS

Bordas

• border-top-width: largura da bordar superior
• border-right-width: largura da bordar direita
• border-bottom-width: largura da bordar inferior
• border-left-width: largura da bordar esquerda
• border-width: largura geral da borda

Exemplo:
div {
border-top-width: 10px;
border-right-width: 10px;
border-bottom-width: 10px;
border-left-width: 10px;
}

div {
border-width: 10px;
}

• border-top-color: cor da bordar superior
• border-right-color: cor da bordar direita
• border-bottom-color: cor da bordar inferios
• border-left-color: cor da bordar esquerda
• border-color: cor geral da bordar

Exemplo:
div {
border-top-color: #f1f1f1;
border-right-color: #f1f1f1;
border-bottom-color: #f1f1f1;
border-left-color: #f1f1f1;
}

div {
border-color: #f1f1f1;
}

• border-top-style: estilo da borda superior
• border-right-style: estilo da borda esquerda
• border-bottom-style: estilo da borda inferior
• border-left-style: estilo da borda esquerda
• border-style: estilo geral da borda

Exemplo:
div {
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: dotted;
border-left-style: none;
}

div {
border-style: none;
}

• border-top: borda superior
• border-right: borda direita
• border-bottom: borda inferior
• border-left: bordar esquerda
• border: borda geral

Exemplo:
div {
border-top: 10px solid #f1f1f1;
border-right: 10px solid #f1f1f1;
border-bottom: 10px solid #f1f1f1;
border-left: 10px solid #f1f1f1;
border: 10px solid #f1f1f1;
}

div {
border: 10px solid #f1f1f1;
}

Margens

• margin-top: margem externa superior
• margin-right: margem externa da direita
• margin-bottom: margem externa inferior
• margin-left: margem externa da esquerda
• margin: margem externa

Exemplo:
div {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}

div {
margin: 10px;
}

• padding-top: margem externa superior
• padding-right: margem externa da direita
• padding-bottom: margem externa inferior
• padding-left: margem externa esquerda
• padding: margem externa

Exemplo:
div {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}

div {
padding: 10px;
}

Cores e Fundos

• color: cor do texto
• background-color: cor de fundo
• background-image: imagem do plano de fundo
• background-repeat: repetição do plano de fundo em repeat, no-repeat, repeat-x ou repeat-y
• background-attachment: rolagem do plano de fundo em scroll ou fixed
• background-position: posição do plano de fundo em top, right, bottom, left e/ou center
• background: plano de fundo geral

Exemplo:
div {
color: #000;
background-color: #f1f1f1;
background-image: url("background.jpg");
background-repeat: no-repeat;
background-attachment: scroll ;
background-position: left top;
}

div {
background: #f1f1f1 url("background.jpg") no-repeat scroll left top;
}

Fontes Tipográficas

• font-family: fonte
• font-style: estilo da fonte
• font-variant: varia o tamanho da fonte em normal e small-caps
• font-weight: peso da fonte em normal, bold (negrito), bolder e lighter
• font-size: tamanho da fonte
• font: fonte em geral

Exemplo:
div {
font-family: arial,sans-serif;
font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: 16px;
}

div {
font: italic normal bold 16px arial,sans-serif;
}

Texto

• text-indent: Recuo à esquerda da primeira linha em um bloco de texto
• text-align: alinhamento do texto
• text-decoration: decoração do texto em none, underline, overline, line-through e blink
• letter-spacing: espaçamento entre as letras
• word-spacing: espaçamento entras as palavras
• text-transform: transformação do texto em capitalize, uppercase, lowercase e none

Exemplo:
div {
text-indent: 2em;
text-align: center;
text-decoration: underline;
letter-spacing: 0.1em;
word-spacing: 1em;
text-transform: uppercase;
}

Modelo de Formatação Visual

• float: posiciona "flutua" o elemento a esquerda ou direita
• clear: controle para os posicionamentos float em none, left, right e both
• width: largura do elemento
• height: altura do elemento
• line-height: altura da linha
• vertical-align: alinha verticalmente a linha

Exemplo:
div {
float: left;
clear: both;
width: 250px;
height: 100px;
line-height: 1.2em;
vertical-align: sub;
}

Listas

• list-style-type: estilo dos marcadores da lista
• list-style-image: estilo das imagens da lista
• list-style-position: estilo do posicionamento da lista
• list-style: estilo da lista em geral

Exemplo:
div {
list-style-type: none;
list-style-image: url("lista.gif");
list-style-position: outside;
}

div {
list-style:none outside url("lista.gif");
}

Fonte x