Você está na página 1de 3

Durante muito tempo o elemento padrão do html era a DIV, e buscavamos siginificados através das

classses.

Alguns dos elementos semanticos:

<section> representa uma sessão generica de conteudos ou lista de artigos


<header> cabeçalho de uma página ou de parte dela como uma section
<article> conteudo relevante dentro da página como por exemplo o artigo de um blog
<aside> representa um conteudo relacionado ao conteudo principal da pagina normalmente
representado por uma barra lateral
<footer> rodape da pagina, ou parte da pagina como article ou section
<h1>-<h6> importância de um titulo da pagina, section, artigo e assim por diante
única regra somente 1 h1 por página

tags para textos

<h1>Título de página</h1>
<h2>Título de seção</h2>
<h3>Título de artigo</h3>
<p>Conteúdo do artigo</p>

O <p> pode add imagens vídeos e vários tipos de conteúdo nele

<a>link</a>
<a href=”www.linkedin.com/in/jorgealves2021”>LinkedIn<a/>
<ahref=”mailto:alvesdjorge@gmail.com”>E-mail<a/>
<ahref=”tel:11982847131”>E-mail<a/>
<a target=”_blank”>Link<a/> link em nova aba

imagens

<img> src=”img/avatar.jpg”>
<img alt= “Foto de Jorge Alves”>

Listas

<ul> ordem não importa


<ol> ordem importa
<li> item de lista

CSS3

1oq são seletores:


2 conceitos básicos
3 principais seletores
Definição]formatação de paginas

ID x Classes
Seletor de tipo representa o elemento html
já os IDS e classese podem representar qualquer tipo de elemento
no css classe é precedida por um ponto “.”
ID é pressedida por hashtag “#”
id usa-se apenas uma vez na página

layout de um site o navegador entende como uma caixa retangular (box model

box model

margin espaçamento entre elementos


border circundam o padding e o conteudo, mudando largura e cor
padding espaçamento entre borda e conteudo
content seu conteudo

estilizando textos

font-fmily
font-size
font-style norml, italic

font-weigth normal, bold numeros

text-transform- uppercase lowercase capitalize primeiras letras em maiusculo

text decoration: underlin, oveline


line-through

listas

list-style-type
ul{
list-style-type: square;
}
ol{
ist-style-type: upper-roman;
}

list style-tipe: “\1f44d”

list-style-image “imagem”
Imensões e alinhamentos

Width largura
Height altura
Max-width margura maxima
Max-height altura maxima

Margin auto

Text-align lign center

Você também pode gostar