Aula - Aprenda Layout Com CSS

Aprenda Layout com CSS
A propriedade "display"
display a propriedade mais importante do CSS para

controlar o layout. Cada elemento tem um valor
padro para o display dependendo de seu tipo. O
valor padro na maioria dos elementos
normalmente block ou inline.
Um elemento com valor block chamado de
elemento de nvel de bloco ou apenas elemento de
bloco.
Um elemento com valor inline sempre chamado de
elemento de linha.
display: block
<div>
div o exemplo de bloco mais comum. O elemento de

bloco sempre comea em uma nova linha e se expande
pra esquerda e direita o tanto quanto for possvel. Outros
elementos de bloco comuns so p e form, e agora no
HTML5 temos: header, footer, section e outros.
</div>
display: inline
span o elemento de linha padro.

Um elemento de linha pode preencher algum
texto dentro de um pargrafo <span>como
esse</span> sem quebrar o fluxo daquele
pargrafo.
O elemento a o elemento de linha mais
comum, j que ele utilizado para links.
display: none
Outro valor comum do display o none. Alguns

elementos especficos como o script utilizam este
valor por padro. Ele normalmente utilizado atravs
do JavaScript para esconder e exibir elementos sem
realmente os remover nem recriar.
Ele bem diferente de visibility. Marcando o display
com o valor none vai exibir a pgina como se o
elemento no existisse. Com visibility:hidden o
elemento fica invisvel, porm ele permanece
ocupando o espao em que estaria totalmente visvel.
display
Cada elemento possui um tipo padro de display.
No entanto, voc sempre poder substitu-los!
Embora no faa sentido uma div no modo de

linha, voc pode fazer isso para personalizar a
visualizao de elementos com semnticas
particulares.
Um exemplo comum aplicar display:inline no
elemento li para menus horizontais.
Criando um layout com CSS a partir do zero
Objetivo:
montar um layout assim
Identificar os
elementos estruturais
Antes de tudo, temos que identificar os elementos

estruturais do design, para ento saber como
estruturar nosso documento HTML.
A web amplamente baseada em retngulos, e ns
precisamos nos lembrar disso quando estivermos
dividindo nosso design. Essas divises principais
que ns iremos fazer vo terminar em tags <div>.
Um <div> basicamente um continer retangular, o
qual podemos posicion-lo usando CSS.
Dividindo o design
5 elementos
principais:
nav (rea de navegao principal):
A navegao primria para este
website. As imagens vo mudar on
hover (quando o cursor do mouse
estiver sobre elas).
Comprimento: 760px
Altura: 50px
header (cabealho): O cabealho

do website inclui uma imagem de
fundo (puramente por esttica) e o
nome da companhia.
Comprimento: 760px
Altura: 150px
article (contedo): nesta rea

que ficar o contedo principal
do website.
Comprimento: 480px
Altura: Pode mudar,
dependendo do contedo
aside (barra lateral): Esta ter
uma camada secundria que
no to importante quanto o
contedo principal.
Comprimento: 280px
Altura: Pode mudar,
dependendo do contedo
footer (rodap): Informaes gerais: Copyright, crditos, e algum texto

alternativo para navegao.
Este site ser tambm
Comprimento: 760px
centralizado na janela do
navegador.
Altura: 66px
index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title>Meu Site</title>
</head>
<body>
<nav>Main Nav</nav>
<header>Header</header>
<aside>
Texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.
</aside>
<article>
Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto.
</article>
<footer>Footer</footer>
</body>
</html>
Como voc vai notar no design, qualquer coisa

em nossa pgina da largura de 760px ou
menos, e nada flutua fora disso. O que ns
vamos fazer criar um continer para nossa
pgina que tenha 760px de largura e
posicionado no meio da pgina. Nossos 5
principais elementos sero colocados dentro
desse continer.
estilo.css
E isto todo o HTML que precisamos para

nosso continer. Vamos s CSS.
Crie um novo arquivo vazio e salve-o como
estilo.css.
ID e CLASS
O sinal # na frente da id diz ao navegador que

estamos selecionando uma id. Para uma classe, ns
usaramos um . Exemplo: .page-container { } no
caso de uma classe.
Um id um identificador nico que usamos para
coisas que somente ocorrero uma vez na pgina.
Ento para cabealhos, rodaps, navegadores, etc...,
ns usamos id's e para elementos que se repetem,
como links, ns devemos usar classes, que podem
aparecer mais vezes na mesma pgina.
Ns no estaremos habilitados a ver as modificaes
que so feitas a esta <div>, porque ela transparente
por padro.
Precisamos escrever uma regra CSS para

redefinir as margens e alinhamentos das tags
html e body para zero. Adicione essa regra
bem no topo do seu arquivo css:
html, body {
margin: 0;
padding: 0;
}
Os CINCO elementos principais
Ns precisamos adicionar 5 tags.

Estas tags correspondem s reas do design
que ns identificamos na parte 2.
Ns vamos inserir texto dentro das tags
somente para facilitar a identificao visual
quando visualizarmos a pgina.
HTML
<div id="page-container">
<div id="main-nav">Main Nav</div>
<div id="header">Header</div>
<div id="sidebar-a">Sidebar A</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
HTML 5
<nav>Menu de Navegao</nav>
<header>Cabealho</header>
<section>
<aside>Barra Lateral</aside>
<article>Contedo</article>
</section>
<footer>Rodap</footer>
section
devemos atribuir uma largura de 760px para esta tag.

