Escolar Documentos
Profissional Documentos
Cultura Documentos
Web 4
Web 4
PROGRAMAÇÃO WEB
AULA 4
1O Consórcio World Wide Web (W3C) é uma comunidade internacional que desenvolve padrões
com o objetivo de garantir o crescimento da web. Disponível em: <https://www.w3c.br/>. Acesso
em: 29 jan. 2023.
2
hgroup, mas isso não é obrigatório. Em geral, esses elementos contêm logotipos
e caixas de busca.
O elemento <nav> representa uma seção de uma página com links para
outras páginas ou partes da página: uma seção com links de navegação. Nem
todos os grupos de links em uma página precisam estar em um elemento <nav>
— o elemento destina-se principalmente a seções que consistem em blocos de
navegação principais.
<hgrupo>
<h1> Título 1 </h1>
<h2> Título 2</h2>
</hgroup>
4
TEMA 2 – GRID
5
Observe, na imagem a seguir, como podemos aplicar o grid em layouts.
A tela foi dividida em 12 colunas com partes iguais, e foi definido que o <header>
e o <footer> ocupariam as 12 colunas. O <nav> ocupa 2 colunas e o <aside>
três colunas.
6
2.1 Elementos de grid
grid container
grid lines
grid-template-columns
Utilizado para definir um nome para as grid lines verticais e a largura das
colunas do grid.
.container {
display: grid;
grid-template-columns: 100px 50px 80px 200px;
/* cria um grid com 4 colunas de largura fixa */
}
grid-template-rows
Utilizado para definir um nome para as grid lines horizontais e a altura das
linhas do grid. No exemplo a seguir, especificamos um grid com três linhas e
altura fixas. O exemplo é literal.
.container {
display: grid;
grid-template-columns: 100px 50px 80px 200px;
grid-template-rows:80px 100px 100px; }
7
Gap
grid-row-gap: 10px;
grid-column-gap: 20px;
gap: 10px 20px; /* equivalente às duas declarações anteriores */
gap: 8px; /* espaçamento igual tanto para colunas como para linhas*/
gap: 0 8px; /* espaçamento somente para colunas */
grid-item
8
CSS:
HTML:
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
</div>
9
Visualização do grid (3 linhas x 4 colunas), com gap (8px):
CSS:
HTML:
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
</div>
10
a ordem dos grids itens seja por coluna, pode utilizar a declaração: grid-auto-
flow: column;
grid-template
.container {
display: grid;
grid-template: 80px 100px 100px / 100px 50px 80px 200px;
}
11
Para a diagramação acima, podemos fazer a seguinte declaração:
CSS HTML
.container { <div class="container">
display: grid; <div class="box
grid-template-columns: box1">1</div>
100px 50px 80px 200px; <div class="box
grid-template-rows: 80px box2">2</div>
100px 100px; </div>
gap: 8px;
}
.box1 {
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 3;
grid-row-end: 4;
}
.box2 {
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 3;
}
Considerando as bordas externas, o box1 começa na coluna 1 e termina
na coluna 5. Começa na linha 3 e termina na linha 4. O box 2 começa na coluna
3 e termina na coluna 5. Começa na linha 1 e termina na linha 3. Estão com gap
de 8 px. Estamos utilizando o posicionamento numérico.
12
Visualização de grid
.box1 { .box1 {
grid-column-start:1; grid-column: 1 / 5;
grid-column-end: 5; grid-row: 3 / 4;
grid-row-start: 3; }
grid-row-end: 4;
}
.box2 { .box2 {
grid-column-start: 3 grid-column: 3 / 5;
grid-column-end: 5; grid-row: 1 / 3;
grid-row-start: 1; }
grid-row-end: 3;
}
13
<main class="principal">Principal</main>
<aside class="esquerdo">aside esquerdo</aside>
<aside class="direito">aside direito</aside>
<footer class="rodape">Rodapé</footer>
</div>
.container{
display: grid;
grid-template-columns: 150px 700px 150px;
grid-template-rows: 60px 40px 200px 60px;
gap: 5px 10px; }
CSS
14
Passamos a ter o seguinte layout (no browser não irá aparecer o número
da grid):
CSS
. container {
display: grid;
grid-template-columns: repeat(8, 7%);
grid-template-rows: repeat(4, 4vh);
grid-gap: 10px calc( (100% - 7%* 12) / 11 );
}
15
EXPLICAÇÃO
grid-template-columns: repeat(8, 7% );
Define 8 colunas com largura igual a 7%. Resulta em largura total do
grid 8 x 7% = 56%.
grid-template-rows: repeat(4, 4vh );
Define 4 linhas com altura igual a 4vh (4% da altura da viewport 2).
Resulta em altura total do grid igual a: 4 x 4vh = 16vh (16% da altura da
viewport3)
grid-gap: 8px calc((100% - 7%* 8) / 7);
Define espaçamento vertical fixo de 8px entre as linhas do grid e
espaçamento horizontal calculado pela função CSS calc () igual a 100%
- 56% = 44% dividido pelos 7 espaçamentos horizontais. Resulta em
largura total do grid igual a: 56% + 7 * 6.2857% = 100% (100% da largura
da viewport “tela”).
.container {
display: grid;
grid-template-columns: repeat(6, 100px);
grid-template-rows: repeat(4, 60px);
grid-gap: 5px;
}
.box1 {
grid-column: 2 / span 4;}//começa na coluna 2 e irá ocupar 4
células.
.box2 {
grid-row: 3 / span 2;} //começa na linha 3 e irá ocupar 2 células.
.box3 {
grid-column: 3 / span 4; //começa na coluna 3 e irá ocupar 4
<div class="container">
<header class="topo">Topo</header>
<nav class="menu">Menu</nav>
<main class="principal">Principal</main>
<aside class="esquerda">aside esquerdo</aside>
<aside class="direita">aside direito</aside>
<footer class="rodape">Rodapé</footer>
</div>
No CSS
.container {
display: grid;
grid-template-rows: 60px 40px 200px 60px;
grid-template-areas:
"topo topo topo"
"menu menu menu"
"esquerda principal direita"
"rodape rodape rodape";
grid-gap: 5px 10px;
}
.topo {grid-area: topo;}
17
.menu {grid-area: menu;}
.principal {grid-area: principal;}
.esquerda {grid-area: esquerda;}
.direita {grid-area: direita;}
.rodape {grid-area: rodape;}
Foi criada uma unidade de medida relativa fr, que significa fração. Trata-
se de uma unidade relativa cuja referência é a medida do espaço disponível,
tanto na vertical quanto na horizontal.
Exemplo:
.container {
display: grid;
grid-template-columns: 2fr repeat(6, 1fr ) 2fr;//Cria 8
colunas, iniciando com 2 fr a esquerda e duas 2 fr a direita. No
centro 6 repetições de 1 fr.
grid-template-rows: repeat(8, 1fr );//Cria 8 linhas de 1 f
cada
gap: 10px 20px;
height: 80vh;
}
18
Visualização da especificação acima:
.container {
display: grid;
grid-template-columns: 200px minmax(400px, 800px);// Define
duas colunas, sendo a primeira com largura fixa igual a 200px e
a segunda com largura mínima de 400px e máxima de 800px. Ou
seja, dentro dessa faixa de valores, o grid é fluido.//
grid-template-rows: 50px minmax(200px, auto) 50px;//
Define três linhas, sendo a segunda fluida com altura mínima de
200px e máxima igual àquela a acomodar todo o conteúdo nela
inserido. As outras duas linhas são de altura fixa igual a
50px.//
gap: 10px 20px;
}
TEMA 3 – FLEXBOX
19
avançadas de alinhamento. A diferença fundamental entre Flexbox e Grid Layout
é que o primeiro tem o melhor uso para a criação de layout em uma dimensão,
seja horizontal (posicionamento em linhas) ou vertical (posicionamento em
colunas), e o segundo para a criação de layout em duas dimensões: linhas e
colunas (Silva, 2022).
container
flex-item
HTML
<h2>Display flex</h2>
<div class="container1">
<div class="box box1">DIV</div>
<span class="box box2">SPAN</span>
<em class="box box3">EM</em>
<div class="box box4">DIV</div>
</div>
<br><br><br><br>
<h2>Display block</h2>
<div class="container2">
<div class="box box1">DIV</div>
<span class="box box2">SPAN</span>
<em class="box box3">EM</em>
<div class="box box4">DIV</div>
</div>
CSS
20
.box {
color: white;
border: 4px solid #333;
font-size: 24px;
padding: 10px;
}
.box1 {background: #086bdd;}
.box2 {background: #1c0989;}
.box3 {background: #00028b;}
.box4 {background: #7c58de;}
Visualização no browser:
display
21
flex-direction
HTML CSS
<h1>display: flex;</h1> .flex {
<section class="container flex"> display: flex;
<div class="item">Teste flex-direction: row;
1</div> }
<div class="item">Teste .item {
2</div> margin: 5px;
<div class="item">Teste background: #228B22;
3</div> text-align: center;
font-size: 1.5em;
</section> }
.container {
max-width: 400px;
margin: 0 auto;
border: 1px solid
#ccc;
}
3 Main axis por padrão é o eixo horizontal e o seu sentido é da esquerda para a direita.
22
justify-content
Sintaxe:
.container {
display: flex;
justify-content: space-around;
}
Exemplos:
flex-wrap
CSS:
23
Exemplos:
align-items
Pode se utilizar para alinhar os flex items dentro do container, tendo como
referência cross axis4. Essa propriedade possui como valores principais: flex-
start, center, flex-end e stretch. O valor padrão é stretch, o que faz com que os
flex items se expandam em altura até ocupar toda a altura do container.
CSS:
.container {
display: flex;
align-content: flex-start; /* o valor inicial é flex-start
*/
}
Exemplos:
CSS:
A media query da figura acima vai resultar true se a mídia tiver uma tela
com largura mínima de 480px.
Exemplo:
Operador Descrição
and Resulta true se as condições à esquerda e à direita do operador
forem verdadeiras.
only Utilizada para esconder folhas de estilo dos navegadores antigos
que não suportam media query.
not Resulta true se a condição não for satisfeita.
26
4.2 Funcionalidades Media Query
27
aspect-ratio: considera a razão entre a largura (width) e altura (height) da área
de saída do dispositivo do usuário. Os valores possíveis são frações a/b.
Exemplo:
28
scan: descreve o processo de escaneamento de imagens em mídias do tipo TV.
Exemplo:
4.3 Breakpoints
29
Essa adaptação do layout é possível com
uso de media queries. Por exemplo:
30
resoluções. Vamos agora conhecer as marcações e declarações que podemos
utilizar para esta finalidade, para imagens.
5.1 Imagens
img {
display: block;
margin: 0 auto;
max-width: 100%;
}
No desktop No smartphone
31
viewports 6 maiores, o body continua a 1200 pixels e centralizado no espaço
disponível. Em viewports7 menores, o body vai usar 100% da largura disponível.
5.2.1 srcet
Sintaxe:
Exemplo:
<h1>
<img alt ="a imagem é o logo da empresa"
src =" logo.jpg"
srcset =" logo-HD.jpg 2x, logo-phone.jpg 150w, logo-phone-HD.jpg
6
Viewport: tela.
32
150w 2x" >
</ h1 >
Explicação:
• src: para exibir a imagem em dispositivos com tela que não sejam de alta
definição e como fallback 7 para exibir a imagem nos navegadores que não
entendem o atributo srcset;
• logo-HD.jpg 2x: imagem a ser usada em dispositivos de alta definição;
• logo-phone.jpg 150w: imagem a ser usada em dispositivos com largura
de viewport até 150px e telas que não tenham alta definição;
• logo-phone-HD.jpg 150w 2x: imagem a ser usada em dispositivos com
largura de viewport até 150px e telas em alta definição.
5.2.2 picture
Sintaxe:
<picture>
<source media="(min-width:650px)" srcset="img.jpg">
<source media="(min-width:465px)" srcset="img_pjpg">
<img src="img_n.jpg" alt="Flowers" style="width:auto;">
</picture>
7 Fallback: uma opção a ser utilizada caso a opção preferida não esteja disponível.
33
5.2.3 Art direction
HTML
< div class =" artdirection" alt ="exemplo " > </ div >
CSS
.artdirection {
max-width: 100%;
height: 240px;
border: 5px solid red;
background-image: url(imagens/ img1. jpg);
background-position: top;
}
@media screen and (min-width: 320px) {
.artdirection {
border: 5px solid blue;
background-image: url(imagens/ img2. jpg);
height: 525px;
}
}
@media screen and (min-width: 700px) {
.artdirection {
border: 5px solid green;
background-image: url(imagens/img2. jpg);
height: 750px;
}
}
@media screen and (min-width: 1600px) {
.artdirection {
border: 5px solid black;
background-image: url(imagens/ img3. jpg);
max-width: 1600px;
height: 1200px;
}
}
34
Acima, vimos como estabelecer breakpoints com algumas larguras e as
declarações com imagens de fundo para cada medida considerada.
FINALIZANDO
35
REFERÊNCIAS
36