cefet_front_end

CSS parte 2

História, a Cascata e outros Seletores e Ferramentas

Na última aula… (1/4)

Ferramentas de Produtividade

Boas ferramentas possuem: Destacamento de código fonte, indentação e autocompletar
Atalhos interessantes no VS Code/Atom/Sublime
- Abertura de pasta inteira
- Esqueleto básico de um arquivo HTML
- Uso do tab ↔️ após uma tag para autocompletar
- Atualização automática do navegador ao salvar

Na última aula… (2/4)

Codificação e DOCTYPE

Codificação do arquivo
- Como um texto é armazenado em seu computador?
  - ASCII
  - UNICODE e UTF-8
Versão do HTML
- DOCTYPE:
```
<!DOCTYPE html>  
```

Na última aula… (3/4)

Sobre CSS

Seletores de classe: uso de .curiosidades para selecionar uma classe curiosidade (previamente definido na tag pelo atributo class )
Incluindo arquivos CSS:
```
<link rel="stylesheet" href="estilos.css">
```
- Vantagem: Reaproveita o estilo para diversas páginas

Na última aula… (4/4)

Cores e gradientes

Cores

/* nome */
black, blue, green, white,
purple, forestgreen,
cornflowerblue, etc.

/* notação rgb/a */
rgb(255, 129, 100)
rgba(255, 129, 100, 0.5)

/* notação hexadecimal */
#ffca38
#ffca38cc

Gradientes (degradês):

p {
  background-image: linear-gradient( 45deg, blue, #00FF00 );
}

Hoje veremos

Ferramentas do Desenvolvedor
Aprofundando em CSS
- História
- A cascata
- Outros seletores

Ferramentas do Desenvolvedor

Investigando erros e experimentando propriedades

Ferramenta do Google Chrome
Alterando/testando propriedades
Investigando erros
1. “Criei uma regra e ela não funcionou”
2. “Apliquei uma propriedade e ela não apareceu”
3. “Coloquei uma imagem ou arquivo CSS e não apareceu”

Ferramenta do Desenvolvedor

Ferramenta do desenvolvedor do Chrome

O HTML visto como uma árvore

Uma árvore com os elementos HTML

Exemplo: Alterando/testando propriedades

Usando as ferramentas

Visualizando o código fonte da página:
- Tecla de atalho no Chrome: Ctrl+U
- Ou então:
  1. clicar com botão direito do Mouse na página
  2. selecionar “Exibir código fonte da página”
Ferramenta do desenvolvedor:
- Tecla de atalho padrão: Ctrl+Shift+I ou F12
- Ou então:
  1. clicar com botão direito do Mouse na página
  2. selecionar “Inspecionar”

Vejamos alguns exemplos de como as ferramentas podem ajudar…

Investigando - “Criei uma regra e ela não funcionou“

Investigando - “Nova propriedade não funcionou“

Investigando - “Arquivo não apareceu“

Aprofundando
em CSS

CSS: Folhas de Estilo
em Cascata

História
A cascata
Outros seletores

História

1989 - 1993

Tim Berners-Lee cria a WWW em CERN e a deixa aberta ao público geral

1994

Foto de Håkon Wium Lie

Håkon Wium Lie propõe uma linguagem com a responsabilidade
de alterar a aparência de páginas web chamada CSS

1996

Juntamente com Bert Bos, Håkon publica a especificação do CSS1 1998

Já gerenciado pela W3C, o CSS2 foi publicado

1998 - 2014

Desenvolvimento da especificação do CSS3 (living standard)

2013

Håkon tornou-se CTO na Opera Software

A Cascata

CSS é a sigla para Cascading Style Sheets
Algumas propriedades são herdadas dos elementos ascendentes
```
body {
  color: #ff0000; /* mesmo que 'red' */
}
```
- Todo o texto que estiver dentro de <body>...</body>, mesmo que dentro de parágrafos ou outros elementos, ficarão vermelhos (!)
  - Título
    ⋮ <style> body { color: red; } </style> </head> <body> <h1>Título</h1> ⋮

Exemplo da cascata

Clique nas abas “HTML”, “CSS” e “Result”. Para editar o código, clique em “Edit in JSFiddle”

Algumas propriedades (ex: color) são herdadas pelos descendentes, outras não (ex: border)

Cascata: propriedades não-herdadas

Para as propriedades que não são herdadas por padrão (e.g., border), podemos forçar que sejam herdadas usando o valor inherit:
```
p {
  border: 1px solid red;
}
em {
  border: inherit;
}
```
Este é um parágrafo (<em> em 'parágrafo')

Cascata: sobrescrita de propriedade

Também podemos sobrescrever a herança de uma propriedade:

body {
  font-weight: bold;
}
em {
  font-weight: normal;  /* ou, então, font-weight: initial */
}                       /* initial é o valor padrão para aquela tag */

Este é um parágrafo (<em> em 'parágrafo')

Seletores

Regra CSS

Até agora, já sabemos selecionar elementos de 03 formas:
1. Pelo nome de sua tag: p { color: white; }
2. Por (uma de) suas classes: .livro { color: red;}
3. Por seu id: #manchete-principal { color: green; }
Contudo, a vida não para por aí…
- Há 20+ tipos de seletores (dos quais já vimos 3)
- Não é necessário decorar todos, apenas saber que existem para poder consultá-los (Google) depois ;)

