<tag> -> Tag de Abertura
</tag> -> Tag de Fechamento
Ex: <tag>conteudo</tag> isso é chamado de Elemento HTML
Podem ter 6 níveis diferentes de títulos, sendo 1 o maior e 6 o menor.
<strong> melhor que <b> pois, deixa a parte em negrito e
deixa essa parte mais importante no mecanismo de busca do google
<em> melhor que <i> pois, deixa a parte em itálico e
deixa essa parte mais importante no mecanismo de busca do google
<mark> Marca texto
<small> Deixa o texto pequeno
<del> Risca o texto
<ins> Sublinha o texto
<sub> Deixa o texto um pouco mais baixo que o normal
<sup> Deixa o texto um pouco mais alto que o normal
<a href> Abre link
<img> Colocar Imagem e Alt coloca uma referência na imagem para o Google
Lembrando que não se pode usar qualquer imagem nos projetos! Tome cuidado. Busque
sempre sites com imagens gratuitas.
Ex:
[Link]
Unsplash:
[Link]
Pixabay:
[Link]
Rawpixel:
[Link]
width e height mudam o tamanho da imagem
<br> Quebra a linha
<ul> Cria uma lista não ordenada, com pontinhos
Dentro da lista cada item tem uma tag, <li>
<ol> Cria uma lista ordenada com números
Atributo id só identifica um elemento
Atributo class identifica vários elementos
rgb customizo manualmente a cor que eu quero
rgba customizo as cores e a transparencia
<!--Texto--> Comentários no HTML
/*Texto*/ Comentários no CSS
Selecione o que quer que vire comentário segure ctrl e aperte ;
<div> Agrupa elementos, é como se fosse jogar vários elemntos dentro de uma caixa
Unidades de medidas fixas são propriedades CSS que podem assumir valores de
"comprimento". Comprimento é um número seguido por uma unidade de medida, tais como
10px, 2em, etc. podem ser editadas com id, class. Sendo:
cm= centimetros
mm= milimetros
in= polegadas (1in = 96px = 2.54cm)
px= pixels (1px = 1/96th de 1in) pode variar de acordo com a tela
pt= pontos (1pt = 1/72 de 1in)
pc= picas (1pc = 12 pt)
As unidades de medidas fixas são expressas exatamente com o tamanho selecionado.
*o que pode afetar a reprodução do site em telas de resolução diferentes.
Unidades de medidas relativas:
em= relativo ao tamanho do elemento
rem= relativo ao tamanho da fonte do elemento raiz
vw= relativo a 1% da largura da janela de visualização
vh= relativo a 1% da altura da janela de visualização
vmin= em relação ao menor valor de comprimento (altura ou largura)
vmax= em relação ao maior valor de comprimento (altura ou largura)
%= porcentagem em relação ao elemento pai
margin distância do elemento pra fora
padding distância do elemento pra dentro
outline é uma propriedade que não interagem com o box model, e trabalha semelhante
ao border
box-sizing é utilizado para delimitar o tamanho do elemento
text-align serve para editar horizontalmente o alinhamento do texto, sendo seus
atributos: right (direita é o padrão) left (esquerda), center (centro), justify
(justificado).
text-transform edita a forma da letra, sendo os valores: caixa-alta (uppercase),
caixa baixa (lowercase), primeira letra de cada palavra maiúscula (capitalize).
text-ident: seria o espaçamento do início de um parágrafo que pode ser editado com
as unidades de medidas
text-decoration: sublinhado (underline), riscado (line-trought), linha em cima
(overline), os três podem ser utilizados simultaneamente.
letter-spacing: espaçamento entre as letras, editado com as unidades de medidas.
line-height: altura da linha, editado com as unidades de medidas
word-spacing: espaçamento entre palavras, " "
.
text-shadow edita o sombreamento, recebe 4 valores: deslocamento pra direita,
deslocamento pra baixo, raio do desfoque e cor da sombra.
Basicamente existem três grande famílias genéricas de fontes: com serifa, sem
serifa e monospace.
*A serifa consiste em um pequeno traço que está presente no fim das hastes das
letras.
*monospace é a fonte cujas letras e caracteres ocupam o mesmo espaço horizontal.
Isto contrasta com as fontes de largura-variável.
A propriedade font-family pode conter vários valores de fontes como um sistema de
"busca". Se o navegador não suportar a primeira fonte, ele tentará a próxima fonte.
cada valor adicionado é separado com vírgula.
*Se o nome de uma fonte contiver espaço em branco, ele deve ser colocado entre
aspas.
Existem dois tipos de família de fontes:
família-específica: o nome de uma família de fontes, como "times", "courier",
"arial".
família-genérica: O nome de uma família-genérica, como serif, sans-serif, cursiva,
monospace.
*a propriedade font-style permite a adição do valor pra tornar a fonte itálica.
*a propriedade font-weight permite editar a fonte para negrito, seja adicionando o
valor "bold" ou a numeração que varia de 100 a 900 (caminhando de 100 em 100)
*a propriedade ++font-variant:"small-caps"++ permite que todas as letras fiquem
maiúsculas porém respeitando a proporção original existentes entre minúsculas e
maiúsculas.
COMANDOS
crlt + shift + L seleciona e edita a palavra selecionada em todo código
ctrl + d = seleciona de um a um pra sobrescrever
crtl + ; comenta as linhas selecionadas automaticamente e se repetir o processo
ela tira o comentário
shift + alt + F = formata/ organiza o código html (indexa)