cefet_web

CSS parte 2

Especificidade, propriedade display e posicionamento

---

Na última aula… (1/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

1. Especificidade de seletores
2. A propriedade display
3. Posicionamento
   1. Estático
   2. Relativo
   3. Absoluto
   4. Fixo
   5. Grudento (sticky)

---

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 >> Incorporado

Regra 5 ~ ID >> classe >> 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

1. 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

0

(a) IDs

0

(b) Classes, atributos e pseudo-classes

0

(c) Elementos, pseudo-elementos

---

A propriedade display

e seus diversos valores

• Valores:
  • block
  • inline
  • inline-block
  • none
  • table
  • table-row
  • table-cell
  • flex e inline-flex
  • grid e inline-grid
• Alterando a visibilidade

---

A propriedade display (na MDN)

• Define o tipo de visualização de um elemento e também seu comportamento no fluxo da página
• Os valores mais comuns
  • block, para definir um elemento com comportamento block
  • inline, similarmente, para inline
  • inline-block, similar a block, porém sem quebra de linha
  • none, sem renderização

---

A propriedade display (cont.)

• É possível, por exemplo:

  div { display: inline; }
  span { display: block; }
  

  • Mas é claro que você não vai fazer isso… ;)
• Para remover um elemento do fluxo e não renderizá-lo de forma alguma:

  a[href*="xxx"] { display: none; }
  

---

Display: inline-block

• Une a capacidade de se definir dimensões de block e a possibilidade de ter um fluxo lateral (sem quebra de linha), como inline. Exemplo:

  <div class="passo">Instalar</div>
  <div class="passo">Aprender</div>
  <div class="passo">Programar</div>
  

  .passo {
    display: inline-block;
    width: 150px;
    height: 150px; /* ... */
  }
  

---

Resultado do display inline-block

---

Display: table-*

• Alguns valores são para a criação de layouts em formato de tabelas:
  • table, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, table-row-group, inline-table
• Veja alguns exemplos de uso no link

Hoje em dia: preferimos flex ou grid ;)

---

Display: flex e inline-flex

• Mais recentemente, o CSS3 introduziu o flexbox
• É uma forma bem flexível para dispor os elementos
• Cria uma linha (row) ou coluna (column) com os filhos
• Além de display: flex e display: inline-flex, foram introduzidas outras propriedades. Exemplos:

flex-direction ~ row (padrão), column, row-reverse, column-reverse ~ dispõe filhos na horizontal (se row) ou vertical (column)

justify-content ~ flex-start (padrão), center, space-around, space-between… ~ define como distribuir o espaço que sobrou

align-items ~ stretch (padrão), flex-start, center… ~ define posição dos elementos no “contraeixo”

---

Exemplo com flexbox: lista horizontal

ul.horizontal {
  display: flex;
  justify-content: space-around;

  /* tirar coisas que vem na <ul> */
  list-style-type: none;
  padding-left: 0;
}

ul.horizontal > li {
  flex: 1; /* crescer com peso 1 */
  
  /* espacinho e centralização */
  margin-right: 4px;
  text-align: center;
}

• ::: result . text-align: center
  • Abacaxi
  • Kiwi
  • Maçã
  • Uva
  • Limão :::
• Veremos mais sobre flexbox em outra aula

---

Display: grid e inline-grid

• Flexbox é uma ferramenta de 1 dimensão:
  • Cria linha (row) ou coluna (column)
• Mas vários layouts têm 2 dimensões (linhas+cols)
• O display: grid e display: inline-grid criam layouts 2D
• E, como o flexbox, há várias outras propriedades. Por exemplo:

grid-template-rows
grid-template-columns ~ determina os tamanhos das linhas ou colunas ~ ex: auto 1fr auto (3 partes, do meio ocupando o que sobrar) ~ ex: 200px 10% 1fr (3 partes, 1ª fixa, 2ª fluida e 3ª restante) ~ ex: 1fr 3fr (2 partes, 1ª ocupando 1/4 e 2ª 3/4 do espaço)

