Scribd
Carica
193 visualizzazioni

HTML e CSS

Il documento fornisce istruzioni su come creare layout di base in HTML e CSS, inclusi come aggiungere immagini, testo formattato, collegamenti e stili con CSS. Vengono spiegati concetti come Flexbox, posizionamento di elementi, importazione di fonti e altro.

Caricato da

Igor Braga
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
193 visualizzazioni

HTML e CSS

Il documento fornisce istruzioni su come creare layout di base in HTML e CSS, inclusi come aggiungere immagini, testo formattato, collegamenti e stili con CSS. Vengono spiegati concetti come Flexbox, posizionamento di elementi, importazione di fonti e altro.

Caricato da

Igor Braga
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 5

HTML

index.html
Adicionar imagem no HTML 5: <img src= “nome da imagem” alt=”
Descrição da imagem”>
CTRL + SHIFT + X: Instalar a extensão Live Server no VS Code pra atualizar
as modificações do HTML ao vivo
Negrito (dentro do H1, normalmente): <Strong> </Strong>
Header e Main devem ser colocados antes do texto e dentro do body, o
texto fica dentro deles
<a href= “Link site para o redirecionamento”>Nome do site no botão ou
redirecionamento</a>
Linkar um CSS com um HTML, dentro do head: <link rel= “stylesheet”
href= “style.css”>

CSS
style.css
body {
height (altura): 100vh; (100% a tela do navegador)
box-sizing: border-box; (Evitar que a estrutura fique desorganizada com
as alterações, o box-sizing é responsável por como a largura e a altura
totais de um elemento são calculadas.)
background-color: black ou #000000; (Alterar a cor de fundo)
color: white ou #F6F6F6; (Alterar a cor do texto, utilizando as cores
hexadecimal é mais específico)
}
Strong ou uma classe, exemplo: .titulo-destaque {
color: #22D4FD;
}
Classes no CSS: Dentro do HTML, exemplo <Strong Class=”titulo-
destaque”>, colocar class dentro de qualquer tag que você for definir uma
classe

Pegar todos os elementos que estão na página:


*{
margin: 0;
padding: 0;
}
Elimina todo o espaço entre os conteúdos da página.

Flexbox: Centralizar texto e imagens na tela, existem vários tipos de tags e


comandos flexbox. Declarar o Main do HTML como classe. Colocar a classe
no CSS, exemplo:
.apresentacao {
margin: 10%
display: flex;
align-items: center;
justify-content (justificar conteúdo): space-between;
}

Section: Ela cria uma seção separada da imagem, deve ser criada dentro
do Main, abrindo e fechando toda a estrutura. <section> </section>

Estilizando o texto: Dentro do Main no HTML, vc cria uma Section com


uma classe, exemplo: <section class> apresentacao__conteudo <section>
No CSS vc vai colocar a classe:
.apresentacao__conteudo {
width: 615px;
}
Se for estilizar mais conteúdos, é só fazer o mesmo (adicionando classes)
mas em outros comandos como por exemplo: o H1, H2, H3 etc.
Px = Pixels
.apresentacao__conteudo__titulo {
font-size: 36px;
font-family: ‘Krona One’, sans-serif; (alterando a fonte)
}

Importando Fontes: Entre no Google Fonts (nele é possível conseguir


vários tipos de fontes diferentes)
No início do código CSS vc deve importar a URL da fonte do Google Fonts,
exemplo @import url(‘link”);

Posicionando os botões:
<div></div> é a divisão
<a></a> botão
Exemplo:
No HTML
<main class="apresentacao">
<section class="apresentacao__conteudo">
<h1 class="apresentacao__conteudo__titulo">Eleve seu negócio
digital a outro nível <strong class="titulo-destaque">com um Front-end de
qualidade!</strong></h1>
<p class="apresentacao__conteudo__texto">Olá! Sou Joana
Santos, desenvolvedora Front-end com especialidade em React, HTML e
CSS. Ajudo pequenos negócios e designers a colocarem em prática boas
ideias. Vamos conversar?</p>
<div class="apresentacao__links">
<a href="https://instagram.com/rafaballerini">Instagram</a>
<a href="https://github.com/guilhermeonrails">Github</a>
</div>
</section>
<img src="imagem.png" alt="Foto da Joana Santos programando">

No CSS
.apresentacao__conteudo__texto{
font-size: 24px;
font-family: 'Montserrat', sans-serif;
}

.apresentacao__links{

Estilizando os botões:
Exemplo: //código omitido

.apresentacao__links__link {
background-color: #22D4FD; (Cor de fundo do botão)
width: 280px; (Largura)
text-align: center; (Alimento de Texto)
border-radius: 16px; (Raio de Arredondamento)
font-size: 24px; (Tamanho do texto dentro do botão)
font-weight: 600.
padding: 21.5px 0; (Espaço entre os botões, primeiro valor na vertical e
o segundo na horizontal)
text-decoration: none;
color: #000000;
font-family: 'Montserrat', sans-serif;
}

Gap: é uma propriedade Flexbox que possuí espaçamento dos elementos


filhos. Ela específica no CSS o tamanho dos espaços entre linhas e colunas
em layouts de grid, flex e multi-column. Sua sintaxe é bem simples e ela
aceita um ou dois valores.

align-itens: alinhar itens na vertical

<footer> define um rodapé para um documento ou seção;

<nav> para colocar links com uma classe

Potrebbero piacerti anche