::Website Explicativo::

Css

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!).