| 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. | ||