Desafio #1

Colorir de laranja apenas os links dentro da lista não ordenada:

Poderíamos usar uma classe (.marca-de-sabao) nos links da lista
- Mas há uma forma melhor!
- É possível fazer isso sem alterar o HTML!
  - ul a { /* todo <a> dentro de uma <ul> */ color: orange; }
    - Sabão Omo
    - Sabão Ariel
    Voltar para cima

Seletores de Descendente e Filho direto

Formato: X Y (antecessor, espaço, elemento selecionado)
- Exemplo:
```
ul a {
  text-decoration: none;
}
```
  - Descrição: seleciona todos hiperlinks a que têm um ul como antecedente (pai, avô, bisavô etc.)
Formato: X > Y (pai, sinal de maior, elemento selecionado)
- Exemplo:
```
#menu-principal > ul {
  padding: 20px;
}
```
  - Descrição: seleciona todos os ul que têm #menu-principal como pai

Exemplo: Descendente vs Filho direto

<p>
  <strong>Ola! <a href="http://www.google.com">Este é meu link! </a></strong>
  <a href="http://www.terra.com.br">Esta é uma outra pagina</a>
</p>
<a href="http://google.com">Este é outro link</a>

p > a { /* <a>s filhos de um <p> */
text-decoration: line-through;
}
p a { /* <a>s descendentes de um <p> */
color: red;
}

Ola! Este é meu link! Esta é uma outra pagina

Este é outro link

Desafio #2

Colocar uma borda rosa apenas nas imagens .jpg:

Poderíamos usar uma classe (.formato-jpg) nessas imagens…
- Mas há uma forma melhor!
- É possível selecionar elementos de acordo com seus atributos!
```
img[src$=".jpg"] {
  border: 5px solid hotpink;
}
```

Seletores de Atributo

Podemos selecionar elementos HTML de acordo com seus atributos:
- ```
a[href] {
  color: blue;  /* [a] */
}
a[href="http://google.com"] {
  color: blue;  /* [b] */
}
a[href^="http"] {
  color: blue;  /* [c] */
}
a[href$=".com"] {
  color: blue;  /* [d] */
}
a[href*="google"] {
  color: blue;  /* [e] */
}
```
- Há 5 variações:
  - [a] existência do atributo: [atributo]
    - Neste caso, todo <a> que possua href
  - [b] valor inteiro: [atrib="valor"]
  - [c] começo do valor: [atrib^="inicio"]
  - [d] fim do valor: [atrib$="final"]
  - [e] trecho do valor: [atrib*="trecho"]
  - Repare que esses seletores podem ser usados com qualquer elemento:
    img[alt] { border: 5px solid red; }

