Capítulo 4

Dominando o Lay-out

Criado por: Malcon Toledo

HTML Semântico

Tags:

div span HEADER FOOTER MAIN SECTION NAV ARTICLE ASIDE

HTML semântico é o uso da marcação HTML para reforçar a semântica, ou significado, das informações em páginas da Web, em vez de apenas definir sua apresentação ou aparência.

O HTML semântico é processado pelos navegadores e por muitos outros agentes como o GOOGLE por exemplo

O objetivo é fazer com que esses agentes externos "entendam" melhor o conteúdo da página

Elemento: <DIV> </DIV>

É utilizado para ser como um container(agrupador) de outros elementos HTML.

O <DIV> não possui valor semantico Na prática ele serve para auxiliar a estilizar um grupo de elementos com o CSS

O <DIV> gera uma quebra de linha ao ser utilizado. Isso ocorre pois possui display:block como padrão.

Elemento: <SPAN> </SPAN>

É utilizado para ser como um container(agrupador) de outros elementos HTML.

O <SPAN> não possui valor semantico Na prática ele serve para auxiliar a estilizar um grupo de elementos com o CSS

O <DIV> NÃO gera uma quebra de linha ao ser utilizado. Isso ocorre pois possui display:inline como padrão.

Elemento: <HEADER> </HEADER>

Usados ​​para identificar o conteúdo que precede o conteúdo principal da página da web.

Geralmente contém a logo, o menu, e formulário de pesquisa de conteúdo

Elemento: <FOOTER> </FOOTER>

Usado para indicar o rodape do documento

Elemento: <MAIN> </MAIN>

Define o conteúdo principal dentro da página

Só pode haver um elemento <MAIN> no mesmo documento

o elemento <main> não pode ser filho dos elementos <article>, <aside>, <footer>, <header>, ou <nav>.

Elemento: <SECTION> </SECTION>

Representa uma seção genérica contida em um documento HTML, geralmente com um título, quando não existir um elemento semântico mais específico para representá-lo




	
Título da sessão

	
conteudo ... conteudo

	
conteudo ... conteudo

Elemento: <NAV> </NAV>

NAV indica que um determinado grupo é uma seção de navegação, isto é, um bloco de navegação.

Elemento: <ARTICLE> </ARTICLE>

Indicado para ser utilizado para indicar conteúdos como um post de um blog, um artigo, um comentário enviado por um usuário, e assim por diante.




	
Título do Artigo

	
Lorem Ipsum is simply dummy text of the printing
		and typesetting industry. Lorem Ipsum has been 
		the industry's standard dummy text ever since 
		the 1500s, when

Elemento: <ASIDE> </ASIDE>

representa uma seção de uma página que consiste de conteúdo que é tangencialmente relacionado ao conteúdo principal.




	
Título do Artigo

	
Lorem Ipsum is simply dummy text of the printing

Listas e Colunas

Tags:

ul li ul

Propriedades:

list-style-image list-style-position list-style-type list-style column-count column-gap column-span column-fill

Elemento <UL> </UL>;

Cria uma lista não ordenada

Propriedades do UL

list-style-image: Especifica uma imagem para servir de marcador para os ítens da lista 


    
  
  • item 1
    • 
  
  • item 2
    • 
  
  • item 3
    • 




.lista1 {
    list-style-image: url(ckeck.png);
    font-size: 2em;
}
list-style-position: Define onde será a posição do marcador
inside marcador ficará dentro da lista
outside marcador ficará fora da lista 


    
  
  • Item
    • 
  
  • Item
    • 
  
  • Item
    •   




    
  
  • Item
    • 
  
  • Item
    • 
  
  • Item
    •   




.lista1 {
    list-style-position: inside;
    padding: 0;
    border-left: solid 2px red;
  }
  
  .lista2 {
    list-style-position: outside;
    padding: 0;
    border-left: solid 2px red;
  }
list-style-type: Especifica o tipo do marcador que irá aparecer em cada item

Propriedade list-style:


list-style:  <list-style-type> || <list-style-position> || <list-style-image> 

.ul {
  list-style: circle outside none;
}

Elemento <OL> </OL>;

Cria uma lista ordenada

Propriedades do <OL>

list-style-type: Indica o tipo de marcador

Atributos do <OL>

