!DOCTYPE html
!-- Esse documento HTML será usado para aplicar o CSS exemplo (basico_css3.css). Dessa forma, ele está comentado apenas nas partes que dizem respeito ao CSS.
Se você não está familiarizado com HTML5, talvez seja interessante que você veja o seguinte documento antes httpsgithub.comthiagobottoniExemplosblobmasterHTML5B%C3%A1sico%20de%20HTML5.html --
html
head
meta charset=UTF-8
!-- Use a tag link para relacionar código externo com o seu HTML. Com a linha abaixo, estamos associando um CSS ao nosso HTML. --
link type=textcss rel=stylesheet href=basico_css3.css
!-- Ao invés de link, pode ser utilizada a tag style. Com ela, o CSS pode ser usado na própria página HTML, sem o uso de código externo. Exemplo
style
p {
colorblue;
}
style --
titleBásico de HTML5 + CSS3title
head
body
h1Básico de HTML5 + CSS3h1
h2#### Parágrafo Formatado ####h2
pEste é um HTML exemplo para ser formatado usando CSS. Até aqui é azul. span Agora é verde.spanp
h2#### ID ####h2
p id=sou-unicoNenhum outro parágrafo terá essa formatação.p
h2#### Classe ####h2
ol class=listas
liSou uma lista ordenada.li
liSou uma lista ordenada.li
ol
ul class=listas
liSou uma lista não ordenada formatada da mesma forma que a lista anterior.li
liSou uma lista não ordenada formatada da mesma forma que a spanlista anteriorspan, exceto pelo tamanho das palavras lista anterior deste item.li
ul
h2#### DIV ####h2
div class=primeira-div
pIsso é uma div.p
div
h2#### Bordas ####h2
p class=bordaEste parágrafo tem uma borda pontilhada.p
h2#### Link Formatado + Pseudo-Classes ####h2
a href=httpscafetiria.wordpress.com id=link-principalEste é um link formatadoa
h2#### Botão ####h2
div class=botao-twitter
a href=httpstwitter.comthiagobottoni class=link-twitterMe siga no span class=span-twitterTwitterspana
div
h2#### Vários seletores ####h2
ol
liEste item não deve estar formatado.
ul
liEste item deve estar formatado com a cor roxa.li
liEste item deve estar formatado com a cor roxa.li
ul
li
ol
h2#### Descendentes ####h2
div class=filho
pSou o filho número 1.p
pSou o filho número 2.p
pSou o filho número 3.p
div
h2#### Posicionamento - displayblock ####h2
!-- É possível usar ID e classe na mesma tag. --
div id=posicao1 class=posicao-blockdiv
div id=posicao2 class=posicao-blockdiv
div id=posicao3 class=posicao-blockdiv
h2#### Posicionamento - displayinline-block ####h2
div id=posicao4 class=posicao-iblockdiv
div id=posicao5 class=posicao-iblockdiv
div id=posicao6 class=posicao-iblockdiv
h2#### Posicionamento - displayinline ####h2
div id=posicao7 class=posicao-inlinediv
div id=posicao8 class=posicao-inlinediv
div id=posicao9 class=posicao-inlinediv
h2#### Margens ####h2
div id=margem1div
h2#### Preenchimento ####h2
div id=preenc1div
h2#### Valores negativos ####h2
div id=margem2div
h2#### Float - Direita ####h2
div class=fixo
div id=flutuando1div
div
h2#### Float - Esquerda ####h2
div class=fixo
div id=flutuando2div
div
h2#### Float - Esquerda e Direita ####h2
div class=fixo
div id=flutuando3div
div id=flutuando4div
div
h2#### Float + Clear ####h2
div class=fixo
div id=flutuando5div
div id=flutuando6div
div id=clear1div
div
h2#### Position - RelativeAbsolute ####h2
div id=relative-position1
div id=absolute-position1div
div
body
html