grid-row
grid-column ~ propriedade de cada filho, define onde ficar nas linhas e colunas, ex: 1 / 3, 1 / 2

---

Exemplo usando grid

• HTML

  <main>
    <header></header>
    <nav></nav>
    <section></section>
    <footer></footer>
  </main>
  

  CSS (elemento pai)

  main {
    display: grid;
    grid-template-rows: 200px 1fr auto;
    grid-template-columns: 300px 1fr;
  }
  

1. CSS (dos filhos)

   header {
     grid-column: 1 / 3;
   }
   
   nav {
     grid-column: 1 / 2;
     grid-row: 2 / 3;
   }
   section {
     grid-column: 2 / 3;
     grid-row: 2 / 3;
   }
   footer {
     grid-column: 1 / 3;
     grid-row: 3 / 4;
   }
   

   ::: result .full-width height: 250px; display: grid; grid-template-rows: 60px 1fr auto; grid-template-columns: 90px 1fr;

   :::

---

Posicionamento

Diferentes fluxos de layout

• A propriedade position
• Fluxos:
  1. Estático (padrão)
  2. Relativo
  3. Absoluto
  4. Fixo
  5. Grudento (sticky)
• Propriedade z-index

---

Relembrando o fluxo padrão

Elementos block ~ Ocupam toda a largura disponível ~ Dispostos de cima para baixo ~ Quebram linha

Elementos inline ~ Ocupam o espaço necessário (não mais) ~ Dispostos da esquerda para direita

---

Alterando o fluxo com float e clear

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

  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

---

Limitações do fluxo padrão

• Mesmo com float e clear não é possível fazer algumas coisas
  • Por exemplo, como colocar um texto em cima de uma imagem?

---

A propriedade position

• A propriedade position permite definirmos se o navegador vai dispor um elemento usando o fluxo padrão ou outro fluxo
• Valores possíveis:
  1. position: static (valor padrão, para o fluxo padrão)
  2. position: relative
  3. position: absolute
  4. position: fixed
  5. position: sticky

---

Posicionamento (1) estático

• O próprio navegador encontra as posições (x,y) dos elementos
• É o valor padrão - usa o posicionamento do fluxo padrão

  <div class="estatico">Conteúdo</div>
  

  .estatico {
    position: static; /* este já é o valor padrão */
  }
  

::: result .full-width.no-margin

.estatico

Conteúdo

:::

• Definir um position: static não altera nada

---

Posicionamento (2) relativo

• O elemento é posicionado como se estivesse no fluxo padrão, mas pode ser deslocado com as propriedades top, right, bottom e left

  <div class="relativo1">Comporta-se como static...</div>
  <div class="relativo2">...Mas pode ter um deslocamento.</div>
  <div>Mais uma divzinha.</div>
  

  .relativo1 { position: relative; }
  .relativo2 { position: relative; left: 30px; top: -10px; }
  

  ::: result .full-width.no-margin font-weight: lighter

.relativo2

Comporta-se como static...

...Mas pode ter um deslocamento.

Mais uma divzinha

:::

---

Detalhes sobre (2) position: relative

1. O elemento continua no fluxo normal, a menos que tenha suas propriedades top :arrow_up:, right :arrow_right:, bottom :arrow_down: e left :arrow_left: ajustadas
   • Mais recentemente foi proposta propriedade inset que é um atalho:

     .item {
       position: relative;
       top: 10px; right: 20px;
       bottom: 30px; left: 20px; 
     }
     .item {
       position: relative;
       inset: 10px 20px 30px; 🤯
     }
     
     

2. A posição do elemento será ajustada com relação à sua posição original (caso ele fosse static)
3. Os elementos posteriores a um elemento com position: relative não são ajustados para ocupar eventuais “buracos” na página

---

Utilidade do (2) position: relative (1/2)

