C:\Users\Beatriz\Desktop\estilo.

css

quarta-feira, 1 de outubro de 2014 11:16

*{margin:0px;
padding:0px;
}
/* Utilizo essas Tags para centralizar do o contedo na pgina e remover os
as DIV */

espaos entre

body {
font-family:Arial, Helvetica, sans-serif; /*Tipo da fonte*/
color:#FFF; /* cor da fonte */
font-size:12px; /* tamanho da fonte */
background-color:#999; /* cor do background */
}
/* Aqui se define a formatao da pgina toda costumo apenas formatar background, cor e
tamanho da Font */
.cabecalho{
width:980px;
/* Largura */
height:262px;
/* Altura */
margin:auto;
/* Margin deixa a div centralizada na pgina */
}
/* Aqui defino o Tamanho do topo do site Logo Banner e Menu */
.logo{
width:410px;
height:220px;
float:left;
}

/* Faz com que a DIV se ajuste sempre do lado esquerdo */

/* Float funciona da seguinte forma no caso o "left" ele ajusta os elementos do lado
esquerdo, um ao lado do outro, quando no houver espao suficiente para o elemento ele o
joga pra baixo ainda ajustado a esquerda */
.banner {
width:570px;
height:220px;
float:left;
}
.menu {
width:980px;
height:32px;
padding-top:10px; /* cobre um espao no topo do elemento Obs: o menu tem 42px de altura
quando insiro padding de qualquer lado, preciso retirar os Px de padding para manter o
tamanho do menu. Nesse exemplo seria 42px de height , ento padding top
10px height
= 32
*/
background-image:url(../img/bg-menu.jpg); /* Inseri uma imagem de background no elemento
*/
background-repeat:no-repeat; /* Faz com que o Back ground no se repita */
float:left;
}
.menu a{ /* Aqui editamos todos os "A" (links ) do menu, ento .menu a = dentro de "menu"
todos os "A" seguem a formatao */
text-decoration:none;
font-size:16px;
padding-left:15px;

/* Tira o sublinhado do link */

-1-

C:\Users\Beatriz\Desktop\estilo.css

quarta-feira, 1 de outubro de 2014 11:16

color:#CCC;
}
/* Termina aqui o cabealho
-------------------------------------------------------------------------------------------------------------------------------------- */
/* contedo ( Meio do site site onde fica a maior parte da informao )
------------------------------------------------------------------------------------- */
.conteudo {
width:980px;
height:408px;
background-color:#CCC;
color:#000;
margin:auto;
}
.conteudo h1{
color:#06C;
padding-left:15px;
padding-top:10px;
}
.conteudo p{
padding-left:15px;
padding-top:10px;
font-size:14px;
}
.texto{
width:650px;
height:auto; /* O height fica com o tamanho indeterminado, ira depender do conteudo que
estiver dentro, se tratando de texto bom utilizar height auto pois os textos podem
variar de tamanho */
float:left;
}
.foto{
width:330px;
height:auto;
float:left;
}
.foto img{
padding:15px; /* as imagens dentro de foto tero um prenchimento de 15px de cada lado */
}
/* Termina aqui o contedo
------------------------------------------------------------------------------------------------------------------------------------------------------- */
.rodape{
width:965px;
height:28px;
background-image:url(../img/bg-rodape.jpg);
background-repeat:no-repeat;
padding-top:70px;
padding-left:15px;
margin:auto;
}
-2-