cefet_front_end

CSS parte 1

Seletores de classe e Flutuação:

Na última aula…

Tabelas são criadas com as tags
- <table>...</table>, para marcar a tabela
- <thead>...</thead>, cabeçalho, contém linhas
- <tbody>...</tbody>, corpo, contém linhas
- <tfoot>...</tfoot>, rodapé, contém linhas
- <tr>...</tr>, linha da tabela
- <td>...</td>, célula de dados
- <th>...</th>, célula do cabeçalho
- <caption>...</caption>, legenda
Referência na Mozilla Developer Network

Hoje veremos

Editores de Texto
DOCTYPE e Codificação
Reaproveitando código CSS

Editores de texto

Ferramentas para edição e melhoria da produtividade

Editores de texto
Hotkeys

Como ser mais produtivo

Na hora de escrever código HTML, CSS e JavaScript, queremos ter:
- Destacamento (highlighting) de código fonte
- Indentação automática
- Auto-completar tags HTML, propriedades CSS etc.
Editores indicados:
- VSCode (gratuito 🌟)
- Atom (gratuito)
- Sublime Text 3 (pago, faz vista grossa com quem não paga)

Sugestão do professor: VS Code 🌟

Benefícios:
- Gratuito
- Altamente personalizável
- Atalhos úteis
Atenção: os atalhos e sugestões no VS Code só irão funcionar após salvar o arquivo como .html

Abrindo uma pasta inteira

Evite “Open File” (1 arquivo só), abra uma pasta inteira (“Open Folder”)
- Deixa claro quais arquivos compõe a página/site
Salve o arquivo (ex, .html) para ter coloração de sintaxe
Mantenha a indentação. Se precisar corrigir:
1. Ctrl+Shift+P (guia de comandos)
2. Format Document

Digitando sem erros

Solicite do editor o esqueleto básico de uma página HTML
- Digite a palavra “html” e pressione Tab ↔️
Evite usar as teclas < e >
- Digite apenas o nome da tag, depois Tab ↔️
- Assim você fica muito mais rápido
Use os atalhos sugeridos
- Algumas tags já vêem com atributos básicos (ex, <img>)

Atualização automática ao salvar

Instale uma extensão (plugin ou add-on) para atualizar automaticamente o navegador sempre que salvar um arquivo

VS Code
- Live Server (link)
Atom
- Atom Live Server (link)
Efeito colateral: estará acessando o site usando um servidor web

Doctype e Codificação

DOCTYPE no topo de cada documento HTML

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

Como o texto é armazenado em seu computador?

Exemplo de Codificação de Texto

Arquivos HTMLs são representados como arquivos textuais;
Porém, internamente, eles são armazenados no formato numérico em binário
Codificação é um mapeamento de letras para números;
Na web há vários tipos de codificações:
- (1) ASCII, (2) UNICODE, …

Codificação ASCII

ASCII é um dos mais antigos padrões de codificação
Cada caractere (letra) é representada por um número
Esta codificação possui:
- Letras do alfabeto latino/romano
- Pontuações
- Números e símbolos matemáticos
- Símbolos de controle (tab, espaço…)

Tabela ASCII (um pedacinho)

Código	Letra
⋮	⋮
32	Espaço
33	!
34	”
⋮	⋮
65	A
66	B
67	C
⋮	⋮

Código	Letra
⋮	⋮
97	a
98	b
99	c
⋮	⋮

Codificação Unicode e UTF-8

Unicode provê o suporte multilíngua
- Diversos alfabetos, não apenas o romano/latino
UTF-8 é uma codificação que usa uma sequência de 8 bits para armazenar códigos UNICODE
- Os 128 primeiros caracteres UTF-8 são idênticos aos ASCII
  - Ou seja, todo o alfabeto, pontuações mais comuns e números
```
...
<head>
  <meta charset="utf-8">  
  <title>...</title>
  ...
```
Em HTML, dentro do <head> da página, usamos uma <meta> tag com o atributo charset para isso ➡️
- Essa tag deve aparecer nos primeiros 1024 caracteres da página (entenda)
Para ASCII, seria <meta charset="ISO-8859-1"> (ASCII romano/latino)

Codificação em uma página web

Foto do VS Code mostrando a codificação do arquivo aberto

Além do arquivo HTML especificar, o próprio arquivo deve estar salvo usando UTF-8. No VS Code ➡️
Opções de codificação são gerenciadas pela IANA e podem ser vistas aqui

⬅️ Caso haja divergência de codificação, alguns caracteres podem não aparecer corretamente

DOCTYPE - Versão do HTML

Especifica qual a versão do HTML que estamos usando. Formato:
```
<!DOCTYPE ... >
```

Deve ser a primeira “tag” em um arquivo HTML

Não pode haver nem comentários antes:

<!DOCTYPE html> ✔️
<html>
...
<!-- um comentário --> ❌
<!DOCTYPE html>
<html>

Valores do DOCTYPE

HTML 4.01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.1

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML5

```
<!DOCTYPE html>
```

Hoje em dia usamos sempre HTML5 😉

Reaproveitando código CSS

Seletor de classe, incluindo arquivo e mais sobre cores

Seletor de classes
Incluindo arquivos CSS
Cores e Gradientes

Relembrando… regra CSS

Problema: selecionando elementos

Como fazemos para selecionar (e.g.):
1. apenas alguns parágrafos em vez de todos?
2. apenas o primeiro título h2 da página?
3. apenas uma imagem em especial?
Uma solução possível é usar os atributos universais¹ HTML chamados class e id para identificar os elementos e estilizá-los

