Div

• É um container (uma caixa) responsável por agrupar

diferentes tipos de conteúdos, como: texto, áudio, vídeo,

imagens e etc.

• Trabalha juntamente com o css para promover melhor

estruturas ao site.

• Substituto Das tabelas.

• Declaração de uma div. Exemplo: <div><div>

Diferenças entre tabelas e div

ID e Class

• Para possibilitar uma organização melhor da página e da seleção de elementos por CSS,

podemos utilizar classes e/ou ids para identificar tags.

• ID = Identificação única: só pode ser utilizada uma vez no documento inteiro. Normalmente é

utilizada para identificar elementos estruturais da página. Exemplo: <div id=“topo”></div>.

No CSS é representada por um símbolo de jogo da velha seguido de seu nome dado.

• Class = Você pode usar a mesma classe para vários elementos, Você pode usar várias classes

para um mesmo elemento. Exemplo :

– <div class=“imagem”></div>. No CSS é representada por um símbolo de ponto seguido

de seu nome dado.

Atenção Jovens: Seu código não vai passar pelo validador se você usar o mesmo ID em mais de um elemento. Validação deve ser importante para todos nós, de modo que, por si só, é algo muito importante. Adiante, mais razões pelas quais um ID deve ser único.Validador: http://validator.w3.org/

Declaração de class e id no css

Algumas propriedades do css

• Border = Utilizada para aplicar a borda no css, diferente do border do html, este você adiciona três valores,

sendo grossura, cor e visibilidade. Exemplo: border:1px black solid;

• Background-color = Utilizada para dar a cor de fundo a determinada id ou class. Exemplo: background-

color:blue;

• Width: Largura. Exemplo: width:200px;

• Height: Altura. Exemplo: height:200px;

• Background-image: url(‘imagem.jpg’) = Utilizada para adicionar a imagem de fundo. Similar ao background

do Html. Algumas propriedades que acompanham o bakcground-image.

– Background-size: tamanho da imagem de fundo. Exemplo: background-size: 100%. Pode ser utilizado tanto

porcentagem quanto pixel.

– Background-repeat: Propriedade que se refere se esta imagem irá se repetir ou não. Ela se repete no eixo X ou Y.

Exemplo: background-repeat:no-repeat;

• Margin – Espaçamento do elemento e outro. Existem cinco formas de serem feitas as margin.– Margin: 0 auto - Centralizar o elemento (div).– Margin-left – Movimentar o elemento para direita.– Margin-right - Movimentar o elemento para esquerda.– Margin-top – Movimentar o elemento para baixo.

– Margin-bottom - Movimentar o elemento para cima.

• Padding – Possuem valores similares ao margin, porém sua diferença é que seu espaçamento é interno, ou seja, irá empurrar o conteudo que estiver dentro do elemento que receber o padding. Atenção: Padding deixará a maior pois se trata de um acolchoamento interno.

• Float - O Float é uma propriedade que faz o objeto flutuar à esquerda ou à direita do restante do conteúdo. Exemplo:

Material Para estudo

• http://www.maujor.com/tutorial/sintaxetut.php

• https://codando.wordpress.com/2008/03/16/tutorial-intermedirio-de-css-

seletores-classe-e-id/

• http://wpmidia.com.br/desenvolvimento-web/11-regras-css-todo-

desenvolvedor-web-deve-saber/