| Nome do atributo | Possíveis valores | Exemplos |
| FONTES - FONT | ||
| color | valor RGB ou nome da cor | color: #009900; color: red; |
| Serve para indicar a cor do texto. Admitem quase todas as etiquetas de HTML. Nem todos os nomes de cores são admitidos no padrão, é aconselhável então utilizar o valor RGB. | ||
| font-size | xx-small | x-small | small | medium | large | x-large | xx-large Unidades de CSS | font-size:12pt; font-size: x-large; |
| Serve para indicar o tamanho das fontes de forma mais rígida e com maior exatidão. | ||
| font-family | serif | sans-serif | cursive | fantasy | monospace Todas as fontes habituais | font-family:arial,helvetica; font-size: fantasy; |
| Com este atributo indicamos a familia de tipografia do texto. Os primeiros valores são genéricos, ou seja, os exploradores as compreendem e utilizam as fontes que o usuário tenha em seu sistema. Também podem se definir com tipografias normais, como ocorria em html. Se o nome de uma fonte tem espaços se utilizam aspas para que se entenda bem. | ||
| font-weight | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | font-weight:bold; font-weight: 200; |
| Serve para definir a largura dos caracteres, ou com outras palavras, para colocar negritas com total liberdade. Normal e 400 são o mesmo valor, assim como bold e 700. | ||
| font-style | normal | italic | oblique | font-style:normal; font-style: italic; |
| É o estilo da fonte, que pode ser normal, itálico ou oblíquo. O estilo oblíquo é similar ao itálico. | ||
| PARÁGRAFOS - TEXT | ||
| line-height | normal e unidades CSS | line-height: 12px; line-height: normal; |
| A altura de uma linha, e portanto, o espaçamento entre linhas. É uma dessas características que não se podiam modificar utilizando HTML. | ||
| text-decoration | none | [ underline || overline || line-through ] | text-decoration: none; text-decoration: underline; |
| Para estabelecer a decoração de um texto, ou seja, se está sublinhado, tachado, etc. | ||
| text-align | left | right | center | justify | text-align: right; text-align: center; |
| Serve para indicar o alinhamento do texto. É interessante destacar que as folhas de estilo permitem o justificado de texto, mesmo assim, lembre-se que não tem porque funcionar em todos os sistemas. | ||
| text-indent | Unidades CSS | text-indent: 10px; text-indent: 2in; |
| Um atributo que serve para fazer recuos ou margens nas páginas. Muito útil e novo. | ||
| text-transform | capitalize | uppercase | lowercase | none | text-transform: none; text-transform: capitalize; |
| Permite-nos transformar o texto, fazendo com que tenha a primeira letra em maiúsculas de todas as palavras, tudo em maiúsculas ou minúsculas. | ||
| FUNDO - BACKGROUND | ||
| Background-color | Uma cor, com seu nome ou seu valor RGB | background-color: green; background-color: #000055; |
| Serve para indicar a cor de fundo de um elemento da página. | ||
| Background-image | O nome da imagem com seu caminho relativo ou absoluto | background-image: url(mármol.gif) ; background-image: url(http://www.x.com/fondo.gif) |
| Colocamos com este atributo uma imagem de fundo em qualquer elemento da página. | ||
| BOX - CAIXA | ||
| Margin-left | Unidades CSS | margin-left: 1cm; margin-left: 0,5in; |
| Indicamos com este atributo o tamanho da margem à esquerda. | ||
| Margin-right | Unidades CSS | margin-right: 5%; margin-right: 1in; |
| Utiliza-se para definir o tamanho da margem à direita. | ||
| Margin-top | Unidades CSS | margin-top: 0px; margin-top: 10px; |
| Indicamos com este atributo o tamanho da margem acima da página. | ||
| Margin-bottom | Unidades CSS | margin-bottom: 0pt; margin-top: 1px; |
| Com ele indica-se o tamanho da margem na parte debaixo da página. | ||
| Padding-left | Unidades CSS | padding-left: 0.5in; padding-left: 1px; |
| Indica o espaço inserido, pela esquerda, entre a borda do elemento que contem e o conteúdo deste. É parecido ao atributo cellpadding das tabelas. O espaço inserido tem o mesmo fundo que o fundo do elemento que contem. | ||
| Padding-right | Unidades CSS | padding-right: 0.5cm; padding-right: 1pt; |
| Indica o espaço inserido, neste caso pela direita, entre a borda do elemento que contém e o conteúdo deste. É parecido ao atributo cellpadding das tabelas. O espaço inserido tem o mesmo fundo que o fundo do elemento que contem. | ||
| Padding-top | Unidades CSS | padding-top: 10pt; padding-top: 5px; |
| Indica o espaço inserido, por cima, entre a borda do elemento que contem e o conteúdo deste. | ||
| Padding-bottom | Unidades CSS | padding-right: 0.5cm; padding-right: 1pt; |
| Indica o espaço inserido, neste caso por baixo, entre a borda do elemento que contém e o conteúdo deste. | ||
| Border-color | cor RGB e nome de cor | border-color: red; border-color: #ffccff; |
| Para indicar a cor da borda do elemento da página a qual aplicamo-la. Pode-se colocar cores separadas com os atributos border-top-color, border-right-color, border-bottom-color, border-left-color. | ||
| Border-style | none | dotted | solid | double | groove | ridge | inset | outset | border-style: solid; border-style: double; |
| O estilo da bordea, os valores significam: none=nenhuma borda, dotted=pontilhado (não parece funcionar), solid=sólido, double=borda dupla, e desde groove até outset são bordas com vários efeitos 3D. | ||
| border-width | Unidades CSS | border-width: 10px; border-width: 0.5in; |
| O tamanho da borda do elemento ao qual o aplicamos. | ||
| float | none | left | right | float: right; |
| Serve para alinhar um elemento à esquerda ou à direita fazendo com que o texto se agrupe ao redor de tal elemento. Igual que o atributo align em imagens em seus valores right e left. | ||
| clear | none | right | left | clear: right; |
| Se este elemento tem a sua altura imagens ou outros elementos alinhados à direita ou à esquerda, com o atributo clear fazemos com que se coloque em um lugar onde já não tenha estes elementos ao lado que indicamos. | ||
Fonte: doislajeadosrs.com.br
Comentários