Html e Css - 4 | WebMaster & WebDesigner

1,221 views

Published on

Quarta lezione modulo HTML e CSS del corso per WebMaster & WebDesigner

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,221
On SlideShare
0
From Embeds
0
Number of Embeds
44
Actions
Shares
0
Downloads
35
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html e Css - 4 | WebMaster & WebDesigner

  1. 1. HTML e CSS [4]Synergia – Matteo Magni
  2. 2. CssStruttura delle regole • Selettore – Indica su quale elemento del documento vogliamo agire. • Blocco delle dichiarazioni – Proprietà – Valore
  3. 3. Selettori• Come selettori di base ho gli elementi del documento (i tag)<p> → p {color:white;background­color:green;}<span> →  span {color: blue;background­color: black;}<strong> → strong {color: blue;background­color: red;}
  4. 4. Raggruppare i selettorih1 {color: purple }h2 {color: purple }h3 {color: purple } h1,h2,h3,h4,h5,h6 h4 {color: purple } {color: purple }h5 {color: purple }h6 {color: purple }
  5. 5. Selettore Universale * {color:red} Introdotto dai css2 È lequivalente di un selettore raggruppato con tutti gli elementi del documento
  6. 6. Selettore id - Attributo id• Consente di attribuire gli #pippo {color:  stili con modalità purple } indipendente dagli <div id=”pippo”> elementi oppure in pippo combinazione con i </div> selettori di elemento. oppure• Nel documento ci deve div#pippo  essere un solo elemento {color:yellow} per ogni id
  7. 7. Selettore class - Attributo class• Funziona come lid ma .pippo {color: purple } consente di selezionare <div class=”pippo”> più elementi. pippo• Possono esserci n </div> elementi con la stessa <p  classe class=”pippo”>pluto</p>• Possono esserci elementi oppure con più classi div.pippo {color:yellow}<p class=”pippo pluto”>
  8. 8. Pseudoclassi• Le pseudoclassi a:link {…} identificano a:hover {…} elementi in base a:visited {…} alle loro proprietà.
  9. 9. Giochiamo un po con le proprietà• background. Definisce lo sfondo • font. Definisce le proprietà del di un elemento. È una scorciatoia carattere. È una scorciatoia (shorthand properties) per (shorthand properties) per font- background-attachment, family, font-size e font-weight. background-color, background- • margin e padding. Definiscono lo image, background-position e spazio circostante gli elementi. La background-repeat. prima lo spazio esterno ai bordi, la• border. Definisce il bordo di un seconda quello interno. elemento. È una scorciatoia • text-align. Definisce (shorthand properties) per border- lallineamento degli elementi, tra color, border-style e border-width. cui il testo. • color. Definisce il colore del testo (wikipedia) di un elemento. Per definire lo sfondo si utilizza la proprietà background.
  10. 10. Giochiamo un po con i valoriColori: Font:#ff6600 font­family : "Arial", #f60 "Verdana", serif;rgb(255,102,0)Rgb(100%,40%,0%)Url:url(http://esempio.it/file.html)url("http://esempio.it/file.html")
  11. 11. Elementi Float• Questa proprietà definisce un blocco flottante, ovvero che permette la disposizione di altri elementi ai suoi lati.float:left float:right clear:bothclear:right clear:left
  12. 12. Liste – Menu [dejavu]<div id="navigation_1"> <div id="navigation_2"><ul> <ul><li id="home"><a href="#"  <li id="home"><a href="#" title="Home ">Home</a></li> title="Home ">Home</a></li><li id="contatti"><a href="#"  <li id="contatti"><a href="#" title="Contatti">Contatti</a></li> title="Contatti">Contatti</a></li><li id="azienda"><a href="#"  <li id="azienda"><a href="#" title="azienda">azienda</a></li> title="azienda">azienda</a></li></ul> </ul></div> </div> Lo formatteremo tramite i css
  13. 13. Menu liste e floatdiv#navigation_1{text­ div#navigation_2{text­align: center} align: center}li{display: inline}  div#navigation_2 /*rendo gli elementi  ul{width: 375px; li inline*/ margin: 0 auto; list­ style­type:none;} div#navigation_2  li{float: left;width:  75px} /*Rendo gli  elemnti li float*/
  14. 14. Layout with Table<table width="500">        <tr><td id="header" colspan="2">         <h1>Main Title of Web Page</h1></td></tr>        <tr valign="top">        <td id="menu">         </td>        <td id="content">Content goes here</td></tr><tr>        <td colspan="2">Copyright © W3Schools.com</td></tr>     </table>
  15. 15. Layout Table Less <div id="container">         <div id="header">             <h1>Main Title of  Web Page</h1>         </div>         <div id="menu">              </div>     <div id="content">     Content goes here     </div>     <div id="footer">     Copyright ©W3Schools.com     </div>
  16. 16. Esempihttp://blog.html.it/layoutgala/indexIta.html
  17. 17. CssZenGardenhttp://www.csszengarden.com/ • È evidente la necessità che gli artisti delle grafica prendano in seria considerazione i CSS. Il Giardino Zen si prefigge di stimolare, ispirare ed incoraggiare la partecipazione. Come punto di partenza, si osservino alcuni dei progetti in elenco. Cliccando su ciascuno di essi il relativo foglio di stile verrà caricato in questa stessa pagina. Il codice è esattamente identico, lunica cosa che viene modificata è il file .css esterno. Si, e proprio così!
  18. 18. CssZenGarden http://www.csszengarden.com/tr/italiano/CSS consentono un controllo totale ecompleto sullo stile di un documentoipertestuale. Lunico modo per spiegarlo,in modo da stimolare linteresse nellepersone, è mostrare cosa tutto questopuò effettivamente implicare, una voltache le redini sono messe nelle mani dicoloro i quali sono in grado di crearebellezza dalla struttura. Fino ad oggi,gran parte degli esempi dei trucchi ehacks più interessanti sono stati illustratida specialisti di struttura e codice. Idesigner devono ancora fare la loroparte. Questo stato di cose devecambiare.
  19. 19. Validare il codice http://jigsaw.w3.org/css-validator/Il w3c ci osserva
  20. 20. Bibliografia Anche in italiano
  21. 21. Domande? Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: matteo@magni.me

×