Atributos das folhas de estilo

Explicação e exemplos dos distintos atributos das CSS.

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 26/7/04

Valorize este artigo:
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.





Comentários do artigo
Foi enviado 1 comentário ao artigo
1 comentário não revisado
0 comentários revisados

Usuários :    login / registro
Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato