#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.
Comentários (0)