Baixado 64 vezes
![CSS 3
• Seletores
• E[attr
? ”val”]
• Aonde ? pode ser:
• ~ - aonde o atributo eh uma lista separada por espaço
• ^ - valor do atributo começa com o val
• $ - valor que termina exatamente como val
• * - comparação parcial de val no atributo
• | - aonde o atributo eh uma lista separada por hifens](https://image.slidesharecdn.com/html5css3-121109175919-phpapp01/75/Apresentacao-HTML5-e-CSS3-Fabrica-do-Design-16-2048.jpg)
![SELETORES CSS4
• E:matches(s1, s2) S
• Seleciona todos os elementos s1 e s2 que a regra contém
• DIV:matches(A,P)
• :matches(DIV,SPAN.foto) img { ... }
• input:matches(:focus, :hover) { ... }
• E[attr=”val” i ]
• o adicional nesse atributo i é o fato dele dizer insensitive
• A:local-link { ... }
• Seleciona os links que funcionam localmente (prop. pag.)
• A:not(:local-link) { ... }
• Todos os links que apontam para outras paginas.](https://image.slidesharecdn.com/html5css3-121109175919-phpapp01/75/Apresentacao-HTML5-e-CSS3-Fabrica-do-Design-20-2048.jpg)
Carregado porIuri Andreazza
Apresentação - HTML5 e CSS3 Fabrica do Design
O documento descreve as principais novidades do HTML 5 e CSS 3, incluindo novos elementos estruturais como <header>, <section> e <nav> no HTML 5 e novos seletores como :matches() e :not() no CSS 4.
Mais conteúdo relacionado
Semelhante a Apresentação - HTML5 e CSS3 Fabrica do Design
Apresentação - HTML5 e CSS3 Fabrica do Design
- 1. + HTML 5 ECSS 3 Experiência para usuário!
- 3. HTML 5 • Novoselementos estruturais • <header> • <section> • <article> • <footer> • <nav> <aside>
- 4. HTML 5 • Novoselementos estruturais • <header> • <section> • <article> • <footer> • <nav> <aside>
- 5. HTML 5 • Elementos de Conteúdo • <figure> - Associa legenda a uma img, video, audio, obj, iframe • <canvas> - render de imagens personalizado • <audio> - usado para streaming • <video> - usado para streaming • <dialog> - junto ao dd, dt serve para criar uma rep. de diálogo • <time> - representação de data e hora • <meter> - utilizado para representar medidas
- 6. HTML 5 • Elementos de Conteúdo • <figure> • <figure id="figura01"> • <legend>Figura 1. Esquema de uma página em HTML5</legend> • <img src="html5.png" border="0" width="200" height="300" • alt="Estrutura de uma página escrita com os novos elementos do HTML5" /> • </figure>
- 7. HTML 5 • ElementosdeConteúdo • <canvas> • Bibliotecas Javascript utilizam essa tag para renderizar imagens ou mesmo utilizar a API para renderizar webGL. • Ex.: treeJS, jCanvaScript, fabric.js, cakejs, doodle.js,
- 8. HTML 5 • ElementosdeConteúdo • <audio>, <video> • <audio src="musica.mp3" autoplay="autoplay" loop="20000" /> • <video src="video.mov" width="400" height="360" />
- 9. HTML 5 • ElementosdeConteúdo • <dialog> • <dialog> • <dt> Olá! Tudo bem? • <dd>Olá! Tudo certo e com você? • <dt> Que bom! • <dd> Como está sua familia?. • <dt> Ah, tudo certo com eles, e com a sua? • <dd> Tudo certo com a minha também! • </dialog>
- 10. HTML 5 • Ganhou um logo! • E tem elementos que indicam quais recursos estão sendo usados na página. • Todas as tags do HTML5 devem ser fechadas • Doctype: • <!DOCTYPE html> • Elementos que deixaram de existir: • <basefont>,<big>, <center>, <font>, <s>, <strike>, <tt>, <u>, <frame>, <frameset> e <noframes>
- 11. HTML 5 • Ganhou um logo! • E tem elementos que indicam quais recursos estão sendo usados na página. • Todas as tags do HTML5 devem ser fechadas • Doctype: • <!DOCTYPE html> • Elementos que deixaram de existir: • <basefont>,<big>, <center>, <font>, <s>, <strike>, <tt>, <u>, <frame>, <frameset> e <noframes>
- 12. CSS 3 • Alguns elementos já conhecemos da nossa realidade • alguns são novos ou nunca usamos. • overflow-style: {auto|scrollbar|panner|move|marquee} • Multi-collum layout: • collumn-width : INT{px|inch|cm|em} • collumn-gap: INT{px|inch|cm|em} • collumn-rule: idem da config da borda
- 13. CSS 3 • CSS3Layout body{ grid: “ a a a” “ b c d” “ #head { flow: a } #nav { flow: b } #adv {flow: c } #body { flow: d }
- 14. CSS 3 • Seletores • s1 > s2 - s2 filho de s1 • s1 + s2 - s2 precede imediatamente por s1 • s1 ~ s2 - s2 precede de s1 • E:first-letter - primeira letra do elemento E • E:firt-line - primeira linha do elemento E • E:lang(fr) - elemento formatado para a linguagem FR ou qq outra • E:empty - elemento que não tem filhos nem conteudo
- 15. CSS 3 • Seletores • E:only-of-type - unico filho do seu tipo • E:only-child - unico filho • E:last-of-type - ultimo de um tipo • E:first-of-type - primeiro de um tipo • E:last-child - ultimo filho • E:first-child - primeiro filho • E:nth-... (todos os outros seletores so que para o enésimo elemento)
- 16. CSS 3 • Seletores • E[attr ? ”val”] • Aonde ? pode ser: • ~ - aonde o atributo eh uma lista separada por espaço • ^ - valor do atributo começa com o val • $ - valor que termina exatamente como val • * - comparação parcial de val no atributo • | - aonde o atributo eh uma lista separada por hifens
- 17. HTML 5.1 ECSS 4 MAS JÁ?
- 18. PORQUE! • Mesmo, com o CSS3 e o HTML 5 liberados • Não temos browsers suportam • Mas devemos ficar espertos e aprender ja as novas tecnologias • CSS4 e HTML 5.1 vem com novas especificações que permitem muito mais
- 19. SELETORES CSS4 • $E >F • Aonde selecionamos ($E) que contenham F • $DIV UL.menu { ... } • $H2 > A { ... } • $UL > LI:only-child { ... } • $DIV H2 ~ P { ... } • :NOT(s1, s2) • Seletor presente no CSS3, agora permite selecionar • Não suporta os operadores +, ~, > • *:not(DIV, P) { ... }
- 20. SELETORES CSS4 • E:matches(s1,s2) S • Seleciona todos os elementos s1 e s2 que a regra contém • DIV:matches(A,P) • :matches(DIV,SPAN.foto) img { ... } • input:matches(:focus, :hover) { ... } • E[attr=”val” i ] • o adicional nesse atributo i é o fato dele dizer insensitive • A:local-link { ... } • Seleciona os links que funcionam localmente (prop. pag.) • A:not(:local-link) { ... } • Todos os links que apontam para outras paginas.
- 21. SELETORES CSS4 • A:local-link(0){ ... } • Seleciona os links que funcionam localmente (prop. dom.) • A:not(:local-link(0)) { ... } • Todos os links que apontam para outros domínios. • E /attr/ F • LABEL:matches(:hover, :focus) /for/ INPUT • Seleciona o input quando seu estado for hover e focus • O atributo F não precisa estar dentro de E e nem ser irmão •
- 22. HTML 5.1 • W3C ainda está começando a nova especificação • Com a finalização do HTML 5, irá ser inserido novas tendencias • Mas ainda não tem nada! • Somente uma idéia! • hahahaha
- 23. REFERENCIAS • http://www.w3.org/TR/2011/WD-selectors4-20110929/ #overview • http://davidwalsh.name/css4-preview •
Notas do Editor
- #2 \n
- #3 \n
- #4 \n
- #5 \n
- #6 \n
- #7 \n
- #8 \n
- #9 \n
- #10 Comentar sobre os atributos que foram retirados (porque o CSS pode reproduzir eles semant..):\ntarget no elemento <a>;\nalign nos elementos <table> e demais tags de tabelas, <iframe>, <img>, <input>, <hr>, <div>, <p>, entre outros;\nbackground em <body>;\nbgcolor nos elementos de tabela e no <body>;\nborder em <table> e <object>;\ncellpadding e cellspacing em <table>;\nheight em <td> e <th>;\nwidth nos elementos <hr>, <table>, <td>, <th> e <pre>;\nhspace e vspace em <img> e <object>;\nnoshade e size em <hr>.\n\n
- #11 \n
- #12 \n
- #13 \n
- #14 \n
- #15 \n
- #16 \n
- #17 \n
- #18 $ seleciona um elemento e verifica se tem as regras abaixo\n\n
- #19 $ seleciona um elemento e verifica se tem as regras abaixo\n\n
- #20 $ seleciona um elemento e verifica se tem as regras abaixo\n\n
- #21 $ seleciona um elemento e verifica se tem as regras abaixo\n\n
- #22 \n