Pseudo Elementos y Pseudo Clases en CSS

Presentación del curso sobre Pseudo elementos y Pseudo Clases en CSS

Transcript

1. PSEUDO ELEMENTOS PSEUDO SELECTORES CSS3
2. ¿Cuáles son? ¿Para qué sirven? TEORÍA > SELECTORES 1
3. selector:pseudo-clase { propiedad:valor; } selector::pseudo-elemento { propiedad:valor; } TEORÍA
4. “Para dar estilo a un estado especial de un elemento o seleccionar un elemento concreto de un conjunto.” a:hover { … } a:first-child { … } PSEUDO CLASES
5. :hover { … } PSEUDO CLASES OK OK
6. a:hover { … } a:visited { … } a:active { … } a:link { … } PSEUDO CLASES
7. EJEMPLO!
8. :focus { … } :checked { … } :disable { … } PSEUDO CLASES
9. input:focus { … } input[type="checkbox"]:checked { … } input:disable { … } PSEUDO CLASES
10. EJEMPLO!
11. :first-child { … } PSEUDO CLASES
12. :last-child { … } PSEUDO CLASES
13. :nth-child { … } PSEUDO CLASES
14. :nth-child(even) { … } PSEUDO CLASES
15. :nth-child(an+b) { … } PSEUDO CLASES
16. :nth-child(3n+1) { … } PSEUDO CLASES
17. :nth-of-type() { … } PSEUDO CLASES
18. EJEMPLO!
19. ¿Cuáles son? ¿Para qué sirven? TEORÍA > ELEMENTOS 2
20. “Para dar estilo a una parte específica de un elemento” a::after { … } p::first-letter { … } PSEUDO ELEMENTOS
21. : vs :: :pseudo-clase { … } :pseudo-elemento { … } COMPATIBILIDAD CSS1 y 2
22. : vs :: :pseudo-clase { … } ::pseudo-elemento { … } COMPATIBILIDAD CSS3
23. a::before { … } PSEUDO ELEMENTOS
24. a::after { … } PSEUDO ELEMENTOS
25. a::before, a::after { … } PSEUDO ELEMENTOS
26. ¿Para qué lo puedo usar? EN PRÁCTICA 3
27. a::after { … } BOTONES CON ESTILO
28. i::before { … } FontAwesome Littlebox WEBFONTS
29. span::before { … } span::after { … } The Shapes of CSS CSS SHAPES
30. p::first-letter { … } p::first-line { … } Rorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore CAPITAL LETTERs
31. Master en CSS3 AVANZADO 4
32. a:nth-of-type(2n+3)::after { … } a:nth-of-type(even):hover { … } ORDEN LÓGICO
33. FIX FLOATS Float Left Float Left Parent Element “Collapsed”
34. element::after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } FIX FLOATS
35. FIX FLOATS Float Left Float Left Parent Element
36. ::selection { … } consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ::selection
37. dialog::backdrop { … } ::backdrop OK
38. dudas: ricardo@silocreativo.com GRACIAS! silocreativo.com @silocreativo escuela.it @EscuelaIT