Continuamos o exercício prático para realizar a construção de uma página passo a passo com camadas e folhas de estilo em cascata. Pode-se ver o artigo anterior desta série em Montar uma página com CSS.

O cabeçalho da página

Vamos colocar a imagem da parte de cima da página em um único arquivo gráfico. É o mais cômodo para este desenho, pois o cabeçalho não tem outro motivo a não ser decoração.

<div id="cabecera"><img src="images/cabeçalho.jpg" width="700" height="106" alt="A Web do Inverno" border="0"></div>

Vemos que é uma simples imagem, mas atenção que temos que colocar o </div> em seguida de <img> sem nenhum espaço ou salto de linha, porque senão, Internet Explorer, nos introduzirá uma pequena margem debaixo da imagem, que queremos evitar.

Os atributos de estilo definidos para o cabeçalho são as dimensões da camada, que queremos que sejam as mesmas que as da imagem. Embora neste caso, poderíamos ter poupado definir estes valores porque são os que se tomaria por padrão.

#cabecalho{
height : 106px;
width: 700px;
}

A barra de navegação

Vamos com a camada utilizada para definir a barra de navegação horizontal que há debaixo do cabeçalho.

<div id="navegador">
<a href="#" class="linknav">Portal</a> |
<a href="#" class="linknav">Inverno</a> |
<a href="#" class="linknav">Dezembro a março</a> |
<a href="#" class="linknav">A chaminé</a> |
<a href="#" class="linknav">Esportes de inverno</a> |
<a href="#" class="linknav">Contato</a>
</div>

Como se pode ver, simplesmente definimos uma série de links dentro de uma camada. Há que observar que ademais os links têm uma classe, chamada "linknav", que utilizaremos para dar um estilo específico a estes links, independente do definido por padrão na página.

Ao que diz respeito à camada, define-se uma cor e uma imagem de fundo, umas margens internas (atributo padding) e uma borda, tanto para a parte de cima da camada como a de baixo.

#navegador{
background : #F5F4C3 url(images/fundonav.gif);
padding : 3px 10px 5px 10px;
border-top : 1px solid #cccccc;
border-bottom : 1px solid #cccccc;
}

Para os estilos dos links utilizamos uma classe. Para definir os estilos de cada um dos estados dos links (visitados, ativos, não visitados, etc), utilizam-se as pseudo-classes VISITED, ACTIVE, FOCUS, LINK E HOVER. Simplesmente definimos a cor dos links, a mesma para todas as pseudo-classes, menos para HOVER, que tem uma cor distinta. HOVER é o estado do link quando o ponteiro mouse está situado em cima. Neste caso, quando o mouse está em cima, mudará de cor.

A.linknav, A.linknav:VISITED, A.linknav:ACTIVE, A.linknav:FOCUS, A.linknav:LINK{
color: #494E6B;
}
A.linknav:HOVER{
color: #3F7DE3;
}

Podemos ver como fica o exercício realizado até o momento.