# Playlist: HTML e CSS
**nome:** Patricia Oliveira Paulino
**número:** 37
**turma:** INFO D
Baixar no computador o visual studio code.
Para os icones ficar mais bonitinho tem que instalar uma extensão, também para caso de querer trocar a cor dos icones.
Modo de fazer:
Após clicar em extensão vai baixar a extensão vscode icons e apertar em instalar.
Para configurar o local do projeto temos que selecionar a pasta que vai ser nosso local do projeto..
Vai no menu FILE, após clica em OPEN FOLDER que vai te direcionar a escolher a pasta que todos os arquivos do projeto vai ficar.
Para iniciar precisamos criar um arquivo "html", após isso temos que colocar o codigo html:5 para criar a esrutura inicial do html.
Estrutura inicial para começar quando tiver trabalando com uma pagina web:
<html>
<hed>
<title> titulo </title>
</head>
<body>
</body>
</html>
Tambem podemos colocar atributo dentro de uma tag. EX:
<p aling="right"> ola </p>
Se abrir a tag <style> dentro de <head> eu consigo colocar codigos de css. EX:
<head>
<style>
h1 {
color:blue;
}
</style>
</head>
Criar uma pagina assets (acessorios), outra pasta pages.
Criar a pagina images, audios, videos e font dentro de assets.
Colocar html dentro de pages.
Criar dentro da pasta pages e criar uma pasta css.
Linkar o css com a tag link:css
Modo de colocar imagem no html :
<img src="../assets/images/nome do arquivo" />
Modo de usar font no css:
@font-face {
font-family: Discord;
src: url ('../assets/font/Discord4.woff2');
}
Para tirar a margem(largura) vamos no css e colocamos: margin:0px;
Caso eu queira fazer uma formatação apenas em algum lugar de uma tag eu posso usar o exemplo abaico:
No html:
<h1 class="titulo"></h1>
No css:
.titulo {
color:black;
}
Criar uma segunda pagina html e css.
linkar o html com o segundo css
Criar um botaõ no html principal para ir para o html secundario.
Modo de criar:
<a href="pagina2.html"> ir para pagina2 </a>
Modo de colocar borda:
div {
border: 2px solid (cor);
}
Como adicionar uma fonte remota:
- Para usar uma fonte remota podemos utilizar o link ou o import
Para utilizar uma fonte local:
- Uma fonte local é uma fonte que nós temos o arquivo no computador, Para utiliza-la passamos o arquivo para a pasta e depois usamos o font-face para indicar seu nome e sua importação
Temos 3 formas de usar uma cor no nosso CSS:
- Escrever o nome da cor: Black
- Código hexadecimal: #000000
- Código rgb: (0, 0, 0)
Usando opacidade:
```Opacidade=
Opacity: 0,2;
```
Font-Size:
- Px
- Em
- Rem
- %
Height:
- Em
- %
- Vh
Width:
- Em
- %
- Vw
- Espaçamentos internos:
padding; height; padding-top
- Espaçamentos externos:
margin
> Box - sizing: Border-Box
> Css de dimencionamento: Altura e largura
- Height: min-height, max-height
- Width: min-width, max-width
> Por padrão quando colocamos uma imagem ela mantém a sua própria altura e largura
Colocando imagem como plano de fundo:
* Background-image: url('../assets/images/images.PNG')
> Background-Size = Altera o tamanho de Background pra fazer que preencha o fundo de outras formas
> Background-position: pode posicionar o plano de fundo atráves do numero de px indicado (podendo descer, subir, ir pra esquerda ou direita)
{"metaMigratedAt":"2023-06-16T09:00:23.332Z","metaMigratedFrom":"Content","title":"Playlist: HTML e CSS","breaks":true,"contributors":"[{\"id\":\"d757cf0b-4ece-4c2f-893c-8a075e5d4af3\",\"add\":3224,\"del\":0}]"}