18/05/2022

PADRÕES PARA CONTEÚDOS WEB

*** Layout - Divs e Flexbox ***

HTML e CSS

Professora: Cristiane Maciel Rizo

cris@unoeste.br

4º Módulo: até 27/05

 Aplicação de layout HTML+CSS
 CSS Flexbox
*** Komodo Edit***
https://www.activestate.com/products/komodo-ide/downloads/edit/#

Atividade Avaliativa: Envio de Arquivo - até 27/05

1
 18/05/2022

Em CSS podemos posicionar elementos de bloco por meio do atributo position.

Possíveis valores:
 absolute

 relative

 fixed
 static

static: é o valor padrão, e indica que o posicionamento do

elemento não foi modificado e seguirá o fluxo normal.
Ignora o posicionamento.

absolute: determina que o elemento deve ficar na posição que

você mandar. O local especificado para o elemento é em relação
ao seu elemento pai que esteja em posição relativa. Se não
houver um elemento pai com posição relativa, o elemento ficará
posicionado em relação à janela.

2
 18/05/2022

relativo: determina que o elemento deve ficar posicionado de

acordo com sua posição original no fluxo normal.
 Ao usar as propriedades top, left, rigth e bottom, o
deslocamento acontece a partir de sua posição no fluxo.

fixed: determina que o elemento deve ficar fixo (em relação à

janela) na posição que você mandar, e quando a barra de rolagem é
movida, este elemento fica fixado na posição que foi definida.

Com CSS podemos posicionar elementos de bloco por meio do atributo position

#sta{width:100%;height:60px; background-color:lightblue;}
#rel{position:relative; width:200px; height:200px; top:50px; left:250px; background-
color:red;}
#abs{position:absolute; width:200px; height:200px; top:50px; left:10px; background-color:
yellow;}
#fix{position:fixed; width:200px; height:200px; top:50px; left:360px; background-
color:green;}

3
 18/05/2022

Para o posicionamento:
 Os atributos top, left, bottom e right permitem indicar o
posicionamento do elemento.
 Os atributos width e height definem a dimensão do
elemento.
 O atributo z-index define a ordem de empilhamento
(visualização) dos elementos da página, sendo sempre do
menor para o maior.

A CSS disponibiliza uma outra propriedade capaz de mudar o

posicionamento padrão de elementos a nível de bloco: float.
Por exemplo, pode ser usada para posicionar uma imagem ao lado de um
bloco de texto, como também construir layouts.
Possíveis valores: left e right.
Os valores left e right posicionam os elementos à esquerda ou à direita
de seu container sem quebrar a linha, e os outros elementos vão
contorná-lo.
Exemplo: Dois elementos de bloco com
comportamento padrão (um abaixo do outro
conforme o padrão de nível de blocos).

4
 18/05/2022

A propriedade float permite que um elemento de nível de bloco não quebre

a linha no final. O comportamento é de flutuação. O bloco pode ser
colocado a esquerda e o restante vai lhe contornar.

float: left;

Podemos “quebrar o fluxo” com a propriedade clear:both

Propriedade Significado Exemplo

width Largura da div width:1024px

height Altura da div height:500px

float Posicionar a div na esquerda ou direita Valores: left, right,

clear Utilizado em conjunto com float, força que as clear:both;

próximas divs sejam empurradas para baixo

background-color Cor de fundo da div background-color:#FFCCAA

text-align Alinha o texto dentro da div text-align:center;

overflow Configura o comportamento da div no caso Valores: visible, hidden, auto e

de ocorrer estouro de conteúdo scrool;
http://www.w3schools.com/cssref/playit.asp?filename
=playcss_overflow

z-index Define a ordem de sobreposição das divs z-index:-1 (vai para fundo de tela)

position Define regras para serem aplicadas no Valores: absolute, relative e fixed
sistema de coordenadas

left, top, bottom e Define as coordenadas para posicionamento left:0px; top:0px;

right de um div bottom:100px; right:100px;

