#Continuação

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

FONTES - FONTExemplos

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;

CSS, folhas de estilos.

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

absolutourl(mármol.gif) ;

background-image:

url(http://www.x.com

/fondo.gif)background-image:

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;CSS,

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