Criar Web, manuais e recursos para desenvolvimento web
Manuais
Programas
FAQS
Diretório
Comunidade
  Inicio > Manuais > Manual de CSS, folhas de estilo
SEÇÕES
Manuais relacionados
+Manual de CSS, folhas de estilo
Categorias
+CSS

Índice do Manual Manual de CSS, folhas de estilo
+ Introdução às CSS
+ Características e vantagens das CSS
+ Uso das CSS I
+ Uso das CSS II
+ Outra maneira de definir estilos em um arquivo externo
+ Sintaxe CSS
+ Atributos das folhas de estilo
+ Avançados truques com CSS
+ O que são as camadas?
+ Atributos para camadas
+ Problema com o posicionamento absoluto de camadas
+ Construção CSS
+ Formas de aplicar estilos em construção CSS
+ Pseudo-element em CSS
+ Definição de estilos CSS Shorthand
+ Utilizar porcentagens para tamanhos de texto com CSS
+ Por que desenhar com CSS
+ Truques CSS para não enlouquecer
+ 10 erros comuns nos CSS
+ Introdução a CSS3
+ Bordas arredondadas em CSS 3

Descrição dos capítulos

Parceiros
- CSS para Web Design
- S.O.S Designers
- Slackware-Brasil
- Crie seu Web site
- Oficina da Net
- CodigoFonte.net


Atributos das folhas de estilo

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


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.

Autoria e outras referências sobre este artigo

Manuais relacionados com este artigo
Dentro de Manual de CSS, folhas de estilo
Anterior: Sintaxe CSS

Categorias relacionadas
Através das categorias do nosso diretório podem ser encontrados outros tipos de recursos relacionados com este artigo:
+ Entrar em CSS


Comentário sem rever
Entre os comentários não revistos podem ter alguns interessantes que tenham sido enviado recentemente.
 Foi encontrado um comentário sem rever

VerVer os comentários não revistos



Sobre nós | Copyright | Anuncie | Entrar em contato <criarweb>

Hospedado por Hostnet Hospedagem de Sites