Montar uma página com CSS III
O corpo da página
A parte da página onde colocamos a informação principal. Criaremos uma camada independente para o corpo e colocaremos dentro o título, o texto e outros elementos que quisermos situar. Os elementos os introduzimos com as etiquetas HTML que deveriam ter em uma página básica. Logo, com CSS definiremos o estilo para o corpo e cada uma das etiquetas que colocamos dentro.
<div id=”corpo”>
<h1>Título da página</h1>
<p>
Neste artigo vamos conhecer a construção de páginas utilizando Folhas de estilos em cascata (CSS). Veremos como realizar este tipo de construção, junto com algumas vantagens e inconvenientes. Para muitos será ainda um campo para explorar. Embora não entremos em grandes detalhes, vamos tentar tornar conhecido a construção com CSS para cobrir qualquer possível defasagem por parte do leitor. Nos próximos capítulos ampliaremos a informação e ofereceremos tutoriais mais práticos.
</p>
<p>
Como foi possível aprender no Manual de CSS, as folhas de estilo em cascata ajudam a separar o conteúdo da forma, ou seja…
</p>
<div id=”navabaixo”>
<a href=”#”>Voltar</a> |
<a href=”#”>Portal</a> |
<a href=”#”>Mapa do site</a>
</div>
</div>
Vemos que o corpo tem um título, vários parágrafos e um div, incluído dentro do próprio corpo, com uma segunda barra de links que facilitam a navegação para as pessoas que chegarem ao final do scroll vertical da página.
Os estilos do corpo definem a largura, margem, margem interna, e uma cor de fundo. Ademais, define-se o atributo “float:left” para fazer com que o corpo “flutue” à esquerda. O resultado é que a camada do corpo se coloque à esquerda e o conteúdo escrito a se situe a seguir, rodeando a esta camada, à direita. (O efeito é o mesmo que se atribuímos em HTML o atributo align=left em um imagem.)
Para possibilitar a disposição em duas colunas que definimos no desenho original, vamos com que a camada da esquerda do corpo “flutue” à esquerda. Posteriormente, a camada da direita que ainda não colocamos -a lateral-, faremos que “flutue” à direita.
#cuerpo{
width:480px;
margin-left: 8px;
padding: 12px 0px 10px 0px;
background-color : #ffffff;
float:left;
}
Também se define um estilo para cada uma das etiquetas que situamos dentro do corpo:
H1{
font-size: 12pt;
}
Os cabeçalhos de nível 1, que tenham tamanho de letra 12pt.
#navabaixo{
font-weight : bold;
}
Para atribuir um negrito no div da parte inferior do corpo, que têm links para facilitar a navegação.