border-style border- Propriedades relacionadas às bordas border-style: solid;

width border-color border-width:5px;
border-color:red;

5
 18/05/2022

div: topo

div: conteudo

div: principal

div: base
div: menu

<section>: Demarca uma ou várias áreas genéricas que agrupa

elementos de conteúdo dentro da página.

<header>: Demarca o conteúdo relacionado ao cabeçalho da

página ou uma sessão (não confundir com a tag <head>). Pode
ser utilizado para agrupar índices de conteúdos, campos de busca
ou até mesmo logos.

<footer>: Demarca o conteúdo relacionado ao rodapé da página

ou a uma sessão.

6
 18/05/2022

<article>: Demarca uma área de conteúdo autossuficiente: um

post, notícia, artigo, um bloco de comentários de usuários ou
apenas um bloco de texto comum dentro da página ou em uma
sessão.

<nav>: Define uma área de navegação, normalmente o menu da

página que leva a outras páginas do site. Nem todos os grupos de
links devem ser elementos nav.
<aside>: Define uma área com conteúdo adicional/complementar
(arquivos, posts, links, etc…), que está ligeramente associado ao
conteúdo principal.

Container

Itens

7
 18/05/2022

Alinhamento dos eixos

Para entender o funcionamento do Flexbox é necessário entender alguns conceitos que
dizem respeito a como os itens são distribuídos no container
O principal deles é o conceito de eixo principal e eixo transversal, que depende do valor
atribuído à propriedade flex-direction. Se essa propriedade receber o valor row ou row-
reverse (organização em linhas), o eixo principal do container será o horizontal. Já se essa
propriedade receber o valor column ou column-reverse (organização em coluna), o eixo
principal será o vertical.
Consequentemente isso definirá qual é o eixo transversal. Se o principal for o vertical, o
transversal será o horizontal e vice-versa.

Propriedades do Container (flex-container):

• display
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content
Propriedades dos Itens (flex-itens):
• order
• flex-grow
• flex-shrink
• flex-basis
• align-self
https://www.w3schools.com/css/css3_flexbox.asp

8
 18/05/2022

section
{ font: 48px calibri;
color: white; <body>
<section>
display:block;
<div>A</div>
} <div>B</div>
section > div <div>C</div>
{ <div>D</div>
<div>E</div>
background: royalblue;
<div>F</div>
border: 1px solid white; </section>
width: 100px; height: 64px; </body
text-align: center;
}

section
{ font: 48px calibri;
color: white;
display:flex;
}
section > div
{
background: royalblue;
border: 1px solid white;
width: 100px; height: 64px;
text-align: center;
}
Define o bloco como um
flex container, tornando os
seus filhos flex itens.

9
 18/05/2022

section
{ font: 48px calibri;
color: white;
display:flex;
flex-direction: row; ->default
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
}
section > div
{
background: royalblue;
border: 1px solid white;
width: 100px; height: 64px;
text-align: center;
}

Define a direção dos flex itens

section
{ font: 48px calibri;
color: white;
display:flex;
flex-direction: row;
flex-wrap: nowrap; -> default
flex-wrap: wrap;
flex-wrap: wrap-reverse;
}
section > div
{
background: royalblue;
border: 1px solid white;
width: 100px; height: 64px;
text-align: center;
}
Define se os itens devem ou não quebrar a linha. Por padrão eles não quebram linha, portanto
os itens serão compactados para que se encaixem na dimensão do conteúdo.

10
 18/05/2022

section
{ font: 48px calibri;
color: white;
display:flex;
flex-direction: row;
flex-wrap: wrap;
flex-flow: row wrap;
}
section > div
{
background: royalblue;
border: 1px solid white;
width: 100px; height: 64px;
text-align: center;
}

É uma propriedade abreviada para definir

as propriedades flex-direction e flex-wrap.

section
{ font: 48px calibri;
color: white;
display:flex;
flex-direction: row;
justify-content:flex-start; ->default
justify-content:flex-end;
justify-content:center;
justify-content:space-around;
justify-content:space-between;
}
section > div
{
background: royalblue;
border: 1px solid white;
width: 100px; height: 64px;
text-align: center;
}

