cefet_front_end

HTML parte 5

Divitite e tags semânticas, especificidade e
pseudo-coisas

Na última aula (1/3)

Propriedade display e valores inline, block, inline-block e none
Também há outros valores:
- table, table-row, table-cell etc.
- flex e inline-flex
- grid e inline-grid

Na última aula (2/3)

Propriedades do Flexbox:
- No elemento pai:
  - display: flex
  - flex-direction: row | column
  - justify-content: flex-start | flex-end | center | space-around | space-between
- Nos elementos filhos:
  - align-self: flex-start | flex-end | center
  - order: numero

Na última aula (3/3)

Propriedades do grid:
- No elemento pai:
  - display: grid
  - grid-template-rows
  - grid-template-columns
- Nos elementos filhos:
  - grid-row: inicio / fim
  - grid-column: inicio / fim

Hoje veremos…

Divitite - doença e cura com tags semânticas
Especificidade de seletores
Pseudo-classes e pseudo-elements

Tags Semânticas

Curando a divitite

Motivação SEO e Acessibilidade na Web

Doença a divitite

Cura tags semânticas

SEO e Acessibilidade na Web

SEO Sigla para Search Engine Optimization, ou Otimização para Motores de Busca É um conjunto de técnicas para aumentar a possibilidade de um site aparecer no topo dos resultados do Google (e outros motores de busca)

Acessibilidade Possibilidade de uma pessoa consumir conteúdo das páginas web independente de condições físicas Pessoas cegas usam um programa especial (o “leitor de tela”) que lê o código HTML em voz alta para elas

Divitite

Sintomas
- Um acúmulo grande de elementos div e span aninhados

Muitas páginas Web usam div/span da seguinte forma:

<div id="header">...</div>
<div id="footer">...</div>
<div class="article">...</div>
<span class="time">...</div>
<div id="navigation">...</div>

A cura da Divitite: tags semânticas

O dr. HTML5

propôs elementos idênticos às divs/spans, mas que possuem sentido para o navegador. Por exemplo:

<header></header>   <!-- em vez de <div id="header"></div> -->
<footer></footer>   <!-- em vez de <div id="footer"></div> -->
<article></article> <!-- em vez de <div id="article"></div> -->
<time></time>       <!-- em vez de <span id="time"></span> -->
<nav></nav>         <!-- em vez de <div id="navigation"></div> -->

Elementos semânticos (1/3)

<main></main> (block)
- Conteúdo principal da página
<header></header> (block)
- Cabeçalho da página ou de seções (section) ou artigos (article)
<footer></footer> (block)
- Análogo ao header, porém recomendado para que contenha informação típica de um rodapé de página
<article></article> (block)
- Um componente “completo” (ou auto-contido) da página
  - Em um blog, seria um post
  - Em uma loja, seria um produto

Elementos semânticos (2/3)

<section></section> (block)
- Uma seção lógica da página, tipicamente contendo um título
<nav></nav> (block)
- Uma seção da página que contenha links de navegação
- Exemplos:
  - O menu principal da página
  - Tabela de conteúdo (TOC) com links internos

Elementos semânticos (3/3)

<aside></aside> (block)
- Uma seção de conteúdo periférico na página
- Exemplos:
  - Barras laterais
  - Widgets periféricos
  - Conteúdo à parte do principal
<time></time> (inline)
- Representa uma data e/ou horário
<mark></mark> (inline)
- Representa uma marcação no texto (tipo caneta marcadora)

Exemplo de uso - Elementos semânticos

Elementos semânticos pré-HTML5

<address></address> … para endereços

<abbr title=""></abbr> … para abreviações

<blockquote></blockquote> … para citação em bloco

<q></q> … para citação em linha

<cite></cite> … para referência

<code></code> … para código fonte

<kbd></kbd> … para teclas do teclado

<figure></figure> … imagem, tabela ou gráfico

<figcaption></figcaption> … legenda de imagem, tabela ou gráfico

Especificidade de seletores

Aplicando regras

Mais de uma regra definindo a mesma propriedade
Regras de especificidade
CoutoSan Especificator(tm)

Motivação

Dadas mais de uma regra CSS definindo a mesma propriedade para um elemento, qual prevalece?

Como determinar qual a cor do elemento?

<style>
  h4 { color: black; }
  h4 { color: white; }      
</style>

<h4>Arthur Dent</h4> <!-- qual a cor de Arthur Dent? -->

Mais Difícil…

<style>
  .destaque { color: red; }
  #titulo   { color: green; }
  h4        { color: blue; }
</style>

<h4 id="titulo" class="destaque">Ford Prefect</h4>

E agora??
Os 3 seletores se aplicam ao elemento!
- Mas com prioridades diferentes
- (↑) mais específico o seletor da regra → (↑) maior sua prioridade
  - Neste caso, <h4 style="display: inline; color: green;">Ford Prefect (green)</h4>

Regras gerais de especificidade

Regra 1 … Cada seletor tem uma pontuação de especificidade

Regra 2 … Se dois seletores selecionam o mesmo elemento, mas com pontuações diferentes, ganha aquele com pontuação maior

Regra 3 … Se dois seletores selecionam o mesmo elemento e têm a mesma pontuação, ganha o que foi declarado por último

