# 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, %)
{"metaMigratedAt":"2023-06-16T06:19:58.184Z","metaMigratedFrom":"Content","title":"Playlist: HTML e CSS","breaks":true,"contributors":"[{\"id\":\"efa8ac71-fa69-4ab5-8a89-20016d037e45\",\"add\":5136,\"del\":53}]"}