No post de introdução ao CSS falei bastante sobre suas propriedades,
mas não dei nenhuma como exemplo, esse post é especial para a explicação de
muitas delas que são bastante importantes.
Bordas:
border-top-width:
/* Define a largura da borda superior. */
border-right-width:
/* Define a largura da borda direita. */
border-bottom-width:
/* Define a largura da borda inferior. */
border-left-width:
/* Define a largura da borda esquerda. */
border-width:
/* Define a largura de todos os lados da borda. */
border-top-color:
/* Define a cor da borda superior. */
border-right-color:
/* Define a cor da borda direita. */
border-bottom-color:
/* Define a cor da borda inferior. */
border-left-color:
/* Define a cor da borda esquerda. */
border-color:
/* Definição da cor geral de todos os lados da borda. */
border-top-style:
/* Estilo da borda superior. */
border-right-style:
/* Estilo da borda direita. */
border-bottom-style:
/* Estilo da borda inferior. */
border-left-style: /*
Estilo da borda esquerda. */
border-style:
/* Estilo geral da borda. */
border-top:
/* Aplica o estilo somente à borda superior. */
border-right:
/* Aplica o estilo somente à borda direita. */
border-bottom: /*
Aplica o estilo somente à borda inferior. */
border-left: /*
Aplica o estilo somente à borda esquerda. */
border: /*
Define uma borda que abrangerá todos os lados do elemento. */
Margens:
margin-top:
/* Margem superior. */
margin-right:
/* Margem direita. */
margin-bottom:
/* Margem inferior. */
margin-left:
/* Margem esquerda. */
margin:
/* Margem aplicada a todos os lados. */
padding-top:
/* Margem interna aplicada à parte superior do elemento. */
padding-right:
/* Margem interna aplicada à parte direita do elemento. */
padding-bottom:
/* Margem interna aplicada à parte inferior do elemento. */
padding-left:
/* Margem interna aplicada à parte esquerda do elemento. */
padding:
/* Margem interna aplicada a todos os lados. */
Cores
e fundo:
color: /* Cor. */
background-color:
/* Cor do plano de fundo. */
background-image: /* Imagem de plano de fundo. */
background-repeat:
/* Repetição da img, opções: no-repeat
| repeat | repeat-x | repeat-y */
background-attachment:
/* Especifica se o background rola ou não junto ao texto: fixed | scroll */
background-position:
/* Posicionamento do plano de fundo. */
background:
/* Elemento de plano de fundo. */
Fontes tipográficas:
font-family:
/* Especifica uma linha de várias
fontes. */
font-style:
/*Estilos da fonte: italic
| normal */
font-variant: /*
Se terá ou não variação tipográfica, podendo ser: small-caps (capslook pequeno) | normal*/
font-weight:
/* Expessura (peso) da fonte: bold
| normal */
font-size:
/* Tamanho da fonte. */
font:
/* Fonte. */
Texto:
text-indent:
/* Identação, referente ao tab para a primeira letra do parágrafo */
text-align:
/* Alinhamento do texto: center
| left | right | justify */
text-decoration: /* Decoração do texto: underline | overline | nome */
letter-spacing:
/* Espaçamento entre os caracteres. */
word-spacing:
/* Espaçamento entre as palavras. */
text-transform:
/* Transformação do texto. Maiúsculas ou minúsculas. */
Modelos de formatação
visual:
float:
/* Flutua o elemento para uma direção específica. Podendo ser: left | right */
clear:
/* Ao flutuar um elemento, essa ação pode refletir em algum outro element,
desalinhando-o. Para impedir isso, usamos o clear para ‘limpar’ esses efeitos e
ele permanecer no lugar.*/
width:
/* Largura. */
height:
/* Altura. */
line-height:
/*Tamanho relativo à fonte (em), seria algo como a expessura do
espaçamento da linha*/
vertical-align:
/* Alinhamento vertical. */
Listas:
list-style-type:
/* Tipo dos ícones da lista. */
list-style-image:
/* Imagens como ícones da lista. */
list-style-position:
/* Onde o ícone será posicionado: outside
| inside. */
list-style:
/* Definição de que a lista terá um estilo. */
