Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Antipasto di CSS - Angelo Venturelli - WP Catania

Antipasto di CSS - Angelo Venturelli - WP Catania

WordPress Meetup Catania

November 29, 2018
Tweet

More Decks by WordPress Meetup Catania

Other Decks in Education

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 Ispeziona su Chrome: CTRL + Maiusc + I
  5. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP

    www.angeloventurelli.it E’ TUTTA UNA QUESTIONE DI STILE
  6. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP

    www.angeloventurelli.it SELETTORI TAG HTML CLASSE ID Come scegliere a quale elemento applicare lo stile?
  7. 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>
  8. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP

    www.angeloventurelli.it SELETTORI TAG HTML CLASSE ID class= “nome_classe” Raggruppa più elementi
  9. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP

    www.angeloventurelli.it SELETTORI TAG HTML CLASSE ID id= “nome_id” Identifica un singolo elemento
  10. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP

    www.angeloventurelli.it PROPRIETÀ / ATTRIBUTI TESTO COLORE E SFONDO DIMENSIONE POSIZIONE
  11. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP

    www.angeloventurelli.it https://htmlcheatsheet.com/css/
  12. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP

    www.angeloventurelli.it MEDIA QUERIES
  13. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP

    www.angeloventurelli.it MEDIA QUERIES
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP

    www.angeloventurelli.it MEDIA QUERIES https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
  20. 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
  21. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP

    www.angeloventurelli.it CSS CONDIZIONALI
  22. 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
  23. 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
  24. 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
  25. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP

    www.angeloventurelli.it COME PERSONALIZZARE WORDPRESS?
  26. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP

    www.angeloventurelli.it Foglio di stile style.css SOLUZIONE 1
  27. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP

    www.angeloventurelli.it Creare un tema CHILD SOLUZIONE 2 https://sos-wp.it/tema-child-wordpress/
  28. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP

    www.angeloventurelli.it Campo Custom CSS SOLUZIONE 3
  29. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP

    www.angeloventurelli.it Campo Custom CSS SOLUZIONE 3 Commentare SEMPRE!
  30. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP

    www.angeloventurelli.it !important ESEMPIO h2 { font-size: 20px !important; font-size: 15px; }
  31. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP

    www.angeloventurelli.it E SE VOLESSI APPLICARE UNO STILE AD UN SOLO ELEMENTO? Dichiarazione inline
  32. 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
  33. Antipasto di CSS | WordPress MeetUp Catania @ Tim WCAP

    www.angeloventurelli.it SE QUESTO ANTIPASTO HA STUZZICATO IL TUO APPETITO… PUOI CONTINUARE IL BANCHETTO SU...