Antipasto di CSS - Angelo Venturelli - WP Catania

Transcript

1. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it ANTIPASTO DI CSS … da dove iniziare per masticarne un po.
2. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it Angelo N. Venturelli Consulente Marketing DIGITAL ORIENTED
3. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it Alcuni “preparati”
4. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it
5. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it Ispeziona su Chrome: CTRL + Maiusc + I
6. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it
7. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it E’ TUTTA UNA QUESTIONE DI STILE
8. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it SELETTORI TAG HTML CLASSE ID Come scegliere a quale elemento applicare lo stile?
9. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it SELETTORI TAG HTML CLASSE ID <p><a><h1><h2><h3><span> <div><img><input><e tanti altri>
10. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it SELETTORI TAG HTML CLASSE ID class= “nome_classe” Raggruppa più elementi
11. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it SELETTORI TAG HTML CLASSE ID id= “nome_id” Identifica un singolo elemento
12. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it PROPRIETÀ / ATTRIBUTI TESTO COLORE E SFONDO DIMENSIONE POSIZIONE
13. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it
14. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it https://htmlcheatsheet.com/css/
15. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it MEDIA QUERIES
16. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it MEDIA QUERIES
17. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it MEDIA QUERIES @MEDIA Indica al browser la presenza di una media query https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
18. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it MEDIA QUERIES NOT Inverte il significato della query https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
19. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it MEDIA QUERIES ONLY Impedisce ai browser più vecchi di applicare lo stile https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
20. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it MEDIA QUERIES MEDIATYPE All | Print | Screen | Speech https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
21. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it MEDIA QUERIES MEDIA FEATURE height, max-width, orientation, hover, min-resolution, ecc. https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
22. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it MEDIA QUERIES https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
23. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it MEDIA QUERIES width 9.0+ 3.5+ 4.0+ 2.0+ 9.0+ height 9.0+ 3.5+ 4.0+ 2.0+ 9.0+ device-width 9.0+ 3.5+ 4.0+ 2.0+ 9.0+ device-height 9.0+ 3.5+ 4.0+ 2.0+ 9.0+ device-aspect-ratio 9.0+ 3.5+ 4.0+ 2.0+ 9.0+ color 9.0+ 3.5+ 4.0+ 2.0+ 10.5+ color-index 9.0+ 3.5+ 4.0+ 2.0+ 10.5+ monochrome 9.0+ 3.5+ 4.0+ 2.0+ 10.5+ resolution 9.0+ 3.5+ 4.0+ 2.0+ 10.5+ orientation 9.0+ 3.5+ 4.0+ 2.0+ No aspect-ratio 9.0+ 3.5+ 4.0+ 2.0+ 9.5 scan 9.0+ No No No 10.5 grid 9.0+ No No No 10.5
24. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it CSS CONDIZIONALI
25. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it ➔ IE – Internet Explorer ➔ Gecko – Gecko based browsers (Firefox, Camino etc) ➔ Webkit – Webkit based browsers (Safari, Shiira etc) ➔ Opera – Opera’s browser ➔ IEMac – Internet Explorer for the Mac ➔ Konq – Konqueror ➔ IEmob – IE mobile ➔ PSP – Playstation Portable ➔ NetF – Net Front BROWSER
26. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it ➔ lt – Minore di ➔ lte – Minore di o Uguale a ➔ eq – Uguale a ➔ gte – Maggiore di o Uguale a ➔ gt – Maggiore di CONDIZIONI
27. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it [if {!} browser] [if IE] oppure se è diverso da IE6 [if ! IE] [if {!} browser version] [if IE 6] oppure se è diverso da IE6 [if ! IE 6] [if {!} condition browser version] [if lt IE 6] oppure se non è Minore di IE6 [if ! lt IE 6] SINTASSI BASE
28. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it ESEMPIO
29. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it COME PERSONALIZZARE WORDPRESS?
30. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it Foglio di stile style.css SOLUZIONE 1
31. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it Creare un tema CHILD SOLUZIONE 2 https://sos-wp.it/tema-child-wordpress/
32. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it Campo Custom CSS SOLUZIONE 3
33. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it Campo Custom CSS SOLUZIONE 3 Commentare SEMPRE!
34. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it !important ESEMPIO h2 { font-size: 20px !important; font-size: 15px; }
35. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it E SE VOLESSI APPLICARE UNO STILE AD UN SOLO ELEMENTO? Dichiarazione inline
36. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it E SE VOLESSI APPLICARE UNO STILE AD UN SOLO POST/PAGINA? Ispeziona su Chrome: CTRL + Maiusc + I postid-NUMERO / page-id-NUMERO E’ UNA CLASSE
37. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it SE QUESTO ANTIPASTO HA STUZZICATO IL TUO APPETITO… PUOI CONTINUARE IL BANCHETTO SU...
38. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP www.angeloventurelli.it GRAZIE!