Exemplos de seletores de atributos

a[href$=".br"] {
  background-image: linear-gradient(45deg, green, yellow);
}
img[alt*="ninja"] {
  border: 3px solid black;
}
a[href^="http"] {
  color: purple;
}

<img src="img/a.png" alt="esta é uma ovelha">
<img src="img/b.png" alt="este é um ninja">
<a href="http://www.terra.com.br">Um site brasuca<a>
<a href="http://www.cnn.com">Um site gringo<a>

esta é uma ovelha Um site brasuca Um site gringo

Desafio #3

Tirar o sublinhado do hyperlink quando passar o mouse sobre ele:

A única forma de fazer é usando seletores de estado:
- ```
a:hover {
  text-decoration: none;
}
```

Seletores de Estado

Podemos selecionar elementos HTML de acordo com seus atributos:
- ```
a:link {
  color: blue;  /* [a] */
}
a:hover {
  color: cyan;  /* [b] */
}
a:active {
  color: gold;  /* [c] */
}
```
  Um link
- Há pelo menos 3 estados:
  - [a] situação inicial :link
  - [b] mouse em cima: :hover
  - [c] começo do valor: :active
  - Repare que os seletores :hover e :active podem ser usados com outros elementos:
    tr { background-color: white; } tr:hover { background-color: silver; }

Desafio #4

Centralizar todas imagens exceto uma ou outra:

Isso poderia ser feito colocando classes/ids nos elementos
- Mas há outra forma, com o seletor de negação:
```
img:not(#logo) {
  display: block;
  margin: 0 auto; /* vertical: 0, horizontal: auto */
}
```

Seletor: Negação

Formato: X:not(seletor)
Exemplo:
```
p:not(.destacado) {
  color: gray;
}
```
Descrição: seleciona todos os elementos que não passem pelo teste do seletor
- Ou seja, no exemplo, seleciona todos os <p> que não possuam a classe .destacado

Outros seletores

A parte dos seletores “com dois pontos” (eg, :not(), :hover) é chamada de pseudoclasse. Veja todas aqui.

Seletores de posição dentro do pai:
- X:first-child
- X:last-child
- X:nth-child(n)
Seletores de posição de um tipo:
- X:first-of-type
- X:last-of-type
- X:nth-of-type(n)

Exemplo de nth-child:

<table>
  <tr><td>Linha 1</td></tr>
  <tr><td>Linha 2</td></tr>
  <tr><td>Linha 3</td></tr>
  <tr><td>Linha 4</td></tr>
</table>

tr:nth-child(2n) {   /*par*/
  background: white;
}
tr:nth-child(2n+1) { /* ímpar */
  background: silver;
}

A	Linha 1
B	Linha 2
C	Linha 3
D	Linha 4

Atributo alt da imagem

Descreve textualmente a imagem
É recomendável que todas as imagens utilizem esta propriedade
Útil quando:
- ocorreu algum erro no endereço imagem;
- conexões lentas;
- utiliza-se um leitor de tela para navegar na página.
Deve descrever bem a imagem
- É a única descrição da imagem que uma pessoa cega tem ao acessar a página
- Assista como uma pessoa cega navega na Web

Atributo alt da imagem - Exemplo

Exemplo (imagem com endereço errado):

<img alt="Imagem de uma ovelha pirata" src="imagem-inexistente.jpg">

Imagem de uma ovelha pirata

Elemento iframe

Usada para embutir outra página web dentro da atual
Exemplo:
```
<iframe src="https://willsallum.github.io/cefet_front_end_ajax/"></iframe>
```
- Usos comuns:
  - Colocar um vídeo do Youtube na página
  - Colocar um mapa do Google Maps na página

Referências

Capítulo 7 do livro
Os 30 seletores CSS que você precisa memorizar (inglês)