▪
DIV – é uma tag HTML utilizada para formatar um grande bloco,divisão, de uma página web, abrangendo textos e/ou outros elementos. Ótimo recurso para a criação de layouts em páginas web.
Para praticar o uso de configurações CSS para DIV crie, em drive local, uma pasta chamada, pratica2css, na sequencia, crie uma pasta, chamada css dentro da pasta pratica2css e em seguida abra o seu editor de pro- gramas.
A ideia é criar uma aplicação web com uma estrutura de DIVS do tipo cabeçalho, lado esquerdo, centro e rodapé. Para que possa, no futuro, desenvolver a estrutura de layout que lhe convir.
Então vamos lá! Escreva o script a seguir:
body{
margin:10px;
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; background-color:#FEE4AB; text-align:center; } div#tudo{ margin:0px auto; width:766px; height:580px; border-right:1px solid #000000; border-left:1px solid #000000;
} /* Delimita o espaço útil do conteúdo e sua página e engloba todas as outras divs. */
div#cabecalho{ width:765px; height:140;
background-color: #FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:22px;
line-height:150px; text-align:center;
border-top:1px solid #000000; border-bottom:1px solid #000000; }/*Div do cabeçalho do corpo da página*/
div#esquerda{ width:200px; height:368px; float:left;
background-color: #FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;
line-height:350px; text-align:center;
border-right:1px solid #000000;
}/*Div lateral esquerda do corpo da página*/
div#centro{ width:564px; height:370px; float:right;
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:22px;
line-height:350px; text-align:center; background-color:#ffffff; overflow:auto;
}/*Div central do corpo da página*/
div#rodape{ width:765px; height:67px; clear:both;
background-color: #FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:22px; line-height:70px; text-align:center; text-align:center; border-top:1px solid #000000; border-bottom:1px solid #000000; }/*Div do rodapé do corpo da página*/
Salve este script na pasta css que, por sua vez, encontra-se na pas- ta pratica2css, com o nome de layout1.css.
Agora abra um novo documento no seu editor de programas e es- creva o seguinte script:
<html> <head> <title>Aplicando CSS - práti- ca 2</title> <link href=”css/layout. css” rel=”stylesheet” /> </head> <body> <div id=”tudo”>
<!-- Chamar a div tudo -->
<div id=”cabecalho”>
<!-- Chamar a div cabecalho -->
DIV DO CABEÇALHO DA PÁGI- NA
</div>
<!--Fechar a div cabecalho -->
<div id=”esquerda”>
<!-- Chamar a div esquerda -->
DIV DA ESQUERDA DA PÁGI- NA
</div>
<!--Fechar a div esquerda -->
<div id=”centro”>
<!-- Chamar a div centro -->
DIV DO CENTRO DA PÁGINA </div>
<!--Fechar a div centro -->
<div id=”rodape”>
<!-- Chamar a div rodape -->
DIV DO RODAPÉ DA PÁGINA </div>
<!--Fechar a div rodape -->
</div>
<!--Fechar a div tudo -->
</body> </html>
Salve este script na pasta prati- ca2css, com o nome de index. html.
Ao executar esta página, terá como resultado uma página web com uma estrutura de div delimitando o cabeçalho, lateral esquerda, centro e ro- dapé da página.
Figura 23: Resultado layout de página com uso de div em CSS
Nestas divs você pode inserir o elemento que desejar texto, imagem, link, formulário, tabela e assim por diante, não existe restrição. Se de- sejar inserir uma imagem diretamente em uma div, por exemplo, na div cabeçalho, deve implementar o seguinte nas configurações CSS deste elemento: div#cabecalho{ width:765px; height:140; color: #FFFFFF; background-image: url(../imagens/imgempxyz.jpg); font-family:Verdana, Arial, Helvetica, sans-serif; font-size:22px;
line-height:150px; text-align:center;
border-top:1px solid #000000; border-bottom:1px solid #000000; }/*Div do cabeçalho do corpo da página*/
A seguir a relação de alguns atributos dos elementos CSS, por ordem de utilização:
Tabela 2: Atributos dos elementos CSS utilizados no estudo
Atributo Definição
margin Tamanho de todas as 4 margens da página web. font-family Tipo de fonte.
font-size Tamanho da fonte atribuído em pixels. background-color Cor de fundo ou transparência.
text-align Alinhamento do texto. color Cor de primeiro plano. text-decoration Sublinhado ou riscado. width Largura do elemento. height Altura do elemento.
border-right Largura, estilo e cor da borda da direita. border-left Largura, estilo e cor da borda da esquerda. line-height Distância entre linhas de base.
border-top Largura, estilo e cor da borda superior. border-bottom Largura, estilo e cor da borda inferior.
float Determina se o elemento flutua na página, se para esquerda, direita ou centro. overflow Exibição de conteúdos que são maiores do que suas molduras clear Elementos flutuantes à esquerda ou a direita de um elemento. Quer aprofundar-se mais em css? Então procure alguns bons tutoriais, como, por exemplo, em <http://pt-br.html.net/tutorials/css/>.
DICA
Quando desenvolver uma solução para web site, du- rante o desenvolvimen- to, teste os resultados em mais de um navegador, por exemplo, Mozilla Firefox e Internet Explorer, pois existe uma boa diferença quanto a resolução visual entre eles, e também em relação a outros navegadores, é que o Firefox e o IE são os mais populares.
A medida que ajustes devem ser efetuados, faça-os para que não haja muita diferença da apresen- tação visual nos dois navegadores. Assim, você chega ao fim dos es- tudos desta seção sobre CSS. Que os fundamentos repassados aqui possam ajudá-lo no desenvolvi- mento da apresentação visual de suas aplicações web. Prepare-se para um novo percurso de apren- dizagem que traz mais um assunto extremamente importante para o seu desenvolvimento técnico.