---
# System prepended metadata

title: 'Playlist: HTML e CSS'

---

# Playlist: HTML e CSS
autora: Isabela Silva Sousa

[toc]

## Ambiente
>[color=orange]
> - **Preparação para o nosso ambiente de desenvolvimento**
> - Instalação do Visual Studio Code
> - Extenções no VSCode
(vscode - icons 11.50)
> - **Comandos podem ser rodados a partir de um comando (Ctrl + shift + P)**

## Primeiro Projeto
>[color=orange]
> - Visual Code
> **selecionar pasta (local de trabalho)**
> - HTML/CSS
> **Extenssão de um arquivo web**
> - Criar estrutura HTML para o projeto

> **ex: index.html**
```htmlmixed=
<Html>
<Head>
  <title>Doc</title>
</Head>
   <body>
       <h1>
       Olá tudo bem ?
       </h1>
   </body>
</Html>
```
>[color=orange]
>- Conceitos iniciais
>**HTML é uma linguagem formada por tags**
>- Uma tag pode ter uma abertura e um fechamento

> ex: index.html
```htmlmixed=
<html>

</html>
```
>[color=orange]
>- Tag Mãe / Tag Filha
>**Tag Mãe - tag que tem outras tags dentro dela (Tag Filha)**
>- No HTML as tagss sempre representam um elemento do site
>**<head></head>** Tag de configurações internas do site.
>**<body></body>** Representa o conteúdo que será visto na parte visual do site

> **tags iniciais do site**
```htmlmixed=
<html> </html>
<head> </head>
<body> </body>
```

> **tags títulos**
```htmlmixed=
<html> </html>
<head> </head>
<body> </body>
```

> tags iniciais do site
```htmlmixed=
<h1> </h1>
<h2> </h2>
<h3> </h3>
...
<h6> </h6>
```

>[color=orange]
>- Atributo - Fica do lado da Tag de abertura
```htmlmixed=
<p align="right">ola tudo bem???</p>
```

>[color=orange]
>- Não temos limetes de atributos
>- Dentro da tag temos o que chamamos de conteúdo 
```htmlmixed=
<p>ola tudo bem???</p>
```

>[color=orange]
>- Podemos colocar o CSS dentro da tag "Head", abrindo a tag "style"

```htmlmixed=
<head>
<style>
...códigos css...
</style>
</head>
```
- **W3School - Site que tem todas as tags HTML e CSS que existem**

>[color=orange]
>- Tag para inserir imagens 
>(tag img)

```htmlmixed=
<img src="...endereço da imagem..."/>
```

## Boas práticas de organização
>[color=orange]
>- **src**
>**assets**
>  audios - **adicionar audios do site**
>  videos - **adicionar videos do site**
>  images - **adicionar imagens do site**
>  fonts - **adicionar as fontes do site**
>**pages**
>  index.html
>  index.css - **guarda todo  conteúdo da tag style, ou seja, html e css ficam separados**.
>- Com o CSS separado temos que linkar o arquivo CSS na tag head no HTML para reconhecer o CSS e poder perfumar o site

temos que fazer referência aos arquivos dentro das pastas para adicionarmos dentro dos códigos.

```htmlmixed=
<img src="../assets/images/nome do arquivo da imagem"/>
```

>[color=orange]
>- @Font-Face
>Importação de fonte

```css=
@Font-Face {
Font-Family:Discord;
src: url('../assets/fonts/nome do arquivo da fonte');
}
```
## Posicionamento com FlexBox

**FlexBox**
**Primeira regra:** 
>[color=orange]
>- As coisas só podem acotecer se marcamos a div mãe como FlexBox.

## CSS

- **Podemos formatar mais de uma classe**
```css=
.Telefone, Email {
 color: ...
}
```
      Temos que saber a ordem da sobrescrita

>[color=orange]
>- div vinculada a duas classes ao mesmo tempo : 
Não precisamos separa-las com vírgula, basta colocar um espaço

```css=
.Contatos div {
 color: ...
}
```

>[color=orange]
>**Quando colocamos a vírgula falamos que queremos formatar os dois ao mesmo tempo**
>**Sem a vírgula quer dizer que queremos formatar as divs dentro de contatos**


>[color=orange]
>**Considera todos os filhos de contato e vais procurar o primeiro irmão e ver se é uma div. Se for ele aplica a formatação, se não for ele não aplica.**
```css=
.Contatos div:nth-child(1) {
 color: ...
}
```

>[color=orange]
>**Entre as filhas de contato que são divs selecione apenas a segunda, dessa forma conseguimos chegar na formatação colocada com CSS.
```css=
.Contatos div:nth-of-tyoe(2) {
 color: ...
}
```

>[color=orange]
>**Queremos formatar o h1 entre as filhas de contatos que são divs formatar apenas a segunda.**
```css=
.Contatos div:nth-of-tyoe(2), h1 {
 color: ...
}
```
## Fonts

**REMOTA / LOCAL**

- **Import**
usamos no CSS

- **Link**
usamos no html

- Importar fonte como fonte local
```css=
@Font-Face {
  font-family: ...;
  src: url('../assets/fonts/nome da fonte');
}

```

## Unidades de Medida
>[color=orange]
>- (medida padrão) - **16px** é uma medida absoluta 
>- **1em** é uma medida relativa
>1em = 16px
>2em = 32px

>[color=orange]
>**rem - vai pegar o valor inicial do sipositivo e vai manter em.**

>[color=orange]
>**Unidades de medida**
>px / em / rem / % / vh / vw
>**E cada uma é categorizada em uma área seja ela relativa ou absoluta**

>[color=orange]
>- **Absoluta** - Não se importa com parents (elementos pais)
>- **Relativas** - São geradas a partir da tag

## Espaçamento

- Margin
- Padding
- Paddin-Top

## Redimensionamento 

- Height
- Width
- Min-width
- Max-width
**Container FlexBox**

## Background

- **Background-Attachment** - fixa o background
- **Background-image**
- **Background-size**
- **Background-position**
- **Background-repeat**
(cover, auto, px, em, %)

