O tutorial de hoje é a sequência do tutorial anterior, e é também o último da série de tutorias sobre CSS. Se você já tem uma noção básica não faz diferença a sequência, porém, se você deseja aprender na ordem correta, visite esta página!
Boa leitura!
ATUALIZAÇÃO (14/08/2015): Este post foi escrito com base nos tutoriais do W3C para CSS (se não me engano, esta versão é a primeira que tinha no W3C (CSS 1), ou seja, veio antes do CSS 2.1). O link de referência deste post, ou de posts seguintes desta mesma série, hoje aponta para o tutorial de CSS 2.1 ou CSS 3, logo não é mais válido. Vale lembrar que o conteúdo ainda é válido, só não é a versão mais nova!
CSS Como desenvolver um Layout Tabless
Conforme prometido, segue abaixo o código de um layout tabless. Este termo “Tabless” significa sem tabelas, ou seja, é um layout desenvolvido na semântica correta.
Os comentários sobre o layout estão na folha de estilos, que é o “esqueleto” do modelo.
Código html:
<html>
<head>
<title>
Teste 11 - Exemplo de Layout Tabless
</title>
<link href="estilo_tabless.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="all">
<div id="topo">
<h1>
Topo do Site
</h1>
</div>
<div id="nav">
<h2>
Navegação
</h2>
<h3>
Links
</h3>
<ul>
<li>
<a href="#">Maio 2006</a>
</li>
<li>
<a href="#">Abril 2006</a>
</li>
<li>
<a href="#">Março 2006</a>
</li>
</ul>
</div>
<div id="principal">
<h2>
Principal
</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend,
purus quis laoreet faucibus, ante augue malesuada mi, id rhoncus augue
lorem eget elit. Ut sollicitudin sodales purus. Phasellus libero felis,
blandit nec, commodo ut, imperdiet ut, nibh. Suspendisse potenti. Donec
ullamcorper cursus dolor.
</p>
</div>
</div>
</body>
</html>
NOTA: Ao copiar da página para um arquivo de texto, substitua os caracteres < e > por < e > respectivamente. Se fosse usar os caracteres originais (< e >) o código não seria exibido corretamente aqui no blog.
Folha de estilo (deve ser salva como estilo_tabless.css):
/* Folha de estilo do Layout */
body {
margin:0;
padding:0;
background:#ffffff;
text-align:center;
}
/* Esta regra all define o tamanho do site */
#all {
width:750px;
}
/* A regra topo define o topo do layout. A função dela no modelo é
somente definir o tamanho do topo
e colocar uma linha de divisão entre ele e o restante da página */
#topo {
height:50px;
border-width: 1 1 1 1px;
background: #000000;
}
/* Esta regra define as características da lista de links da coluna
esquerda do layout */
ul{
margin:0;
padding:0;
list-style: square;
}
/* A regra abaixo define as configurações gerais dos títulos */
h1, h2, h3 {
color:#ffffff;
font-size:1.4em;
}
/* Aqui sobrescrevemos as regras dos titulos 2 e 3 que devem ser
menores que o 1 */
h2 {
color:#000000;
font-size:1.2em;
}
h3 {
color:#000000;
font-size:1.0em;
}
#nav {
width:30%;
float:left;
border-right:dotted #000000;
border-width: 0 1 0 0px;
}
#principal {
border:dotted #000000;
border-width: 1 1 1 1px;
}
Nota: Veja que no modelo foi utilizada uma tag nova, <div>, que funciona de maneira similar à uma coluna de tabela.
Este modelo é o que existe de mais simples em termos de layouts css, mas serve de base para outros mais complexos. Para continuar os estudos eu indico o site do Maujor (que é minha fonte de consulta de CSS), o site do W3C e ainda o CSS ZenGarden (o melhor na minha opinião).
OBS: CSS não é igual HTML, apesar de não ser uma linguagem de programação é bastante complexa dada a quantidade de recursos à serem explorados.
Aqui terminamos a série de tutoriais css, se alguma dúvida bater (ou sujestão, crítica, etc) deixe um comentário!
Até a próxima!
xD
Os códigos deste post estão disponíveis em:
https://github.com/jonasvm/sdevlab-cursos/tree/master/sdevlab-css1
Contribua!
Sanoj's devLab 