CSS3 e Html5 - O que há de novo / parte 1
•
1 j'aime•1,474 vues
O documento discute a evolução das linguagens HTML e CSS desde 1991, destacando novas funcionalidades introduzidas no HTML5 e CSS3 como bordas redondas, sombras, múltiplos backgrounds e transformações 2D e 3D.
Recommandé
Contenu connexe
Tendances
En vedette
En vedette (9)
Similaire à CSS3 e Html5 - O que há de novo / parte 1
Similaire à CSS3 e Html5 - O que há de novo / parte 1 (20)
Plus de Flavia Siqueira
Plus de Flavia Siqueira (12)
CSS3 e Html5 - O que há de novo / parte 1
- 2. Html5 + Sexy CSS3 + Potente
- 3. Um pouco da evolução
- 4. 1991 – Html 1994 – Html2 1996 – Css1 e JavaScript1.2 1997 – Html4 1998 - CSS2
- 5. Surge a W3C 2000 – XHtml1 2002 – Web Stantard 2005 – AJAX 2009 – Html 5 e CSS3
- 11. Não testado...
- 12. Xhtml 1
- 13. <?xml version=”1.0” encoding=”utf-8” ?> <!DOCTYPE htlm PUBLIC *-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html lang=”pt – BR” xml:lang=”pt – BR” xmlns=”http://www.w3.org/1999/xhtml”> <head> <title>CSS3 e Html 5</title> <meta content=”text/html; charset=UTF-8” http-equiv=”content-type” /> </head> <body> <div id=”principal”> <div id=”topo”> Imagem do topo </div> <div id=”conteudo”> Conteúdo da página </div> <div id=”rodape”> Links e informações do rodapé </div> </div> </body>
- 14. Html5 e CSS3
- 15. <!DOCTYPE htlm> <html> <head> <title>CSS3 e Html 5</title> <meta charset=”utf-8”> </head> <body> <principal> <topo> Imagem do topo </topo> <conteudo> Conteúdo da página <conteudo> <rodape> Links e informações do rodapé </rodape> </principal> </body>
- 16. Tags do Html5
- 18. “px” por “em” para defnir tamanho das fontes...
- 19. html { font-size: 100%; } body { font-size: .68em; } #conteudo h1 { font-size: 1.45em; } #conteudo p { font-size: 1.1em; } #conteudo p strong { font-size: 1.16em; }
- 20. Cálculo feito: 11/16 = 0.68 A idéia é que 11px é igual a 0.68em de 16px.
- 21. (valor de referência) / (valor a ser convertido) = (valor que desejamos)
- 22. - bordas redondas - sombras - múltiplos backgrounds - novos seletores - transformação 2D e 3D em animações
- 23. box 1 / -webkit-transform: translate(3em,0); box 2 / -webkit-transform: rotate(30deg); box 3 / -webkit-transform: translate(-3em,1em); box 4 / -webkit-transform: scale(2);
- 24. Chrome e Safari = -webkit; Firefox = -moz; Opera = -o;