[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo.

Antes de querermos fazer uma personalização em um código ou criar, é necessário saber os códigos de personalização. Eles servem para você regular o tamanho, cor, fonte, posição, etc... Então observe os códigos abaixo e comece a estuda-los para que saiba como usar eles.

Neste tópico vou ensinar:
Como mudar um fundo a partir de imagens personalizadas feito por você.
Propriedades de repetir ou não imagens.
Definir tamanho (Largura e Comprimento).
Como mudar um fundo a partir de código de cores.

Então vamos lá.

Primeiro Vamos criar um CSS de texte por exemplo:

Código:


#teste {

}


Agora vamos adicionar o comando o comando para inserirmos a imagem, ele sera:

Código:

background: url(ENDEREÇO DA IMAGEM);

Mais só isto pode fazer com que a imagem se repita ao longo da página, então devemos adicionar o comando para ela repetir ou não.

Observe os comandos:

repeat-x = Faz com que a imagem se repita apenas na horizontal.
repeat-y = Faz com que a imagem de repita apenas na vertical.
repeat = Faz com que a imagem se repita verticalmente e horizontalmente.
no-repeat = Faz com que a imagem não se repita em nem uma posição, ela será unica.

Escolha qual das opções acima você quer, eu escolhi para que ela não se repita (no-repeat) e adicione depois do link da sua imagem como mostra abaixo:

Código:

background: url(LINK DA IMAGEM) [color=red]no-repeat[/color];

A área vermelha você coloca o estilo desejado.

Pode ser que a imagem não esteja do tamanho desejado, então vamos agora definir o tamanho delas. Para isso utilizaremos o comando height para medir a altura e width para medir o comprimento. Observe:

width: 600px;
height:250px;

A cor laranja você coloca a largura da sua imagem e na cor verde você coloca a altura da sua imagem. Na frente da medida observe que esta escrito 'px'. Ela é a medida utilizada para códigos da internet. Também podemos usar o cm (centimetro) e dentre muitas outras que existem. Mais como estamos apenas começando vamos utilizar a medida em 'px'.

Agora que terminamos o CSS para adicionar a imagem vamos ver como ele ficou montado?

#teste {
background: url(LINK DA IMAGEM) no-repeat;
width:600px;
height:250px;
}

---

---

Agora tem um outro geito de fazer esta personalização, que será feita sem usar imagem apenas colocando uma cor no lugar dela.

O código aprendido acima já ira adiantar este processo, iremos apenas editar o comando background. Acima ele esta está assim:

background: url(LINK DA IMAGEM) no-repeat;

A parte colorida de violeta deve ser excluida sobrando apenas isto:

Código:

background: ;

Agora escolha abaixo a cor que você deseja utilizar e copie apenas o código que se localiza em 'Hex':
<embed height="350px" name="plugin" src="http://www.2createawebsite.com/build/color.swf" type="application/x-shockwave-flash" width="350px"></embed>

A cor que eu escolhi foi o preto que tem o código #000000 Cada cor escolhida é um código diferente. Então pegue seu código e cole na frente de background ficando assim:

background: #000000;
A parte azul você substitui pelo código da sua cor que você obteve.

Vamos dar Continuidade ao Tutorial Parte 1.

Então eu irei comentar um pouco sobre os códigos de posicionamento. Esses comandos são: Margin, Padding, Align.

1º Etapa: Propriedades do Margin.

Propiedade	Descrição
margin-left	Introduz uma margem a esquerda.
margin-right	Introduz uma margem a direita.
margin-top	Introduz uma margem no topo.
margin-bottom	Introduz uma margem abaixo.
margin	Introduz uma margem que envolve todos os lado no código utilizado.

Legenda da cor da letra:
A cor Azul representa o tipo de margem (margin);
A cor Laranja representa o valor de espaço que terá na margem (margin);
A cor Vermelha representa o formato de medida que pode ser: px, cm, em, auto e %;


Exemplo 1 - Em formato CSS: margin-left

#Defin {
width: 300px;
height: 100px;
border: #000000 2px solid;
margin-left:210px;
}

---

Exemplo 2 - Em formato CSS: margin-right

#Defin {
width: 300px;
height: 100px;
border: #000000 2px solid;
margin-right:210px;
}

---

Exemplo 3 - Em formato CSS: margin-top

#Defin {
width: 300px;
height: 100px;
border: #000000 2px solid;
margin-top:210px;
}

---

Exemplo 4 - Em formato CSS: margin-bottom

#Defin {
width: 300px;
height: 100px;
border: #000000 2px solid;
margin-bottom:210px;
}

---

Exemplo 5 - Em formato CSS: margin

#Defin {
width: 300px;
height: 100px;
border: #000000 2px solid;
margin:210px;
}