reversed reverse=true especifica que os itens da lista serão especificadas em ordem reversa
start start=3 começa a contagem dos items a partir do 3
type Indica o tipo de numeração:
'a' indica letras minúsculas,
'A' indica letras maiúsculas,
'i' indica algarismos romanos minúsculos,
'I' indica algarismos romanos maiúsculos,
'1' indica números (padrão). 


    
  
  1. Item
    2. 
  
  2. Item
    3. 
  
  3. Item
    4.

Colunas

Atributo Descrição
column-count Divide o elemento em colunas
column-gap Define o espaçamento entre as colunas
column-rule Define o tamanho, estilo e cor da "linha" entre as colunas
column-span diz se o lemento irá se expandir por todas as colunas
column-span: none|all
column-fill Define como se dará o preenchimento das colunas
column-fill: alto
primeiro preenche a altura do elemento, para depois passar para a próxima coluna
column-span: balance
Todas as colunas ficam com alturas semelhantes 



 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit

 Lorem ipsum dolor sit amet, adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autecongue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.




.newspaper {
  column-count: 3;
  column-gap:10px;
  column-width:150px;
  column-rule: 3px solid #ff0000;
  column-fill:alto;
  height:600px;
}
h2 {
  column-span: all;
}

Propriedade Display

Propriedades:

display:block display:inline display:inline-block

dislplay:inline

display:inline

o elemento irá ficar "inline" (em linha)

faz com que o elemento se comporte como se fosse um <span>

não irá reconhecer o "width" e o "heigth"

o elemento irá ficar com o tamanho do seu conteúdo



    
  
  • item 1
    • 
  
  • esse lorem ipsum
    • 
  
  • item lorem
    • 




.lista{
  background-color: rgb(173, 101, 190);
  padding: 10px;
  color:#ffffff;
  display: inline;
  width:150px;
}

dislplay:inline-block

display:inline-block

o elemento irá ser "inline" e também "block"

faz com que o elemento se comporte como se fosse um <p>

irá reconhecer o "width" e o "heigth"

é possível controlar a altura e largura



    
  
  • item 1
    • 
  
  • item 2
    • 
  
  • item 3
    • 




.lista{
  background-color: rgb(173, 101, 190);
  padding: 10px;
  color:#ffffff;
  display: inline-block;
  width:100px;
  heigth:80px;
}

dislplay:block

display:block

o elemento irá se comportar como um bloco

faz com que o elemento se comporte como se fosse um <p>

irá reconhecer o "width" e o "heigth"

é possível controlar a altura e largura



    
  
  • item 1
    • 
  
  • item 2
    • 
  
  • item 3
    • 




.lista{
  background-color: rgb(173, 101, 190);
  padding: 10px;
  color:#ffffff;
  display: block;
  width:100px;
  heigth:40px;
  margin-top:1px;
}

Alinhamento horizontal e vertical

Propriedades:

text-align:center vertical-align:center

Aliamento Horizontal

text-align:center

alinha os elementos horizontalmente no centro

mas só funciona quando os elementos são do tipo "inline"




 
    
  
  • item 1
    • 
  
  • item 2
    • 
  
  • item 3
    • 
 






.pai {
  width: 400px;
  background-color: khaki;
  text-align: center;
}

.lista{
  background-color: rgb(173, 101, 190);
  padding: 10px;
  color:#ffffff;
  display: block;
  width: 100px;
  margin-top: 1px;
  text-align: center;
  height: 40px;
}


 

  
    
  
  • item 1
    • 
  
  • item 2
    • 
  
  • item 3
    • 
 






.pai {
 width: 600px;
 background-color: khaki;
 text-align: center;
}

.lista{
 background-color: rgb(173, 101, 190);
 padding: 10px;
 color:#ffffff;
 display: inline-block;
 width: 100px;
 margin-top: 1px;
 text-align: center;
 height: 40px;
}

Alinhamento Vertical

vertical-align:middle

Esta propriedade não funciona "sozinha"

o elemento pai tem que ser um display:table

e o elemento em si tem que ser display:table-cell


 

  
    
  
  • item 1
    • 
  
  • item 2
    • 
  
  • item 3
    • 
 






.pai {
  width: 400px;
  background-color: khaki;
  height: 300px;
  display: table;
}

.pai ul {
  margin: 0px;
  padding: 0px;
  background-color: rgb(72, 175, 206);
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}

.lista{
  background-color: rgb(59, 66, 110);
  padding: 10px;
  color:#ffffff;
  display: inline-block;
  width: 60px;
  margin-top: 1px;
  line-height: 40px;
}