Alinha os flex itens no container de acordo com a direção.

11

<section> }
Alinha verticalmente os
flex itens no container.
</section>
18/05/2022
section
{ font: 48px calibri;
color: white;
display:flex;
align-items:flex-start; ->default
align-items:flex-end;
align-items:center;
align-items:baseline;
}
section > div
{
background: royalblue;
border: 1px solid white;
width: 100px; height: 64px;
text-align: center;
<div style="height: 50px;"> A </div>
<div style="font-size: 18px;"> B </div>
<div> C </div>
<div style="height: 100px;"> D </div>
<div> E </div>
<div> F </div>
section
{ font: 48px calibri;
color: white;
display:flex;
height:240px;
flex-wrap:wrap;
align-content:flex-start;
align-content:flex-end;
align-content:space-around;
align-content:center;
aling-content:space-between;
}
Alinha as linhas do container
section > div em relação ao eixo vertical.
{ Deve existir mais de uma
background: royalblue; linha de flex-itens, a altura
border: 1px solid white; do container deve ser
width: 100px; height: 64px; definida e o flex-wrap deve
text-align: center; ser wrap.
}
12
 18/05/2022

<html>
<head>
<title>Exemplo FLEX</title> section
<link href="estilos.css" rel="stylesheet" { font: 48px calibri;
type="text/css"/> color: white;
</head> display: flex;
<body> height: 240px;
<section> }
<div style="height: 50px;">A</div> section > div
<div style="font-size: 18px;">B</div> {
<div style="flex-grow: 1">C</div> background: royalblue;
<div style="height: 100px;">D</div> border: 1px solid white;
<div style="flex-grow: 2">E</div> width: 100px; height: 64px;
<div>F</div> text-align: center;
</section> }
</body>
</html>

flex-grow: 0;-> Obedece o width.

flex-grow: 1;-> Ocupa a área do container.
flex-grow: n;-> n x de ocupação da área.

<div style="font-size: 18px; flex-shrink: 0">B</div>

Define a capacidade de redução de tamanho do item.

flex-shrink: 0; Não permite a diminuição dos itens.

flex-shrink: 1; Valor padrão, permite que os itens tenham os seus

tamanhos reduzidos para caber no container.

flex-shrink: n; Um item com shrink: n diminuirá n vezes mais que um

item com 1.

13
 18/05/2022

<div style="font-size: 18px; flex-basis: 50%">B</div>

Define o tamanho do flex item antes da distribuição do espaço restante. Substitui o width.

<html>
<head>
<title>Exemplo FLEX</title> section
<link href="estilos.css" rel="stylesheet" { font: 48px calibri;
type="text/css"/> color: white;
</head> display: flex;
<body> height: 240px;
<section> }
<div style="height: 50px;">A</div> section > div
<div style="font-size: 18px;">B</div> {
<div style="align-self: center">C</div> background: royalblue;
<div style="height: 100px;">D</div> border: 1px solid white;
<div style="flex-grow: 2">E</div> width: 100px; height: 64px;
<div style="align-self: flex-end">F</div> text-align: center;
</section> }
</body
</html>

Define o alinhamento
específico de um único flex
item dentro do container.

14
 18/05/2022

Apoio Bibliográfico

Fábio Flatschart HTML 5 Embarque Imediato. Porto Alegre: Kuarup. [Disponível na

BV Pearson]

Lemay, Laura; Colburn, Rafe; Tyler, Denise Aprenda a Criar Páginas Web com
HTML e XHTML em 21 Dias. Rio de Janeiro: Record. [Disponível na BV Pearson]

Deitel, Paul J.; Deitel, Harvey M. Ajax Rich Internet Applications e

Desenvolvimento Web para Programadores. São Paulo: Atlas. [Disponível na BV
Pearson]

Site - W3schools - http://www.w3schools.com

15