¹Atributos universais: aqueles que qualquer elemento pode ter Coutinho & Hasan, 2021
Vamos ver diferentes formas para isso…

Selecionar por nome de tag

Até agora, estilizamos elementos HTML de duas formas:
Primeira forma: Selecionando a tag:
```
p {
  color: blue;
}
```
- Isso faz com que todos os parágrafos fiquem com a cor azul

Selecionar por `id`

Segunda forma: selecionando 01 elemento em específico
- Supondo que temos: <p id="resumo">Este é o resumo da notícia...</p>:
```
#resumo {
color: blue;
}
```
- Deixando de cor azul apenas o parágrafo cujo id é resumo.
- Contudo, não pode haver mais de 1 elemento com o mesmo id
- Como fazemos, então, para estilizar não apenas 01, mas um subconjunto de elementos da forma como queremos?
  - Resposta: usando classes

Selecionar por classe

Dada a seguinte estrutura de um <body></body>:

<p>Primeiro</p>
<p>Segundo</p>
<p>Terceiro</p>

Para criar uma regra CSS para, digamos, os dois primeiros parágrafos, podemos alterar a estrutura HTML para:

<p class="destacado">Primeiro</p>
<p class="destacado">Segundo</p>
<p>Terceiro</p> <!-- continua no próximo slide -->

Selecionar por classe (cont.)

E, em um arquivo CSS, podemos escrever o nome da tag, seguido por um ponto “.”, seguido pelo nome da classe:
```
p.destacado {
  font-weight: bold; /* negrito */
}
```
Ou, se quisermos usar a classe destacado para outros elementos além de <p></p>, podemos omitir o nome da tag:
```
.destacado {
  font-weight: bold;
}
```

Incluindo arquivo CSS

Métodos para incluir um arquivo `.css` num documento HTML

Por enquanto, colocamos o CSS dentro do arquivo HTML

 <style> /* reaproveitamento de código CSS dentro do arquivo */
   p {
     color: #fff;
   }     /* misturamos código CSS dentro do arquivo HTML */
 </style>

Mas isto é uma prática ruim! :scream:

Referenciando o CSS usando a tag link

Um arquivo HTML pode referenciar (“incluir”) um CSS assim:
```
<link rel="stylesheet" href="arquivo-de-estilos.css">
```
- Mais de um arquivo HTML pode usar esse CSS
  - Reaproveitamento de código CSS
- Caching do arquivo CSS: o arquivo é baixado apenas uma vez e usado sempre que necessário
  - Útil se o site tem várias páginas
Quando o navegador lê essa linha, ele baixa esse arquivo CSS e o interpreta

Referenciando o CSS : Exemplo de atalho no Atom

Esqueceu toda a sintaxe (forma de escrita)?
Digite apenas link e, logo após, aperte Tab ↔️:
O mesmo vale para o VS Code

Cores e Gradientes

Notações: Nome, RGB e Hexadecimal

Nomes

 red
 cyan
 gold
 forestgreen
 cornflowerblue
 rebeccapurple
⋮

Notação RGB

rgb(verme, verde, azul)

rgb(…) com número entre 0…255 para vermelho, verde, azul

Notação Hexadecimal
```
#vmvdaz
```
- ’#’ + 2 caracteres para vermelho, verde, azul
- (0…9, A(10)…F(15))

Exemplo:

p {
  color: cyan;
}

Exemplo:
```
p {
 color: rgb(0, 255, 255);
}
```

Exemplo:
```
p {
  color: #00ffff;
}
```

Cores com opacidade (transparência)

Nomes ❌
```
 red
 cyan
 gold
 forestgreen
 cornflowerblue
 rebeccapurple
⋮
```
- Não tem como 1. ### Notação RGBA
```
rgba(verme, verde, azul, alpha)
```
- alpha é a opacidade da cor
  - opacidade = 1 - transparência
- De 0 (transp.) até 1 (opaco)
Notação Hexadecimal +AA
```
#vmvdazaa
```
- 2 caracteres para alpha
- De 0 (transp.) até FF (opaco)

Exemplo:
- Não tem! - Exemplo:
```
p {
 color: rgba(0, 255, 255, 0.5);
}
```
Exemplo:
```
p {
  color: #00ffff80;
}
```

Mais exemplos de cores

```
#FF0033 /* maiúsc. ou min. */
#ff0033
#f03
```
Se ambos caracteres de cada componente em hexa são iguais (ex: #ff0033), pode escrever só 1 de cada (ex: #f03)

rgb(255, 0, 51)
rgb(100%, 0%, 20%)
rgba(255, 0, 0, 0.1)         

Em vez de 0…255, pode escrever 0%…100%

hsl(60, 100%, 50%)
hsla(240, 100%, 50%, 0.05)   

Também existe hsl(hue, sat, light), mas é menos comum

Escolhendo cores (`F12`)

Gradientes (ou degradês)

linear-gradient é um valor válido para background-image, e não para background-color nem para color
- Veja a documentação do que é um gradient

result . max-width: calc(100% - 600px); 0 graus, iniciando com azul e terminando como verde
```
p {
  background-image: linear-gradient( 0deg, blue, #00FF00 );
}
```
result . max-width: calc(100% - 650px); Começa amarelo e termina azul no canto esquerdo superior
```
p {
  background-image: linear-gradient( to left top, yellow, blue );
}
```

result . max-width: calc(100% - 600px); Azul, branco e verde

p {
  background-image: linear-gradient( 90deg, blue, white 20%, #00FF00 );
}

Referências

Capítulos 5 e 6 do livro