• É útil quando queremos que um elemento fique próximo de onde ele estaria, mas levemente deslocado
  • Legal para “dar um charme” no layout

---

Utilidade do (2) position: relative (2/2)

• Podemos fazer um pequeno deslocamento dando a ideia de botão: ::: figure .push-right.center-aligned
  Click me! :::

  img {
    position: relative;
  }
  
  img:active {
    left: 3px;
    top: 3px;
  }
  

Também utilizamos position: relative para definir um “plano de referência” para os filhos que estiverem com position: absolute (veremos mais adiante)

---

Posicionamento (3) absoluto

• O elemento é colocado nas posições especificadas pelas propriedades top :arrow_up:, right :arrow_right:, bottom :arrow_down: e left :arrow_left:, considerando como referência o ancestral mais próximo que esteja posicionado não estaticamente (relative, absolute ou fixed)
  • Se não houver um ancestral, posiciona de acordo com elemento <html>
• Não ocupa espaço, já que o elemento é removido do fluxo

---

Exemplo de posição (3) absoluta

• <div class="relativo">Este é um recipiente relativo.
    <div class="absoluto">Este é absoluto.</div>
  </div>
  

• .relativo { 
    position: relative;
  }
    
    
    
  .absoluto {
    position: absolute;
    width: 50%;
    right: 30px;
    bottom: 10px;
  }
  

  ::: result .full-width.no-margin

  .absoluto
  Este é um recipiente relativo.

  Este é absoluto.

  :::

---

Utilidades do (3) position: absolute

1. Criar “drop-downs” de opções que não “empurram” a página pra baixo (porque não ocupam espaço)

2. Colocar elementos “um em cima do outro”
3. Posicionar elementos em qualquer lugar na página

---

Detalhes do (3) position: absolute

• O elemento não tem espaço reservado para ele. Em vez disso, ele fica exatamente na posição especificada por top, right, bottom, left relativo ao seu mais próximo antecessor-posicionado (não static)

---

Posicionamento (3) fixo

• O elemento é posicionado de acordo com os valores das propriedades top, right, bottom e left, assim como absolute, porém seu ponto de partida é o canto superior esquerdo da janela
• Não acompanha a rolagem da página
• Não ocupa espaço, já que o elemento é removido do fluxo

1. <div class="fixo">Este é um elemento fixo.</div>
   

   .fixo { position: fixed; right: 0; bottom: 10px; }
   

---

Utilidade do position: fixed

• Manter elementos sempre na mesma posição, independente da barra de rolagem

• Criar caixas de diálogo modais (que o usuário precisa interagir ou fechar)

---

position – Exemplo com todos

• Considere que:
  • A <div> representado pelo quadrado pontilhado está como position: relative
  • A <div> 2 possui as propriedades: top: -20px e left: 30px

---

position	Descrição	Exemplos de uso	top, right, bottom, left	z-index
static	Fluxo normal	Elementos que não requerem posicionamento especial	ignorados	ignorado
relative	Fluxo normal, deslocado	Elementos que podem se deslocar um pouco; elementos contextos para outros absolutamente posicionados	deslocamentos nas 4 direções	determina ordem
absolute	Removido do fluxo, posicionado em um (x,y) relativo a um contexto	Elementos que queremos determinar os valores (x,y) para posicioná-los exatamente em algum lugar	posições referentes às 4 direções	determina ordem
fixed	Removido do fluxo, posicionado em um (x,y) relativo à janela	Idem ao absolute, mas a posição é fixa na janela (e não na página)	posições referentes às 4 direções	determina ordem

---

z-index

• Define a ordem “no eixo Z” com a qual elementos que se tocam deve ser exibida

::: result .flex-align-center

z-index=1

z-index=2

z-index=3

:::

• Útil apenas para elementos position: absolute ou position: fixed

---

Referências

• Capítulo 8 do livro
• keeganstreet/specificity
  • O código por trás do CoutoSan(tm) Especificator