CONTROLE DE FLUXO

Propriedades:

Float: Clear:

A propriedade float

Vamos ver o código abaixo:




  
  
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley 
  
  
Lorem type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.





img {
  width: 150px;
}

Perceba que exite um fluxo.


Primeiro aparece a imagem, depois o primeiro parágrafo e, por último, o segundo parágrafo.

FLOAT

Essa propriedade retira o elemento do seu fluxo normal e faz com que os outros elementos da página flutuem ao redor do elemento

FLOAT:LEFT




  
  
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley 
  
  
Lorem type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.





img {
  width: 150px;
  float: left;
  margin: 10px;
}

FLOAT:RIGHT




  
  
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley 
  
  
Lorem type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.





img {
  width: 150px;
  float: right;
  margin: 10px;
}

Propriedade CLEAR

Vamos ver o código abaixo:




  
  
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley 
  
  
Lorem type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.





img {
  width: 150px;
  float: left;
  margin: 10px;
}

Perceba que tanto o primeiro quanto o segundo parágrafo estão flutuando ao redor da imagem.


Mas, e se quiséssemos que flutuasse somente o primeiro parágrafo e não também o segundo?

CLEAR: BOTH

Essa propriedade diz que o elemento não irá flutuar ao lado de ninguém.

CLEAR: BOTH




  
  
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown  printer took a galley 
  
  
of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.






img {
 width: 150px;
 float: left;
 margin: 10px;
}
.limpa {
  clear: both;
}

FLEXBOX

Propriedades:

Display:flex flex-direction: flex-wrap: flex-flow: justify-content: align-itens: flex-grow: flex-shrink: flex-basis:

Lembrando...




  

	Div 1
  

  

	Div 2
  

  

	Div 3
  





.pai {
  padding:10px;
  background-color: tomato;
}

.filho {
  background-color: rgb(119, 119, 119);
  padding: 20px 30px;
  border: 1px solid;
}

No exemplo acima temos uma div contendo outras 3 divs;

Por padrão uma div se comporta como um "dislplay:block"

Propriedade Display: flex




  

	Div 1
  

  

	Div 2
  

  

	Div 3
  





.pai {
  padding:10px;
  background-color: tomato;
  display:flex;
}

.filho {
  background-color: rgb(119, 119, 119);
  padding: 20px 30px;
  border: 1px solid;
}

Perceba que a propriedade display:flex é setada na "div pai";

display: flex

por padrão, os elementos contidos em um display: flex, terão os seguintes comportamentos:

- irão ser exidos em linha;

- a largura irá ser igual ao tamanho do seu conteúdo;

- a altura irá ser igual a do elemento pai;

- não haverá quebras; todos os elementos irão aparecer na mesma linha;

Propriedade flex-direction

a propriedade flex-direction irá definir qual será o eixo principal sobre o qual os elementos filhos irão "deslizar"

propriedade flex-direction

flex-direction: row o eixo principal será o eixo x (linha), começando pela esquerda
(padrão)
flex-direction: row-reverse o eixo principal será o eixo x (linha), começando pela direita
flex-direction: column o eixo principal será o eixo y (coluna), começando por cima
flex-direction: column-reverse o eixo principal será o eixo y (coluna), começando por baixo

Propriedade justify-content

a propriedade justify-content irá definir como os elementos irão preencher o eixo principal

propriedade justify-content

justify-content: flex-start elementos lado a lado, sem espaço entre eles, alinhamento pelo incio do "flex-direction"
(padrão)
justify-content: flex-end elementos lado a lado, sem espaço entre eles, alinhamento pelo fim do flex-direction
justify-content: center elementos lado a lado, sem espaço entre eles, alinhamento pelo meio do flex-direction
justify-content: space-around elementos lado a lado, ocupará todo o eixo principal, com espaçamento ao redor dos elementos.
justify-content: space-between elementos lado a lado, ocupará todo o eixo principal, com espaçamento entre os elementos. 



  

     Div 1
  

  

      Div 2
  

  

      Div 3
  





.pai {
    padding:10px;
    background-color: tomato;
    height: 250px;
    width: 250px;
    display:flex;
    flex-direction: row;
    justify-content: flex-start;

}

.filho {
    background-color: rgb(180, 180, 180);
    text-align: center;
    line-height: 50px;
    border: 1px solid;
    width: 50px;
    height: 50px;
}




  

     Div 1
  

  

      Div 2
  

  

      Div 3
  





