margin:
Formata os valores da margem.
Valores:
- length: onde podem ser expresso valores em px exatos(pixels);
- %: onde podem ser expresso valores em porcentagem aonde varia com a pagina;
- px: Define um valor em pixels
- 4 valores: 1px 2px 3px 4px(top, rigth, buttom, left)
- valore: 1px (Geral)
Exemplo:
html-> <div id="exemplo"> </div>
css-> #exemplo{
margin-left:10px;
}
background-color
define uma cor de fundo de um elemento.
Valores:
- cor-#: Define uma cor através do sistema HexaDecimal.
- rgba - a: Da uma ideia de (OPACITY) transparência.
Exemplo:
html-> <div id="exemplo"> </div>
css-> #exemplo{
background-color:rgba(255, 248, 220, 1);
/* ou background-color:#F0FFF0; */
}
background-image
Define uma ou mais imagens de fundo para um elemento.
Valores:
- url: define o local aonde se encontra a imagem.
Exemplo:
TEXTO SOBRE A IMAGEM
IMAGEM DE FUNDO
html-> <div id="exemplo"> </div>
css-> #exemplo{
background-image:url("../imagens/Sid.jpg");
height:130px;
width:300px;
}
color
define a cor da letra.
Valores:
- cor-#: Define uma cor através do sistema HexaDecimal.
- rgba - a: Da uma ideia de (OPACITY) transparência.
Exemplo:
html-> <div id="exemplo"> </div>
css-> #exemplo{
color:#FF0000; /* ou color:rgba(149,157,67, 0.1);*/
}
height
Define a altura de um elemento
Valores:
- tamanho- px: Define um valor em pixels ou em % varia com a fixação da tag
Exemplo:
html-> <div id="exemplo"> </div>
css-> #exemplo{
background-color:#FF0000;
height:150px;
width:50px;
}
width
Define a largura de um elemento
Valores:
- tamanho- px: Define um valor em pixels ou em % varia com a fixação da tag
Exemplo:
html-> <div id="exemplo"> </div>
css-> #exemplo{
background-color:#FF0000;
height:30px;
width:250px;
}
box-shadow
Define a sombra na borda.
Valores:
- Tamanho da borda(lados), Tamanho da borda(cima,baixo), Tamanho do sombreado: Definido em pixels
- Cor: Define uma cor, através do sistema HexaDecimal,rgba ou em ingles.
Exemplo
html-> <div id="exemplo"> </div>
css-> #exemplo{
box-shadow:1px 1px 10px #F99D43;
height:120px;
width:600px;
}
padding
Ajeita a margem de acordo com as coordenadas.
Valores:
- top:topo - right:direita - botton:baixo- left:esquerda;
padding: 5px 0px 0px 10px;
top right botton left(sentido horario);
Exemplo
#exemplo{
padding:5px 0px 0px 10px;
}
float
Define um modo de flutuação.
Valores:
- left: esquerda
- right: direita
Exemplo:
html-> <div id="exemplo"> </div>
css-> #exemplo{
height:150px;
width:50px;
background-color:#FF0000;
float:right;
}
overflow
especifica o que acontece se o conteúdo excede a caixa de um elemento(arruma).
Valores:
- hidden-Apenas esconde o conteúdo atras da tag caso tenha excedido o tamanho.
- scroll-Cria duas barras de rolarem _| mesmo que nao sejam necessárias.
- auto-cria uma barra de rolagem conforme for necessário.
Exemplo:
html-> <div id="exemplo"> </div>
css-> #exemplo{
height:500px;
width:500px;
overflow:scroll;
}
text-align
especifica o alinhamento horizontal ( _ ) do texto em um elemento.
Valores:
- left-Define o alinhamento inicial do lado esquerdo.
- right-Define o alinhamento inicial do lado direito.
- center-Define o alinhamento inicial no centro.
- justify-Define o alinhamento exatamente entre o limete dos espaçamentos.
Exemplo:
html-> <div id="exemplo">
TEXTOOOOOO<br />
texto<br />
TEXtoOO
</div>
css-> #exemplo{
height:70px;
width:200px;
text-align:right;
}
TEXTOOOOOO
texto
TEXtoOO
text-decoration
especifica a decoração adicionada ao texto.
Valores:
- none: Sem decoração.
- overline: Sublinhado em cima.
- underline: Sublinhado.
- line-through: Texto riscado no meio.
Exemplo:
TEXTOOOOOOOOOO
TEXTO
html-><div id="exemplo"> TEXTOOOOOOOOOO <br /> TEXTO </div>
css->#exemplo{
text-decoration:line-through;
}
font-family
Especifica o tipo de letra para um elemento.
Valores:
- Estilo da letra :wingdings , webdings,comic sans ms ,Georgia,Palatino Linotype, Book Antiqua, Times New Roman, Arial,Helvetica, Arial Black, Impact, Lucida Sans Unicode, Tahoma, Verdana, Courier New, Lucida Console, initial.
- Comece com a fonte que você quer, e depois com uma família genérica, para deixar o navegador escolher uma fonte semelhante na família genérica se não houver outros tipos de letra disponíveis.
Exemplo:
TEXTOOOOOOOOOO
TEXTO
html-> <div id="exemplo"> TEXTOOOOOOOOOO <br /> TEXTO </div>
css-> #exemplo{
font-family:webdings;
}
font-size
Define o tamanho de uma fonte
Valores:
- Tamanhos escritos: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger.
- Tamanhos em pixels ou %
Exemplo:
TEXTOOOOOOOOOO
TEXTO
html-> <div id="exemplo"> TEXTOOOOOOOOOO <br /> TEXTO </div>
css-> #exemplo{
font-size:x-large;
}
font-weight
Define como as letras devem ser; grossas ou finas.
Valores:
- Podem ser dados em: normal, bold, bolder, lighter, 100 a 900(100 em 100), initial.
- A numeração 400 e 700 mudam alguma coisa o resto não.(!VARIA CONFORME O NAVEGADOR!)
Exemplo:
TEXTOOOOOOOOOO
TEXTO
html-> <div id="exemplo"> TEXTOOOOOOOOOO <br /> TEXTO </div>
css-> #exemplo{
font-weight:bold;
}
font-style
Especifica o estilo da fonte para um texto.
Valores:
- Tipos: normal, italic, oblique, initial.
Exemplo:
TEXTOOOOOOOOOO
TEXTO
html-> <div id="exemplo"> TEXTOOOOOOOOOO <br /> TEXTO </div>
css-> #exemplo{
font-style:italic;
}
border
Define uma borda para um elemento.
Valores:
- Espessura- px define o tamanho em pixels.
- Tipo: solid(solido), dotted(pontilhado) entre outros.
- Cor: define a cor(#, rgba ou inglês).
Exemplo:
html-> <div id="exemplo"> </div>
css-> #exemplo{
height:130px;
width:510px;
border:2px dotted #FF0000;
}
border-collapse
Define se as bordas da tabela estarão recolhidas em uma única fronteira ou separado como em HTML padrão.
Valores:
- colapse: junta as bordas possíveis de se encontrarem.
- separate: separa as bordas possíveis de estarem juntas.
Exemplo:
html-> <table width='500px'>
<tr>
<th colspan=2>Exemplo 0</th>
</tr>
<tr>
<td>Exemplo: A</td>
<td>Exemplo: B</td>
</tr>
</table>
css-> table , td, tr, th{
border:1px solid #FDFDFD;
border-collapse:collapse;
}
Exemplo 0 |
Exemplo: A |
Exemplo: B |
border-radius
Cria uma borda redonda.
Valores
- Espessura- px: cria um elemento em pixels
Exemplo
html-> <div id="exemplo"> </div>
css-> #exemplo{
height: 130px;
width: 130px;
border: 2px solid #FF0000;
border-radius: 65px;
}
html-> <div id="exemplo"> </div>
css-> #exemplo{
height: 130px;
width: 130px;
border: 2px solid #FF0000;
border-radius: 20px;
}
Cor
Em quaisquer lugar de formatação de cor, as cores podem ser definidas em Hexadecimal , rgba ou pelo nome em !inglês!(!VARIA CONFORME O NAVEGADOR!).