Tanto para praticar em sua aprendizagem como para trabalhar com as CSS o melhor é dispor de uma tabela onde se vejam os distintos atributos e valores de estilos que podemos aplicar às páginas web.
Aqui você pode ver a tabela dos atributos CSS, e tê-la a mão quando for utilizar as CSS.
| 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.
|
A especificação de estilos CSS é muito ampla, mas acredito que a imensa maioria está aqui definida, mas claro, com a seleção dos mais importantes.