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

CSS parte 1

Seletores de classe, Flutuação e Abelhas 🐝

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
Abelhas 🐝 e suas castas

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

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

Como o texto é armazenado em seu computador?

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

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

*[IANA]: Internet Assigned Numbers Authority

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 ~ ```xml


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

HTML5 ~ ```xml


Hoje em dia usamos sempre HTML5 😉 <!-- {.flex-align-center} -->

---
<!-- {"layout": "section-header", "hash": "reaproveitando-codigo-css"} -->
# Reaproveitando código CSS
## Seletor de classe, incluindo arquivo e mais sobre cores

- Seletor de classes
- Incluindo arquivos **CSS**
- Cores e Gradientes
<!-- {ul:.content} -->

---
<!-- {"layout": "centered-horizontal", "embedSVG": "img[src$='.svg']", "styles": ["../../styles/classes/css-rule-anatomy.min.css"]} -->
## Relembrando... **regra CSS**

- ![](../../images/css-rule-anatomy.svg) <!-- {.css-rule-anatomy.rule.push-right data-viewbox="56 0 90 10" style="width: 250px"} -->
- ![](../../images/css-rule-anatomy.svg) <!-- {.css-rule-anatomy.declaration.selector.push-right data-viewbox="50 10 150 65" style="width: 370px"} -->
- ![](../../images/css-rule-anatomy.svg) <!-- {.css-rule-anatomy.property.value.push-right data-viewbox="56 30 90 65" style="width: 250px"} --> <!-- {ul:.card-list} -->


---
## Problema: **selecionando** elementos

- Como fazemos para selecionar (_e.g._): <!-- {ul:.bulleted} -->
1. apenas **alguns parágrafos** em vez de todos?
1. apenas o **primeiro título h2** da página?
1. 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 <cite>Coutinho & Hasan, 2021</cite>
>
- Vamos ver diferentes formas para isso...

---
## Selecionar **por nome de _tag_**

- Até agora, estilizamos elementos HTML de duas formas:
- **Primeira forma:** Selecionando a _tag_:
```css
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

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! 😱

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

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 );
}

Abelhas 🐝 e suas castas

🍯 🍯 🍯 🍯 🍯

A atividade das abelhas
Flutuando coisas
Pesquisando novas propriedades CSS/elementos HTML

Abelhas 🐝 e suas castas

Baixe as imagens e páginas que serão usados
1. Descompacte o arquivo cefet-front-end-bees-master.zip na área de trabalho
  - Isto criará uma pasta com o nome cefet-front-end-bees-master lá
2. Renomeie a pasta criada na área de trabalho para site-abelhas
  - Esta é a pasta raiz do site - onde devem ficar os arquivos .html
3. Veja instruções detalhadas aqui

Flutuando coisas

Jornais e revistas costumam colocar imagens junto ao texto para fazer uma bela diagramação do conteúdo Coutinho, 2017 Isso se chama deixar o elemento (e.g., imagem) flutuando Hasan, 2017

Na web também queremos fazer isso!

Como flutuar elementos usando CSS?

Vamos conhecer um nova propriedade: float

Propriedade `float`

Usado para alterar o fluxo tradicional da página

Em CSS:

img#abelha-operaria {
  float: left; /* left, right, none */
}              /* none é o valor padrão - sem flutuação */

No HTML:

<img id="abelha-operaria" src="...">
<p>Texto ...</p>

Como funciona o `float`

Um elemento flutuante é removido do fluxo tradicional e
- os elementos block depois dele fingem que ele não está ali
- os elementos inline depois dele respeitam seu formato
Vamos fazer com que o parágrafo com id="amazing" flutue à direita nos próximos 2 slides...

Exemplo de `float` (1º passo)

Alterando a largura de um parágrafo para 200px
```
p#amazing {
  width: 200px;
}
```

Exemplo de `float` (2º passo)

Flutuando o parágrafo à direita
```
p#amazing {
  width: 200px;
  float: right;
}
```
- Repare que:
  - Elementos declarados antes do parágrafo flutuante não são alterados
  - Elementos declarados depois:
    - Se forem block, ignoram o elemento flutuante
    - Se forem inline, respeitam o elemtno flutuante

Arredondando bordas

Como arredondar bordas?
- Há muitas propriedades CSS que não teremos tempo de ver no curso
- Contudo, a Web é uma ótima fonte de informação
- Pesquise "como arredondar bordas em CSS" no Google, por exemplo

Referências

Capítulos 5 e 6 do livro

Files

css1

Directory actions

More options

Directory actions

More options

Latest commit

History

css1

Folders and files

parent directory

README.md

CSS parte 1

Seletores de classe, Flutuação e Abelhas 🐝

Na última aula...

Hoje veremos

Editores de texto

Ferramentas para edição e melhoria da produtividade

Como ser mais produtivo

Sugestão do professor: VS Code 🌟

Abrindo uma pasta inteira

Digitando sem erros

Atualização automática ao salvar

Codificação e DOCTYPE

Como o texto é armazenado em seu computador?

Codificação ASCII

Tabela ASCII (um pedacinho)

Codificação Unicode e UTF-8

Codificação em uma página web

DOCTYPE - Versão do HTML

Valores do DOCTYPE

Selecionar por id

Selecionar por classe

Selecionar por classe (cont.)

Incluindo arquivo CSS

Referenciando o CSS usando a tag link

Referenciando o CSS : Exemplo de atalho no Atom

Cores e Gradientes

Notações: Nome, RGB e Hexadecimal

Nomes

Notação RGB

Notação Hexadecimal

Cores com opacidade (transparência)

Nomes ❌

Notação RGBA

Notação Hexadecimal +AA

Mais exemplos de cores

Escolhendo cores (F12)

Gradientes (ou degradês)

Abelhas 🐝 e suas castas

🍯 🍯 🍯 🍯 🍯

Abelhas 🐝 e suas castas

Flutuando coisas

Como flutuar elementos usando CSS?

Propriedade float

Como funciona o float

Exemplo de float (1º passo)

Exemplo de float (2º passo)

Arredondando bordas

Referências

Selecionar por `id`

Escolhendo cores (`F12`)

Propriedade `float`

Como funciona o `float`

Exemplo de `float` (1º passo)

Exemplo de `float` (2º passo)