CSS - Primi Passi
•
1 like•702 views
Primi passi con i Fogili di Stile (CSS): la sintassi base e le proprietà più diffuse. Lezione svolta nel corso del 5° A.T.A. dell’I.I.S.S. "De Pace" di Lecce. http://androe.com
Recommended
More Related Content
More from Andrea Riezzo
More from Andrea Riezzo (13)
CSS - Primi Passi
- 1. CSS
- 3. CSS fogli di stile a cascata
- 5. i CSS sono una serie di regole che si occupano dell’aspetto grafico di una pagina web (documento HTML)
- 8. TESTATA TESTATA
- 9. TESTATA TESTATA MENÙ DI NAVIGAZIONE MENÙ DI NAVIGAZIONE CONTENUTO
- 10. TESTATA TESTATA MENÙ DI NAVIGAZIONE MENÙ DI NAVIGAZIONE CONTENUTO CONTENUTO
- 11. TESTATA TESTATA MENÙ DI NAVIGAZIONE MENÙ DI NAVIGAZIONE COLONNA LATERALE CONTENUTO CONTENUTO COLONNA LATERALE
- 12. <div>
- 13. <div> <h1>
- 14. <div> <h1> <h2>
- 17. <div> <h1> <h2> <p> CSS <ul> <li>
- 18. <div> LARGHEZZA <h1> <h2> <p> CSS <ul> <li>
- 19. <div> LARGHEZZA <h1> ALTEZZA <h2> <p> CSS <ul> <li>
- 20. <div> LARGHEZZA <h1> ALTEZZA <h2> POSIZIONE <p> CSS <ul> <li>
- 21. <div> LARGHEZZA <h1> ALTEZZA <h2> POSIZIONE TESTO <p> CSS <ul> <li>
- 22. <div> LARGHEZZA <h1> ALTEZZA <h2> POSIZIONE TESTO <p> CSS carattere tipografico (font) <ul> <li>
- 23. <div> LARGHEZZA <h1> ALTEZZA <h2> POSIZIONE TESTO <p> CSS carattere tipografico (font) dimensione <ul> <li>
- 24. <div> LARGHEZZA <h1> ALTEZZA <h2> POSIZIONE TESTO <p> CSS carattere tipografico (font) dimensione peso crenatura <ul> <li>
- 25. <div> LARGHEZZA <h1> ALTEZZA <h2> POSIZIONE TESTO <p> CSS carattere tipografico (font) dimensione peso crenatura <ul> altezza di riga <li>
- 26. <div> LARGHEZZA <h1> ALTEZZA <h2> POSIZIONE TESTO <p> CSS carattere tipografico (font) dimensione peso crenatura <ul> altezza di riga allineamento <li>
- 27. <div> LARGHEZZA <h1> ALTEZZA <h2> POSIZIONE TESTO <p> CSS carattere tipografico (font) dimensione peso crenatura <ul> altezza di riga allineamento <li> ... E MOLTO ALTRO
- 28. ?
- 29. style.css
- 30. <html> <head> <title>La Musica</title> </head> <body> ... </body> </html>
- 31. <html> <head> <title>La Musica</title> </head> <body> ... </body> </html>
- 32. <html> <head> <title>La Musica</title> </head> <body> ... </body> </html>
- 35. COME SCRIVERE LE PROPRIETÀ NEL FILE .css IN MODO CORRETTO
- 36. elemento
- 37. elemento {}
- 38. elemento { }
- 40. { ALT Gr + SHIFT + [ } ALT Gr + SHIFT + ]
- 41. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> <ul> <li> Home </li> <li> Chi Siamo </li> <li> Foto </li> <li> Video </li> </ul> </div> ... ...
- 42. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> <ul> <li> Home </li> <li> Chi Siamo </li> <li> Foto </li> <li> Video </li> </ul> </div> ... ...
- 43. <div id=”contenitore”> NEL FILE .css SI RICHIAMA CON div#contenitore { }
- 44. id CSS #
- 48. div#contenitore { background: #ffffff; color: #000000; }
- 49. div#contenitore { background: #ffffff; color: #000000; }
- 50. VALORE ESADECIMALE DEI COLORI IL MODO PIÙ SEMPLICE PER INDICARE UN COLORE NEI CSS ESADECIMALE = 0123456789abcdef
- 51. VALORE ESADECIMALE DEI COLORI #FFFFFF
- 52. VALORE ESADECIMALE DEI COLORI #FFFFFF #000000
- 53. VALORE ESADECIMALE DEI COLORI #FFFFFF #000000 #FF0000
- 54. VALORE ESADECIMALE DEI COLORI #FFFFFF #000000 #FF0000 #0000FF
- 55. VALORE ESADECIMALE DEI COLORI #FFFFFF #000000 #FF0000 #0000FF #FFFF00
- 56. VALORE ESADECIMALE DEI COLORI #FFFFFF #000000 #FF0000 #0000FF #FFFF00 #FF6600 #00FF00 #00CCFF #FF00FF #3300FF
- 57. VALORE ESADECIMALE DEI COLORI #FFFFFF #000000 #FF0000 #0000FF #FFFF00 #FF6600 #00FF00 #00CCFF #FF00FF #3300FF #CCCCCC #999999 #333333 #3366FF #CCFF66
- 58. div#contenitore { background: #ffffff; color: #000000; }
- 59. div#contenitore { background: #ffffff; color: #000000; }
- 60. div#contenitore { background: #ffffff; color: #000000; border margin padding }
- 61. div#contenitore { background: #ffffff; color: #000000; border margin padding }
- 62. border = bordo margin = margine padding = rientro
- 63. div
- 64. border div
- 65. border div margin
- 66. border padding div margin
- 67. div#contenitore { background: #ffffff; color: #000000; border margin padding }
- 68. div#contenitore { background: #ffffff; color: #000000; border: 1px solid #000000; margin padding }
- 69. div#contenitore { background: #ffffff; color: #000000; border: 1px solid #000000; margin: 0px; padding }
- 70. div#contenitore { background: #ffffff; color: #000000; border: 1px solid #000000; margin: 0px; padding: 0px; }
- 71. div#contenitore { background: #ffffff; color: #000000; border: 1px solid #000000; margin: 0px auto; padding: 0px; }
- 72. div#contenitore { background: #ffffff; color: #000000; border: 1px solid #000000; margin: 0px auto; padding: 0px; width: 960px; }
- 74. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> <ul> <li> Home </li> <li> Chi Siamo </li> <li> Foto </li> <li> Video </li> </ul> </div> ... ...
- 75. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> <ul> <li> Home </li> <li> Chi Siamo </li> <li> Foto </li> <li> Video </li> </ul> </div> ... ...
- 76. <div id=”header”> <h1> Il mini sito della Musica </h1> </div>
- 77. <div id=”header”> <h1> Il mini sito della Musica </h1> </div> CSS
- 78. <div id=”header”> <h1> Il mini sito della Musica </h1> </div> CSS div#header
- 79. div#header { }
- 81. div#header { background: #FF0000; color: #FFFFFF; }
- 82. div#header { background: #FF0000; color: #FFFFFF; }
- 83. div#header { background: #FF0000; color: #FFFFFF; margin: 0px; padding: 0px; }
- 84. div#header { background: #FF0000; color: #FFFFFF; margin: 0px; padding: 0px; width: 960px; height: 120px; }
- 85. Il mini sito della Musica
- 86. <div id=”header”> <h1> Il mini sito della Musica </h1> </div>
- 87. <div id=”header”> <h1> Il mini sito della Musica </h1> </div>
- 88. h1 { color: #FFFFFF; font-family: Arial; font-size: 32px; font-weight: bold; margin: 0px; padding: 0px; }
- 89. h1 { color: #FFFFFF; font-family: Arial; font-size: 32px; font-weight: bold; margin: 0px; padding: 0px; }
- 90. Il mini sito della Musica
- 91. Il mini sito della Musica
- 92. Il mini sito della Musica ???
- 93. Il mini sito della Musica ???
- 94. h1 { color: #FFFFFF; font-family: Arial; font-size: 32px; font-weight: bold; margin: 0px; padding: 0px; }
- 95. h1 { color: #FFFFFF; font-family: Arial; font-size: 32px; font-weight: bold; margin: 0px; padding: 0px; }
- 96. h1 { color: #FFFFFF; font-family: Arial; font-size: 32px; font-weight: bold; margin: 0px; padding: 0px; }
- 97. h1 { color: #FFFFFF; font-family: Arial; font-size: 32px; font-weight: bold; margin: 0px; padding: 0px; }
- 98. div#header h1 { color: #FFFFFF; font-family: Arial; font-size: 32px; font-weight: bold; margin: 0px; padding: 0px; }
- 99. div#header h1 { color: #FFFFFF; font-family: Arial; font-size: 32px; font-weight: bold; margin: 0px; padding: 0px; }
- 100. Il mini sito della Musica
- 101. Il mini sito della Musica
- 102. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> <ul> <li> Home </li> <li> Chi Siamo </li> <li> Foto </li> <li> Video </li> </ul> </div> ... ...
- 103. <div id=”menu”> <ul> <li> Home </li> <li> Chi Siamo </li> <li> Foto </li> <li> Video </li> </ul> </div>
- 104. <div id=”menu”> <ul> <li> <a href=”#”> Home </a> </li> <li> <a href=”#”> Chi Siamo </a> </li> <li> <a href=”#”> Foto </a> </li> <li> <a href=”#”> Video </a> </li> </ul> </div>
- 105. div#menu { }
- 106. div#menu { background: #0000FF; color: #FFFFFF; }
- 107. div#menu { background: #0000FF; color: #FFFFFF; margin: 0px; padding: 0px; }
- 108. div#menu { background: #0000FF; color: #FFFFFF; margin: 0px; padding: 0px; width: 960px; height: 30px; }
- 109. Il mini sito della Musica
- 110. div#menu ul { margin: 0px; padding: 0px; width: 960px; height: 30px; list-style: none; }
- 111. div#menu ul li { margin: 0px; padding: 0px; font-family: Arial; font-size: 32px; font-weight: bold; display: inline; }
- 112. Il mini sito della Musica Home Chi Siamo Foto Video Archivio Contattaci ???
- 113. Il mini sito della Musica Home Chi Siamo Foto Video Archivio Contattaci ???
- 114. div#menu ul li a { color: #FFFFFF; text-decoration: none; }
- 115. Il mini sito della Musica Home Chi Siamo Foto Video Archivio Contattaci
- 116. Il mini sito della Musica Home Chi Siamo Foto Video Archivio Contattaci
- 117. androe.com
Editor's Notes
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n