Front-end treinamento html/css

1.948 visualizações

Publicada em

  • Seja o primeiro a comentar

Front-end treinamento html/css

  1. 1. Padrões web na globo.com com o fein
  2. 2. Por que?
  3. 3. Doctype. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. 4. Doctype. • boxmodel • margin: auto e width: auto; • img !important • over ow: visible; !important • width: value; em elementos inline • <input />
  5. 5. Progressive enhacement & graceful degradation
  6. 6. has layout
  7. 7. htmelê • Estrutura: html, head, title, script, link, body • Headings • Pouco usadas: em, strong, abbr, cite, address
  8. 8. htmelê • inline X block • listas • tabelas • formulários
  9. 9. CSS... let’s see • link vs @import • sintaxe • unidades de medida • position • oat • over ow
  10. 10. CSS... let’s see • link vs @import • tipos de midia • sintaxe • unidades de medida • position • oat • over ow
  11. 11. Seletores no cda. • [att^=val] - pre x • [att*=val] - substring • [att$=val] - suffix • E > F {} • E + F {} • E ~ F {}
  12. 12. Seletores no cda e cma. • * • .class.class • [att^=val] - pre x • [att*=val] - substring • [att$=val] - suffix • E > F {} • E + F {} • E ~ F {}
  13. 13. Pseudo-classes no cda. • element: rst-child • element:hover
  14. 14. Pseudo-classes no cma. • element: rst-child • element:hover • element:active • element:focus
  15. 15. Pseudo-elementos no cma. • no cda chora =/ • :after • :before
  16. 16. Feio, o que eu não posso fazer? • !important • hacks • css expressions • seletor * • mais de 3/4 niveis de seleção
  17. 17. Feio, o que eu devo fazer? • chamadas para estilos sempre no topo • não usar camel case (usar - ou _) • semantica (evitar: siglas; nomes de elementos HTML etc) • usar pre xos, su xos • não usar números, caracteres especias • evitar nomes muito grandes
  18. 18. Feio, o que eu devo fazer? • sempre em Portugues (CDA) • ordem alfabética; • quebra de linha nas propriedades; • reuso de prop. entre seletores; • arquivos por componente; • a ordem é importante;

×