Regra 4 … Estilo Inline >> Arquivo Externo e Incorporado

Regra 5 … ID >> classe e atributo >> tag

Cálculo da pontuação de especificidade

Especificação na W3C sobre CSS3 Selectors
Algoritmo:

A … Contar o número de IDs no seletor

B … Contar o número de classes, atributos e pseudo-classes no seletor

C … Contar o número de tags e pseudo-elementos no seletor

. … Concatenar os três números (ABC)

#posts-recentes .post.novidade > h2 {
  /* id: 1, classes: 2, tag: 1 */
  /* pontuação: 121 */
}

Exemplos e Exercício

Exemplos:

/* seletor { propriedades }  abc */
li { }                    /* 001 */
.destaque { }             /* 010 */
li.destaque { }           /* 011 */

#rodape { }               /* 100 */
#rodape #logo { }         /* 200 */

a[href^="www"] { }        /* 011 */
tr:hover { }              /* 011 */
.curiosidade::before { }  /* 011 */

ul li { }                 /* 002 */
ul > li { }               /* 002 */
h1, h2 { }           /* 001, 001 */

Qual é a cor do texto?

<style>
  #a .b .c { color: red; }
  .d .e .f { color: green; }
  .g .h #i { color: blue; }
</style>
<p id="a" class="d g">
    <strong class="b e h">
        <em id="i" class="c f">Texto</em>
    </strong>
</p>

Resposta no JSFiddle

CoutoSan™ Specificity

(a) IDs

(b) Classes, atributos e pseudo-classes

Pseudo-classes e Pseudo-elements

Mais alguns seletores

Pseudo-class … permitem selecionar elementos em diferentes situações

Pseudo-element … permitem estilizar certas partes de elementos

Pseudo-classes

Indicam um estado (situação) de um elemento. Exemplos:

.link-para-comprar:hover { /* :hover (mouse em cima), mas tbm há :active, :visited... */
  text-decoration: underline;
}

Algumas das pseudo-classes mais comuns:
- :focus contém o foco
- :hover mouse em cima
- :first-child é o último filho
- :last-child é o último filho
- :not() exceto que
- :nth-child() é o n-ésimo filho
- :nth-of-type() n-ésimo filho de tag
- :checked caixa marcada
Lista com todas na MDN

Exemplos com pseudo-classes

Estilização de links:
```
a:link {
  text-decoration: none;
  color: cornflowerblue;
}
a:visited {
  color: gray;
}
a:hover {
  text-decoration: underline;
} 
a:active {
  color: darkred;
}
```
Site do Pudim
Realçando o foco:
```
*:focus {
  outline: 3px dashed yellow;
}
```
Digite seu nome: Digite seu email Digite a senha Confirme a senha
Pegando 1º de tipo:
```
article:nth-of-type(1) {
  width: 100%;
}
article:not(:nth-of-type(1)) {
  width: 50%;
}
```
Primeira manchete
Esta é a primeira nóticia e ela fala sobre os animais que estão enjaulados no zoológico da asa leste da cidade de Itapecerica da Serra.

Segunda manchete
Esta é a segunda nóticia e ela fala sobre os animais que estão enjaulados no zoológico da asa leste da cidade de Itapecerica da Serra.

Terceira
Esta é a terceira nóticia e ela fala sobre os animais que estão enjaulados no zoológico da asa leste da cidade de Itapecerica da Serra.

Pseudo-elements

Indicam partes de um elemento. Exemplos:
```
p::selection {
  color: white;
  background-color: hotpink;
}
```
<p>Me selecione, bem aqui ←</p>
Pode-se usar tanto ::pseudo-element quanto :pseudo-element

Pseudo-elements comuns

Os pseudo-elements mais comuns:
- ::selection - seleção de texto
- ::placeholder - descrição de input
- ::before - conteúdo “pré-conteúdo”
- ::after - conteúdo “pós-conteúdo”
- ::first-letter - primeira letra
- ::first-line - primeira linha
Lista com todos na MDN

Exemplo de ::first-letter:
```
p:first-of-type::first-letter {
   float: left;
   font-size: 5em;
   line-height: 0.6em;
   padding-top: 0.1em;
}
```
Esta é a primeira nóticia e ela fala sobre os animais que estão enjaulados no zoológico da asa leste da cidade de Itapecerica da Serra.

Exemplo de ::before

Por exemplo, como colocar um texto de “Novidade!” antes de cada notícia?

.novidade::before {
  content: "Novidade!";
  display: inline-block;
  background: orange; /* ... */
}

Resultado:

É muito comum que um site tenha um “menu principal” que é uma lista de itens na horizontal . #comofaz?
1. Tirar o padding-left da <ul> ➡️
2. Transformar <li>s em inline-block ou usar flexbox para a <ul> 🌟
3. Tirar “bolinha” dos itens:
```
#menu-principal {
  list-style-type: none;
}
```
4. Colocar um espacinho pequeno entre os <li>
5. Estilizar <li> ou <a> no estado de :hover indicando ser “clicável”
6. Preencher (padding) os links em <li> para aumentar área “clicável”

Referências

Capítulo 12 do livro
Capítulo semantics do livro diveintohtml5.org
Propriedade display na MDN
Propriedade visibility na MDN
Propriedade opacity na MDN