.pai {
    padding:10px;
    background-color: tomato;
    height: 250px;
    width: 250px;
    display:flex;
    flex-direction: row;
    justify-content: flex-end;

}

.filho {
    background-color: rgb(180, 180, 180);
    text-align: center;
    line-height: 50px;
    border: 1px solid;
    width: 50px;
    height: 50px;
}




  

     Div 1
  

  

      Div 2
  

  

      Div 3
  





.pai {
    padding:10px;
    background-color: tomato;
    height: 250px;
    width: 250px;
    display:flex;
    flex-direction: row-reverse;
    justify-content: flex-start;

}

.filho {
    background-color: rgb(180, 180, 180);
    text-align: center;
    line-height: 50px;
    border: 1px solid;
    width: 50px;
    height: 50px;
}




  

     Div 1
  

  

      Div 2
  

  

      Div 3
  





.pai {
    padding:10px;
    background-color: tomato;
    height: 250px;
    width: 250px;
    display:flex;
    flex-direction: row;
    justify-content: space-around;

}

.filho {
    background-color: rgb(180, 180, 180);
    text-align: center;
    line-height: 50px;
    border: 1px solid;
    width: 50px;
    height: 50px;
}




  

     Div 1
  

  

      Div 2
  

  

      Div 3
  





.pai {
    padding:10px;
    background-color: tomato;
    height: 250px;
    width: 250px;
    display:flex;
    flex-direction: row;
    justify-content: space-between;

}

.filho {
    background-color: rgb(180, 180, 180);
    text-align: center;
    line-height: 50px;
    border: 1px solid;
    width: 50px;
    height: 50px;
}




  

     Div 1
  

  

      Div 2
  

  

      Div 3
  





.pai {
    padding:10px;
    background-color: tomato;
    height: 250px;
    width: 250px;
    display:flex;
    flex-direction: column;
    justify-content: space-between;

}

.filho {
    background-color: rgb(180, 180, 180);
    text-align: center;
    line-height: 50px;
    border: 1px solid;
    width: 50px;
    height: 50px;
}

Propriedade flex-wrap

A propriedade flex-wrap irá definir se o container flexbox irá ter quebra automática ou não.

flex-wrap: nowrap não haverá quebra automática no eixo principal
(padrão)
flex-wrap: wrap haverá quebra automática no eixo principal 



  

     Div 1
  

  

      Div 2
  

  

      Div 3
  





.pai {
  padding:10px;
  background-color: tomato;
  height: 250px;
  width: 100%;
  display:flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.filho {
  background-color: rgb(180, 180, 180);
  text-align: center;
  line-height: 50px;
  border: 1px solid;
  width: 200px;
  height: 50px;
}
por padrão, flex-wrap é definida como nowrap, o que faz com que não haja quebra automática no eixo principal. 



  

     Div 1
  

  

      Div 2
  

  

      Div 3
  





.pai {
  padding:10px;
  background-color: tomato;
  height: 250px;
  width: 100%;
  display:flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;

}

.filho {
  background-color: rgb(180, 180, 180);
  text-align: center;
  line-height: 50px;
  border: 1px solid;
  width: 200px;
  height: 50px;
}
flex-wrap: wrap, habilita quebra automática.

Propriedade align-items

A propriedade align-items irá definir como os elementos irão se alinhar no eixo secundário

O eixo secundário é o eixo perpendicular ao eixo primário, que por sua vez foi definido pela propriedade "flex-direction"

Se flex-direction: row, o eixo secundário será column

Se flex-direction: column, o eixo secundário será row

propriedade align-items

align-items: stretch elemento ocupará toda a altura do elemento pai
(padrao)
align-items: flex-start alinha no inicio do eixo secundário
align-items: flex-end alinha no fim do eixo secundário
align-items: center alinha do centro do eixo secundário 



  

     Div 1
  

  

      Div 2
  

  

      Div 3
  






.pai {
  padding:10px;
  background-color: tomato;
  height: 250px;
  width: 450px;
  display:flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: stretch;

}

.filho {
  background-color: rgb(180, 180, 180);
  text-align: center;
  line-height: 50px;
  border: 1px solid;
}
O padrão é: align-items: stretch. Isso faz com que os elementos flex ocupem toda a altura do eixo secundário

OUTRA COISA