Upload
cotta421
View
40
Download
0
Embed Size (px)
Citation preview
5/20/2018 CSS 06 Posicionamento Layout
1/48
CSS Folha de Estilo em CascataUnidade 6 Posicionamento e Layout
Curso: Auxiliar de Web DesignCarga horria: 30h/a
Professor Regis Pires Magalhes
http://sites.google.com/site/ifpiregis
5/20/2018 CSS 06 Posicionamento Layout
2/48
A disciplina
Unidades
1. Fundamentos de CSS
2. Textos, Fontes e Espaamentos3. Cores e background
4. Listas, Menus e Links
5. Tabelas e Formulrios
6. Posicionamento e Layout
5/20/2018 CSS 06 Posicionamento Layout
3/48
Crditos
Grande parte desta apresentao baseou-se nasvdeo-aulas de CSS da Universidade XTI.
O livro Use a Cabea! HTML com CSS eXHTML tambm serviu de embasamento paraa construo desta apresentao: FREEMAN Eric & FREEMAN Elisabeth. Use a
Cabea! HTML com CSS e XHTML. Alta Books, 1Edio, 2006.
5/20/2018 CSS 06 Posicionamento Layout
4/48
Fluxos Fluxo
Forma como so dispostos na pgina os elementos embloco ou inline.
Fluxo Normal
Elementos em bloco Fluem de cima para baixo, com uma quebra de linha entre os
elementos.
Por padro, cada elemento em bloco ocupa a largura inteira dajanela do navegador.
Elementos em linha Fluem dentro do elemento de bloco do topo esqueda at o
fundo direita da pgina.
Se mais de uma linha for necessria, o navegador cria umanova linha e expande o elemento em bloco verticalmente para
conter os elementos inline.
5/20/2018 CSS 06 Posicionamento Layout
5/48
Fluxos
Fluxo Float
Elementos saem do fluxo normal e podem serdispostos esquerda ou direita.
Elementos em linha respeitam os limites de umelemento float e fluem ao redor dele.
Posicionamento absoluto
Os elementos assim definidos saem do fluxonormal e so posicionados de acordo com osvalores definidos.
5/20/2018 CSS 06 Posicionamento Layout
6/48
Dica
Colocar uma borda ao redor dos elementos facilita aobservao de como funciona o posicionamento.
5/20/2018 CSS 06 Posicionamento Layout
7/48
position - propriedades
static (padro) Posiciona o elemento no fluxo normal da pgina e no permite ajustes
externos.
absolute
Posiciona o elemento em qualquer local da pgina.
Posio relativa s laterais da pgina ou ao primeiro elemento posicionado(no static) no qual esteja contido.
O espao original do elemento liberado para ocupao dos demais elementos.
fixed
Posiciona o elemento relativo janela do navegador e no move quando ocorre
rolagem da pgina. relative
O elemento colocado em sua posio normal na pgina e, depois, deslocadode acordo com os valores definidos, deixando vazio o espao onde ele ficaria.
Esse espao passa a ser ocupado pelos demais elementos.
inherit
Valor da posio herdado do elemento pai.
5/20/2018 CSS 06 Posicionamento Layout
8/48
position
As propriedades top, left,bottom e right so usadas paraposicionar elementos nas posies absolute, fixed erelative.
tope left so mais usadas.
5/20/2018 CSS 06 Posicionamento Layout
9/48
position
absolute
Corre com os elementos da pgina em caso derolagem de tela.
5/20/2018 CSS 06 Posicionamento Layout
10/48
position
fixed
Semelhante ao absolute.
A diferena que ele fica fixo, mesmo em caso derolagem de tela.
5/20/2018 CSS 06 Posicionamento Layout
11/48
position
fixed
5/20/2018 CSS 06 Posicionamento Layout
12/48
position
fixed
5/20/2018 CSS 06 Posicionamento Layout
13/48
z-index Elementos posicionados (absolute, relative ou
fixed) podem ser colocados em camadassobrepostas umas sobre as outras atravs dapropriedade z-index.
Permite definir a ordem de posicionamento doselementos em uma pilha.
Assim possvel definir que um elemento fique nafrente ou atrs de outro.
O elemento que usa z-index no pode estar usandoo posicionamento padro (static).
Quando maior o valor, mas frente o elementofica (mais prximo da tela).
5/20/2018 CSS 06 Posicionamento Layout
14/48
z-index
Valores possveis:
auto(padro)
Valor igual ao dos elementos pais.
valor
Ordem do elemento na pilha.
Nmeros negativos so permitidos.
inherit
z-index herdado do elemento pai.
5/20/2018 CSS 06 Posicionamento Layout
15/48
z-index
Exemplo:
img {
position:absolute;left:0px;
top:0px;
z-index:-1;
}
5/20/2018 CSS 06 Posicionamento Layout
16/48
float
Faz com que os elementos flutuem na pgina de acordocom determinada poltica
O mesmo design pode ser obtido usando elementosposicionados de forma absoluta ou float.
Posicionamento float uma soluo flexvel para layoutsmulti-colunas e permite que elementos limpem elementosao seu lado.
Funciona para o elemento onde for declarada.
Box retirado da sua posio normal do fluxo dodocumento.
O elemento seguinte ocupa a vaga onde estava oelemento que est usando float.
5/20/2018 CSS 06 Posicionamento Layout
17/48
float
Um elemento float normalmente deve ter uma largura(width) especfica declarada com um valor diferente deauto.
Valores possveis: left
O elemento flutua para a esquerda.
right
O elemento flutua para a direita
none(padro)
O elemento no flutua e ser exibido de acordo com o fluxonormal do navegador.
inherit
O valor deve ser herdado do elemento pai.
5/20/2018 CSS 06 Posicionamento Layout
18/48
float
Exemplo:
p {
float: left;
}
Flutuar para a esquerda.Deixa elementos um ao lado do outro.
5/20/2018 CSS 06 Posicionamento Layout
19/48
float
Exemplo:
img {
float: right;
}
Flutuar a imagem para a direita dentro do elementoonde ela est inserida.
5/20/2018 CSS 06 Posicionamento Layout
20/48
float
Exemplo:
span.destaque {
width: 40%;
float: right;
background-color: #888;
border: 1px solid black;}
5/20/2018 CSS 06 Posicionamento Layout
21/48
clear
Especifica que nenhum elemento float possaficar esquerda ou direita (ou ambos) de umelemento em bloco.
O elemento com essa propriedade ser movidopara baixo at se livrar do elemento em bloco aoseu lado.
5/20/2018 CSS 06 Posicionamento Layout
22/48
clear
Valores possveis: left No permite elementos float do lado esquerdo.
right
No permite elementos float do lado direito. both
No permite elementos float em nenhum lado(esquerdo ou direito).
none(padro) permite elementos float em ambos os lados
(esquerdo e direito)
inherit
Valor herdado do elemento pai.
5/20/2018 CSS 06 Posicionamento Layout
23/48
Layout
Dividir a pgina em reas usando o elemento divdo HTML.
Cada rea deve ter um nome bem representativoe no vinculado a informaes sobre o estilo ouposicionamento a ser aplicado.
O estilo e o posicionamento podem ser
modificados e o nome dado pode perder o sentidooriginal.
Exemplos de bons nomes:
geral, container, menu, conteudo, destaque, rodape,footer, blogs, topo, centro, center, etc.
5/20/2018 CSS 06 Posicionamento Layout
24/48
Layout
Estruturar as reas que esperamos no nossolayout.
5/20/2018 CSS 06 Posicionamento Layout
25/48
Classificao dos layouts Nmero de colunas
Largura da pgina
Fixa A largura fixa e no se expande ou se encolhe de acordo com
a janela do navegador.
Melhor controle do design.
Lquida O contedo da pgina se expande para se ajustar pagina de
acordo com as dimenses da janela do navegador. Elstica
A largura fixa, mas as margens se expandem ou se encolhemde acordo com a janela do navegador.
Normalmente posiciona o contedo no centro da pgina.
5/20/2018 CSS 06 Posicionamento Layout
26/48
Layout de largura fixa
#container {
border: 1 px solid black;
width: 500px;}
5/20/2018 CSS 06 Posicionamento Layout
27/48
Layout de largura lquida
#container {
border: 1 px solid black;
width: 80%;min-width: 300px;
}
5/20/2018 CSS 06 Posicionamento Layout
28/48
Layout de largura lquida
* {
font-size: 14px;
}
#container {
border: 1 px solid black;
width: 40em;
}
5/20/2018 CSS 06 Posicionamento Layout
29/48
Centralizao do layout
#container {border: 1 px solid black;
width: 80%;
margin: 0 auto;}
#container {
border: 1 px solid black;width: 500px;
margin: 0 auto;
}
5/20/2018 CSS 06 Posicionamento Layout
30/48
Exerccio
5/20/2018 CSS 06 Posicionamento Layout
31/48
Exerccio
5/20/2018 CSS 06 Posicionamento Layout
32/48
Construo de layouts
Construa cada passo por etapas bem definidas eao concluir, teste em diferentes navegadores.
Desenvolva para os navegadores modernos edepois adapte para os antigos.
Na fase de desenvolvimento e testes coloque afolha de estilos na seo HEAD da pgina.
Valide seu cdigo HTML e CSS.
5/20/2018 CSS 06 Posicionamento Layout
33/48
Construo de layouts
5/20/2018 CSS 06 Posicionamento Layout
34/48
Construo de layouts
Passos:
1. Escolher os containers de layout
5/20/2018 CSS 06 Posicionamento Layout
35/48
Construo de layouts
Passos:
2. Nomear os containers
5/20/2018 CSS 06 Posicionamento Layout
36/48
Construo de layoutsPassos:
3. Criar a marcao
Page title
5/20/2018 CSS 06 Posicionamento Layout
37/48
Construo de layoutsPassos:
4. Inserir contedo
5. Posicionar os containers
body {
margin: 0;padding: 0;
background: #ddd;
}
#container {
margin: 1em auto;
width: 650px;
background: #fff;
}
#header {background: #CF3;}
#mainnav {background: #9F3; }
#menu {
float: right;
width: 165px;
background: #6F9;
}
#contents {
float: left;
width: 440px;
background: #9FC;
margin: 0 0 0 20px;
}
#footer {
clear: both;
background: #FF9;}
5/20/2018 CSS 06 Posicionamento Layout
38/48
Construo de layouts
5/20/2018 CSS 06 Posicionamento Layout
39/48
Construo de layoutsPassos:
6. Folha de estilo para impresso
5/20/2018 CSS 06 Posicionamento Layout
40/48
Construo de layouts
body {
margin: 0;
padding: 0;
font: 100% arial, hevetica, sans-serif;
color: #000;
background-color: #fff;
}
a {color: #000;
text-decoration: none;
}
#header { border-bottom: 1px solid #999; }
#header h1 { color: #000; }
#mainnav, #menu, .imagefloat, #skipmenu {
display: none; }
#menu ul {
margin-left: 0;
padding-left: 0;
list-style-type: none;
line-height: 165%;
}
#contents p { line-height: 165%; }
.blogentry { border-bottom: 1px
solid #999; }
.blogentry ul {
list-style-type: none;
text-align: right;
margin: 1em 0;
padding: 0;font-size: 95%;
}
.blogentry li {
display: inline;
padding: 0 0 0 7px;
}
#footer {clear: both;
color: #000;
text-align: right;
padding: 5px;
font-size: 90%;
border-top: 1px solid #999;
margin-top: 2em;
}
6. Folha de estilo para impresso
5/20/2018 CSS 06 Posicionamento Layout
41/48
Layout de 2 colunas
5/20/2018 CSS 06 Posicionamento Layout
42/48
Layout de 2 colunas - HTML
5/20/2018 CSS 06 Posicionamento Layout
43/48
Layout de 2 colunas - CSSdiv {
border: 1px solid black;}
#container {
width: 600px;
margin: 0 auto;
}
#header {
height: 80px;
background: #DDD;
}
#left {
float: left;
width: 130px;
background: #666;
}
#content {
float:right;width: 450px;
}
#footer {
clear:both;
background: #DDD;
}
5/20/2018 CSS 06 Posicionamento Layout
44/48
Layout de 3 colunas
5/20/2018 CSS 06 Posicionamento Layout
45/48
Layout de 3 colunas - HTML
5/20/2018 CSS 06 Posicionamento Layout
46/48
Layout de 3 colunas - CSSdiv {
border: 1px solid black;}
#container {
width: 600px;
margin: 0 auto;
}
#header {
height: 80px;
background: #DDD;
}
#left {
float: left;
width: 130px;
background: #666;
}
#content {
float:right;width: 450px;
}
#principal {
float: left;
width: 340px;
}
#right {
float: right;
width: 100px;
}
#footer {
clear:both;
background: #DDD;
}
5/20/2018 CSS 06 Posicionamento Layout
47/48
Bordas arredondadas e sombra
com CSS3
5/20/2018 CSS 06 Posicionamento Layout
48/48
Bordas arredondadas e sombra com
CSS3#container {
border: 2px solid;
width: 200px;padding: 10px;
border-radius: 10px;
box-shadow: 10px 10px 5px #888;
}