vamos centralizar esta tag. Isto feito atribuindo suas
margens para auto. Quando as margens esquerda e direita
so atribudas para auto, elas se igualam em ambos os lados
e a div fica no centro do continer.
section {
width: 760px;
margin: auto;
background: red;
}
Remova o fundo vermelho da #page-container, e adicione uma nova regra para #mainnav. Mude o fundo da #main-nav para vermelho para que possamos v-la, e atribua
sua altura para 50px:
article {
width: 760px;
margin: auto;
background: yellow;
}
nav {
background: red;
height: 50px;
}
Note que ns no especificamos a largura da div. Isto por que,

por padro, a div vai se esticar at preencher seu continer-pai,
que neste caso, nosso body que foi configurado para 760px de
largura.
Faa a mesma coisa para a div cabealho (header), utilizando a
altura que usamos no primeiro passo. Use a cor azul para o
fundo.
header {
background: blue;
height: 150px;
}
J que estamos aqui, vamos configurar o rodap (footer). Use a cor

laranja para o fundo.
Lembre-se de que quando escrever sua folha-de-estilos, voc pode
agrup-los. Ento todos os estilos do cabealho (header) poderiam vir
juntos. Todos os estilos do rodap (footer) poderiam estar juntos, e os
estilos de navegao poderiam estar juntos. Eu tambm acho que
estruturar a folha-de-estilos similar ordem do HTML ajuda bastante.
Assim sendo, header fica prximo ao topo, footer ao final.
footer {
background: orange;
height: 66px;
}
Floats
Floats
Floats (flutuadores) pode ser um conceito enganoso para fazer voc

perder a cabea.
Basicamente um float um elemento que alinhado contra os lados
esquerdo ou direito do seu continer.
No caso deste website, ns vamos fazer flutuar (float) nossa tag
aside direita, com a largura de 280px.
aside {
float: right;
width: 280px;
background: darkgreen;
}
Adicionando contedo
Somente para o propsito de testes, substitua o texto do

contedo de article para o seguinte:
<article>
Texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto.
</article>
Note que o contedo do aside ficou

em uma linha s.
Propriedade: CLEAR
Isso no o que queremos. Ns queremos que

o contedo da div seja distribudo atravs da div
sidebar, a qual tem seu lado direito contra o lado
esquerdo da barra lateral.
Um jeito fcil de conseguir isto num layout
flutuante como esse, colocar a propriedade
que limpa os floats, pois o o article e o aside
esto 'flutuadas', no footer coloque:
clear: both;
CLEAR: BOTH
Quando um elemento tem sua propriedade clear

atribuda, se ele entrar em contato com um
elemento flutuante, ele colocado exatamente
abaixo de onde o flutuante termina. V
oc pode especificar se ele afetado somente
por flutuadores esquerdos ou direitos, neste caso
ns poderamos utilizar tanto right ou both. Ns
vamos utilizar clear: both somente por
segurana.
Menu <nav>
Trocar o texto para:
<nav>
<a href="#">Principal</a>
<a href="#">Sobre</a>
<a href="#">Servios</a>
<a href="#">Portflio</a>
<a href="#">Contato</a>
</nav>
<nav> CSS
Com CSS:
http://www.universogeek.blog.br/2012/10/tutorialaprenda-a-criar-um-menu-dropdown-com-html5-e-css3/
http://www.siteparaempresas.com.br/blog/?p=3408
http://www.betomarques.com/artigos/artigo_021.php
http://msdn.microsoft.com/pt-br/library/jj160310(v=vs.85
).aspx
Com Jquery:
http://www.webmaster.pt/76-menu-jquery-14624.html
Mais menus em CSS3:

http://lllmenu.blogspot.com.br/2010/11/30-pure
-css-horizontal-tutoriais-menus.html#.U1kbHd_7
Fz8
Footer
Alterar o rodap:
<nav id=navFooter>
<a href="#">Principal</a> <a href="#">Sobre</a> <a href="#">Servios</a> <a href="#">Portflio</a> <a href="#">Contato</a>
</nav>
Copyright &copy IF.Com Solues. <br>
Powered by IF.Com Solues.
FRAMEWORKS CSS
http://pt-br.learnlayout.com/frameworks.html
Referncias Bibliogrficas
http://pt-br.learnlayout.com/
http://www.hpmachado.com.br/tutorial-de-css/cr
iando-um-layout-com-css-a-partir-do-zero-parte
-6-12.html

Aula - Aprenda Layout Com CSS

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Aula - Aprenda Layout Com CSS

Hochgeladen von

Copyright:

Verfügbare Formate

Aprenda Layout com CSS

display a propriedade mais importante do CSS para

div o exemplo de bloco mais comum. O elemento de

span o elemento de linha padro.

Outro valor comum do display o none. Alguns

Cada elemento possui um tipo padro de display.

No entanto, voc sempre poder substitu-los!

Embora no faa sentido uma div no modo de

Criando um layout com CSS a partir do zero

Antes de tudo, temos que identificar os elementos

header (cabealho): O cabealho

article (contedo): nesta rea

footer (rodap): Informaes gerais: Copyright, crditos, e algum texto

Como voc vai notar no design, qualquer coisa

E isto todo o HTML que precisamos para

O sinal # na frente da id diz ao navegador que

Precisamos escrever uma regra CSS para

Os CINCO elementos principais

Ns precisamos adicionar 5 tags.

devemos atribuir uma largura de 760px para esta tag.

Note que ns no especificamos a largura da div. Isto por que,

J que estamos aqui, vamos configurar o rodap (footer). Use a cor

Floats (flutuadores) pode ser um conceito enganoso para fazer voc

Somente para o propsito de testes, substitua o texto do

Note que o contedo do aside ficou

Isso no o que queremos. Ns queremos que

Quando um elemento tem sua propriedade clear

Trocar o texto para:

Mais menus em CSS3:

Das könnte Ihnen auch gefallen