Name	Name	Last commit message	Last commit date
parent directory ..
README.md	README.md

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

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

::: figure .figure-slides.no-margin.flex-align-center.invert-colors-dark-mode :::

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 */
}

::: result 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

::: figure .figure-slides.flex-align-center.clean.invert-colors-dark-mode :::

Dimensionando um elemento

::: did-you-know .push-right width: 320px; margin-right: 6px; 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)? ::: figure .figure-slides.push-right.invert-colors-dark-mode :::
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 👍 👍 👍

::: did-you-know .push-right width: 284px; margin-left: 6px; padding-right: 0.5em As margens do elemento formam um espaçamento externo e não usam espaço dentro da caixa. :::

::: figure .clean.span-columns.figure-slides.max-width.centered.invert-colors-dark-mode margin:0 auto; width: calc(100% - 290px); clear: both; :::

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`

::: figure .figure-slides.push-right

Sem float

Com float
::: Flutuando o parágrafo à direita: ```css 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

::: figure .figure-slides.no-margin :::

1ª tentativa: ::: figure .figure-slides.no-margin

.preco { float: right; }

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

:::

::: figure .figure-slides.no-margin :::

Corrigindo:

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

Desafios

Atividade de hoje

Atividade em grupo
O professor projetará uma pergunta/desafio
Cada grupo deverá responder no papel a pergunta/desafio
O professor corrigirá e pontuará os grupos que acertarem
O grupo que conseguir maior pontuação será o vencedor

Referências

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

Files

html4

Directory actions

More options