cefet_front_end

HTML parte 4

Div/Span, Box Model, Float e Desafios

Na última aula… (1/3)

Vimos a ferramenta do desenvolvedor do Google Chrome
- Usamos para investigar erros e experimentar propriedades

Ferramentas de desenvolvedor do Chrome

Uma árvore com os elementos HTML

Podemos enxergar o HTML da página como uma “árvore” de elementos

Na última aula… (2/3)

CSS foi criada por Håkon Wium Lie em 1994
Entendemos o que é a cascata no CSS:
- Algumas propriedades são herdadas dos elementos ancestrais (e.g., cor do texto), outras não (e.g., a borda)

Na última aula… (3/3)

Além de selecionar por tag, id ou classe, há diversos outros seletores:

descend./filho

p strong todo <strong> descendente de <p> (filho, neto etc.)
p > strong todo <strong> filho direto de <p>

atributo

img[alt] toda <img> que tem atributo alt="..."
a[href$=".html"] todo <a> apontando para um .html etc.

estado do link

a:link, a:visited, a:hover, a:active

negação

img:not([alt]): <img> sem o atributo alt

Hoje veremos

div e span
O Box Model
Revisitando o float
Desafios

div e span

Agrupando outros elementos HTML

Agrupando para estilizar
O elemento <div>...</div>
O elemento <span>...</span>

#comofaz?

E se quisermos estilizar de forma que o título e subtítulo ficassem com o mesmo fundo…

…a partir do HTML acima?

1ª tentativa

Basta colocar o mesmo fundo tanto no <h1> quanto no <h2>!

h1, h2 {
  background: url(coelho.png) #ff6d6d;
  background-repeat: no-repeat;
  background-position: right top;
}

Acontece que, como são elementos diferentes, cada um tem seu próprio fundo

O jeito certo

Colocamos os títulos dentro de outro elemento e o estilizamos
Uma <div>...</div> pode ser usada para agrupar elementos

<body>
  <div id="topo-da-pagina">  
    <h1>Coelhos Vampiros</h1>
    <h2>De onde vêm, onde vivem ...</h2>
  </div>
  <p>Sexta-feira, no Globo Repórter</p>
</body>

#topo-da-pagina {
  background: url(coelho.png) #ff6d6d;
  background-repeat: no-repeat;
  background-position: right top;
}

Div (na MDN)

<div></div> serve para agrupar outros elementos
Não representa nada por si só (não tem semântica)
- Um <p> é um parágrafo (i.e., conteúdo)
- Uma <img> é uma imagem (i.e., conteúdo)
- Uma <div> é um agrupamento de elementos
É um elemento block

É um mecanismo genérico que nos permite criar uma estrutura ou agrupamento de elementos quando não há outro elemento HTML mais apropriado, e ela pode ser estilizada usando CSS ou manipulada com JavaScript Containers genéricos na W3C

Div (exemplo)

html

<div id="topo-da-pagina">
  <h1>Título do site</h1>
  <h2>Subtítulo</h2>
</div>

css

#topo-da-pagina {
  background-color: #4400ac;
  color: #fffff;
}

—

Div (outro exemplo)

  <body>
  ➡️ <div id="conteudo">
        <h1>Tesouros</h1>
        <table><!-- ... --></table>
        <p>Ajude Barba-Ruiva ...</p>
  ➡️ </div>
  </body>

  body { background: url(ilha.png) }
  #conteudo {
    background: white;
  }

Span (na MDN)

<span></span> tem exatamente a mesma função que div, porém inline

Como estilizar o nome e o preço do produto?
- Se usarmos <div>, vai quebrar linha (ele é block)
- Então, usamos o <span>, que é inline!
```
O preço da <span class="produto">camisa adornada</span> é
de <span class="preco">R$ 29,90</span>.
```

Span (exemplo)

  <p>
    O <span class="artista">Chimbinha</span> é rei, mas
    <span class="artista">Joelma</span> é diva intergalática.
  </p>

  .artista {
    background: url(imgs/musica.png) no-repeat left;
    padding-left: 20px;   color: #ff3399; /* rosa choque */
  }

O Chimbinha é rei, mas Joelma é diva intergalática.

O Box Model

Como os elementos são “vistos” pelo navegador

Componentes da caixa
width e height
Alterando o box-model

Box Model (na MDN)

O navegador enxerga todo elemento de conteúdo como uma “caixa”
A “caixa” é formada por:
- Espaço do conteúdo
- Espaço de preenchimento (padding)
- Bordas (border)
- Espaço externo (margin)

Visualizando a caixa de um elemento

Box Model: largura e altura

Quando definimos a largura (width) ou altura (height) de um elemento, estamos definindo o tamanho do conteúdo da caixa, e não da caixa inteira

Dimensionando um elemento

Elementos inline ignoram os valores de:

width, height
margin-top
margin-bottom
Se sabemos a dimensão total de um elemento, que também contém padding e/ou border, como calcular seus (width, height)?
Contudo, fazer essa conta “nós mesmos” pode resultar em erros…
- É possível mudar isso!

Alterando o box model

É possível alterar o significado da width e height de um elemento usando a propriedade box-sizing :
- box-sizing: content-box (valor padrão)
  - width = largura do conteúdo
- box-sizing: border-box
  - width = conteúdo + padding + border
  - Esta forma é mais intuitiva :thumbsup: :thumbsup: :thumbsup:

As margens do elemento formam um espaçamento externo e não usam espaço dentro da caixa.

Revisitando float

Para voar, basta errar o chão. Douglas Adams no Guia do Mochileiro das Galáxias

Relembrando o fluxo estático
- inline e block
Relembrando o float
Possíveis “problemas”:
1. Interrompendo o float
2. Remoção do fluxo

Elementos `block`

Elementos `inline`

`block` e `inline`, juntos

Flutuando elementos com `float`

Sem float

Com float

Flutuando o parágrafo à direita:

  p#amazing {
    width: 200px;
    float: right;
  }

Quem flutua é removido do fluxo
- i.e., não ocupa mais espaço
Elementos depois do flutuante:
- Os block: passam a ignorar o elemento flutuante
- Os inline: respeitam o flutuante

Exemplo: flutuando uma imagem

Repare os parágrafos (block) e o texto dentro deles (inline)…

Possíveis “problemas” com flutuação (1/2)

É possível que um elemento interrompa uma flutuação
- Para isso, usamos a propriedade clear no elemento interruptor

Exemplo: interrompendo uma flutuação

A propriedade clear pode ser:
- left ou right: interrompe apenas as flutuações à esquerda ou à direita
- both: interrompe ambos lados
- none: não interrompe (valor padrão)
Neste exemplo:
```
#proximo-assunto {
  clear: right;
}
```

Possíveis “problemas” com flutuação (2/2)

Queremos colocar os preços à direita

1ª tentativa:

.preco { float: right; }

.preco { float: right; }
.item  { float: left;  }

Corrigindo:

.preco { float: right; }
.item  { float: left;  }
.comida{ clear: both;  }

Referências

Capítulos 9 (parcial), 10 e 11 (parcial) do livro
Mozilla Developer Network (MDN)