Skip to content

CodandoLab/crash-course-html-css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 

Repository files navigation

Crash Course HTML/CSS

Todos os comandos HTML

Entendendo mais sobre HTML

Títulos

<h1> = Titulo principal, ideal ter apenas um na página

<h2> = Titulo secundário, normalmente usado para títulos

<h3> = Normalmente para subtítulos

<h4> = Normalmente usado para títulos de temas menores da página

<h5> = Quase não usado, mas é um título de menor importância que os anteriores

<h6> = Quase não usado, mas é um título de menor importância que os anteriores

Textos

<p> = Paragrafo

<span> = Textos pequenos que não são parágrafos ou títulos

<br> = Quebra de linha no texto

Listas

<ul> = Lista não ordenada (mais usado)

<ol> = Lista ordenada

<li> = Um item da lista

Imagens

<img> = Adiciona uma imagem, importante usar o atributo src para colocar o caminho de carregamento da imagem

Botões

<a> = Link, interação mais comum é abrir outra página de site

<button> = Botão, usado para outras interações

Entrada de informações

<input> = Caixa de entrada de texto

<textarea> = Caixa de entrada de texto de várias linhas

<label> = Titulo de campos de entrada de texto

<select> = Caixa de seleção para opções, importante o uso da tag option para cada opção

Containers

<section> = Seções, separa grandes grupos de informação

<div> = Divisória, usado para qualquer tipo de divisão de conteúdo que precisamos

CSS - Estilização

Todos os comandos CSS

Entenda mais sobre CSS

Cores (Usado padrão RGB Hexadecimal = #000000)

Como funciona a tela do celular ou computador

Ferramenta da Adobe para cores

color = Adiciona cor nos textos

background = Adiciona cor, imagens no fundo

Textos

font = Define Grossura do texto, tamanho e tipos das letras (https://fonts.google.com/knowledge)

text-decoration = Decorações do texto, exemplo: sublinhado ou riscado

text-transform = Alterar o texto, exemplo: Só letras grandes ou pequenas

text-align = Alinhamento do texto, centro, direita ou esquerda

Margens e espaçamentos

margin = Adiciona margem externa

padding = Adiciona margem interna

Tamanho (usar em pixels = px)

height = Tamanho da altura

width = Tamanho da largura

Bordas

border = Adiciona uma borda no elemento

border-radius = Tamanho de arredondamento da borda (em pixels)

Posicionamento

display = Regra de ocupação de tela

O mais usado para boa parte dos sites é o display: flex Entendendo mais sobre display flex

position = Regra de posicionamento (pouco usado)

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published