# Playlist: HTML e CSS
Jonathan Fernando Costa Galo, 24 - INFO C
[toc]
## Vídeo 0 - Ambiente
Não tinha Visual Studio Code, por isso baixei e deixei do meu jeito, segue o print abaixo:
---
## Vídeo 1 - Primeiro Projeto
Html é uma linguagem formada por tags, que sempre representam algo(conteúdo) dentro de nosso site e geralmente andam em duplas, uma tag de abertura(<head>, por exemplo) e outra de fechamento(</head>, por exemplo).
As tags principais são:
- HTML
- HEAD
- BORY
As tag geralmente possuem atributos, onde colocamos a tag **style** dentro de head. Dentro das tags é onde fica o conteúdo.
Para colocarmos uma imagem é bem simples basta usarmos a linha de código abaixo:
htmlembedded=
<img src="link da imagem ou nome dela em nossa plataforma de desenvolvimento">
Ela é uma tag que **não** tem fechamento.
---
## Vídeo 2 - Boas práticas e organização
Existe um padrão para organização de nossos arquivos, os padrões de pasta, veja:
Geralmente não deixamos os atributos do Html no próprio arquivo Html e sim criamos um outro arquivo com nome.css, lá colocamos todos os atributos de nosso código Html.
Quando queremos pegar uma imagem pegamos o link da mesma ou a baixamos, quando baixamos precisamos colocar ela dentro de nossa pasta "img" e no código de Html precisamos fazer referência para ela, fazemos isso usando ".." e "/"
Do mesmo jeito que fazemos isso com a imagem, podemos fazer com as fontes basta usarmos o seguinte código(no css):
htmlembedded=
@font-face {
Font-family: NomedaFonte;
src: url("usamos "../" até chegarmos a pasta onde está a fonte")
}
*Obs:* Não perdemos os arquivos quando fechamos no Visual Code.
---
## Vídeo 3 - Ocupação de espaço por tags
Quando queremos ver a divisão das tags de um site usamos:
htmlembedded=
* {
borde: 2px solid red;
margin: 5px;
}
Assim podemos ver o espaço que cada tag usa.
---
## Vídeo 4 - Posicionamento com flexbox
Vamos usar flexbox para alterar o comportamento de posicionamento das tags. Para isso deve haver uma "div mãe", pois ela controla o posicioamento das "tags filhas", que geralmente chamamos de "container". Agora vamos ver no código:
htmlembedded=
.container {
display: flex;
flex-direction: row;(uma tag do lado da outra)
ou
flex-direction: column;(uma tag abaixo da outra)
}
*Obs:*
- Column usa toda a largura da página.
- Ainda há como alinharmos nossas tags através de "Justify-Content". Podemos usar os seguintes valores:
*Flex-Start(Começo do container), **Flex-End(Final do container), **Center* (No meio do container), *Space-Between(Mantém o mesmo espaçamento entra cada item), **Space-Arroud(Mesma coisa do space-batween só que não é grudado nas extremidades) e **Space-Evenly*(Deixa o mesmo espaço em todas as lacunas)
- Para usarmos um espaçamento externo usamos **Magin* e interno usamos *Padding**.
---
## Vídeo 5(CSS) - Seletores
Podemos atribuir classes para as tags, para assim conseguimos dar valores as mesmas no Css, assim como no Html(onde podemos dar até o mesmo nome da classe as tags). Podemos atribuir valores a duas classes/tags, se seus valores forem iguais, basta usamos a ",". Exemplo:
Quado queremos dizer que o valor daquela tag não mudará em outras linhas de código, usamos o "!important".
Quando damos um valor a uma tag, todas elas seguem aquele código.
Podemos usar a seguinte linha de código para escolhermos a tag filha que vamos formatar, veja:
htmlembedded=
.numero div:nth-child(posição da tag filha) {
color: black;
}
o :hover significa que quando eu passar o mouse em cima de determinada tag, irá acontercer algo. Exemplo de código:
---
## Vídeo 6(CSS) - Fontes
Podemos importar uma fonte remota(link de determinada fonte) ou local(temos o arquivo da fonte em nosso projeto).
Vamos no "Google fonts" e lá pegamos a fonte que queremos, conseguimos baixa-las ou pegar o link/export. Para pegarmos o link apertamos na fonte desejada e depois no "+" e lá estará o link, depois ultilizamos a linha de código abaixo dentro do head no HTML:
htmlembedded=
<link href="colocamos o link aqui" rel="stylesheet" />
---
Para importamos fazemos o mesmo trajeto, ao invés de copiarmos o link, copiamos o "@import" e dentro do CSS ultilizamos a seguinte linha de código:
css=
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap'); por exemplo.
---
Com uma fonte local, precisamos baixa-las e jogar em nossa pasta e ultilizamos a seguinte linha de código:
css=
@font-face {
font-family: nome;
src: url("nomedoaquivodafonte");
}
---
## Vídeo 7(CSS) - Cores
Podemos pagar as fonte em *hexadecimalou, **rgb* ou *pelo seu nome em inglês*. Podemos mudar a cor da fonte com --> color: #ffff(hex) | 255, 255, 255(rgb) e white(nome). Rgb mistura 3 valores de cores para achar um novo.
Para trabalharmos com a ideia de opacidade podemos usar --> opacity: 0 até 1.
---
## Vídeo 8(CSS) - Unidades de Medida
Responsáveis por trabalhar com altura, largura e espaçamento dos elementos. As unidades de medidas são dividas em duas:
Absolutas: São medidas que não existem variações, por exemplo: Pixel(px)
Relativa: São medidas que existem variações, por exemplo: Em(equivale a 16px e está baseada em seu elemento "pai")
Podemos alterar a altura e largura de uma box/div, através de width(largura) e height(altura), elas trabalham com em(relativa), px(absoluta), %(relativa) e vh(view-port, mesma coisa de 100%).
---
## Vídeo 9(CSS) - Espaçamentos
Temos espaçamentos internos e externos.O "padding" é um espaçamento interno, ele aplica espaçamentos internos entre uma box e uma palavra dentro dela por exemplo. Já o "margin" é um espaçamento externo, é ele comparado aos itens ao seu redor.
Geralmente sempre usamos o "border-sizing: border-box", que considera o "height" como altura fixa de nossa box, assim não atrapalha o height.
---
## Vídeo 10(CSS) - Redimencionamento
Vamos trabalhar com altura e largura e para isso usaremos quatro css. Quando eu tenho um texto muito grande e não determino altura nem largura para ele, o mesmo vai crescendo conforme aumentamos/diminuimos nosso browser, mas quando cetarmos a largura isso muda. Se determinarmos uma altura menor que o necessário, a tag filha(texto) ultrapassa seu pai(box).
Também podemos usar o "max-width" e "min-width", que serve para o texto não passar ou não ser menor que determinado tamanho.
Quando temos uma imagem, por padrão ela ocupa o seu próprio tamanho, para deixar ela de acordo com nossa div usamos "width: 100%".
Obs: Misturar "width" com "max-width" ou "min-width", só pode ser feito se estivermos em um container "flexblox".
## Vídeo 11(CSS) - Background
Existem vários tipos de "background". De cor(color), imagem(image) e etc. Para configurarmos o tamanho de um "background" usamos --> "background-size: ;" onde temos "height" e "width" e seus valores podem ser em "em", "px", "%", "cover", entre outros.
Também conseguimos falar para uma imagem de fundo se ela será rapetida ou não através de --> "background-repeat ;".
Ainda temos o "backgroud-position", que jogará sua imagem mais para esquerda, para direita, para cima ou para baixo(como se fosse um padding).
Podemos usar também o "background-attachment", que trabalha com a ideia deixar uma imagem fixa, parecendo assim que a faixar a seguir está cobrindo ela.
Google Drive
Gist
Clipboard
Sign in with Wallet
