Html e Css - 4 | WebMaster & WebDesigner
-
Upload
matteo-magni -
Category
Technology
-
view
887 -
download
0
description
Transcript of Html e Css - 4 | WebMaster & WebDesigner
![Page 1: Html e Css - 4 | WebMaster & WebDesigner](https://reader030.fdocuments.net/reader030/viewer/2022012403/5561e8e5d8b42aa5068b514c/html5/thumbnails/1.jpg)
HTML e CSS [4]Synergia – Matteo Magni
![Page 2: Html e Css - 4 | WebMaster & WebDesigner](https://reader030.fdocuments.net/reader030/viewer/2022012403/5561e8e5d8b42aa5068b514c/html5/thumbnails/2.jpg)
Css
• Selettore– Indica su quale
elemento del documento vogliamo agire.
• Blocco delle dichiarazioni– Proprietà
– Valore
Struttura delle regole
![Page 3: Html e Css - 4 | WebMaster & WebDesigner](https://reader030.fdocuments.net/reader030/viewer/2022012403/5561e8e5d8b42aa5068b514c/html5/thumbnails/3.jpg)
Selettori
• Come selettori di base ho gli elementi del documento (i tag)
<p> p {color:white;backgroundcolor:green;}→
<span> span {color: blue;backgroundcolor: black;}→
<strong> strong {color: blue;backgroundcolor: red;}→
![Page 4: Html e Css - 4 | WebMaster & WebDesigner](https://reader030.fdocuments.net/reader030/viewer/2022012403/5561e8e5d8b42aa5068b514c/html5/thumbnails/4.jpg)
Raggruppare i selettori
h1 {color: purple }
h2 {color: purple }
h3 {color: purple }
h4 {color: purple }
h5 {color: purple }
h6 {color: purple }
h1,h2,h3,h4,h5,h6 {color: purple }
![Page 5: Html e Css - 4 | WebMaster & WebDesigner](https://reader030.fdocuments.net/reader030/viewer/2022012403/5561e8e5d8b42aa5068b514c/html5/thumbnails/5.jpg)
Selettore Universale
* {color:red}
Introdotto dai css2
È l'equivalente di un selettore raggruppato con tutti gli elementi del documento
![Page 6: Html e Css - 4 | WebMaster & WebDesigner](https://reader030.fdocuments.net/reader030/viewer/2022012403/5561e8e5d8b42aa5068b514c/html5/thumbnails/6.jpg)
Selettore id - Attributo id
• Consente di attribuire gli stili con modalità indipendente dagli elementi oppure in combinazione con i selettori di elemento.
• Nel documento ci deve essere un solo elemento per ogni id
#pippo {color: purple }
<div id=”pippo”>
pippo
</div>
oppure
div#pippo {color:yellow}
![Page 7: Html e Css - 4 | WebMaster & WebDesigner](https://reader030.fdocuments.net/reader030/viewer/2022012403/5561e8e5d8b42aa5068b514c/html5/thumbnails/7.jpg)
Selettore class - Attributo class
• Funziona come l'id ma consente di selezionare più elementi.
• Possono esserci n elementi con la stessa classe
• Possono esserci elementi con più classi
<p class=”pippo pluto”>
.pippo {color: purple }
<div class=”pippo”>
pippo
</div>
<p class=”pippo”>pluto</p>
oppure
div.pippo {color:yellow}
![Page 8: Html e Css - 4 | WebMaster & WebDesigner](https://reader030.fdocuments.net/reader030/viewer/2022012403/5561e8e5d8b42aa5068b514c/html5/thumbnails/8.jpg)
Pseudoclassi
• Le pseudoclassi identificano elementi in base alle loro proprietà.
a:link {…}
a:hover {…}
a:visited {…}
![Page 9: Html e Css - 4 | WebMaster & WebDesigner](https://reader030.fdocuments.net/reader030/viewer/2022012403/5561e8e5d8b42aa5068b514c/html5/thumbnails/9.jpg)
Giochiamo un po' con le proprietà
• background. Definisce lo sfondo di un elemento. È una scorciatoia (shorthand properties) per background-attachment, background-color, background-image, background-position e background-repeat.
• border. Definisce il bordo di un elemento. È una scorciatoia (shorthand properties) per 'border-color, border-style e border-width.
(wikipedia)
• font. Definisce le proprietà del carattere. È una scorciatoia (shorthand properties) per font-family, font-size e font-weight.
• margin e padding. Definiscono lo spazio circostante gli elementi. La prima lo spazio esterno ai bordi, la seconda quello interno.
• text-align. Definisce l'allineamento degli elementi, tra cui il testo.
• color. Definisce il colore del testo di un elemento. Per definire lo sfondo si utilizza la proprietà background.
![Page 10: Html e Css - 4 | WebMaster & WebDesigner](https://reader030.fdocuments.net/reader030/viewer/2022012403/5561e8e5d8b42aa5068b514c/html5/thumbnails/10.jpg)
Giochiamo un po' con i valori
Colori:
#ff6600
#f60
rgb(255,102,0)
Rgb(100%,40%,0%)
Url:
url(http://esempio.it/file.html)
url("http://esempio.it/file.html")
Font:
fontfamily : "Arial", "Verdana", serif;
![Page 11: Html e Css - 4 | WebMaster & WebDesigner](https://reader030.fdocuments.net/reader030/viewer/2022012403/5561e8e5d8b42aa5068b514c/html5/thumbnails/11.jpg)
Elementi Float
• Questa proprietà definisce un blocco flottante, ovvero che permette la disposizione di altri elementi ai suoi lati.
float:left
float:right
clear:both
clear:right
clear:left
![Page 12: Html e Css - 4 | WebMaster & WebDesigner](https://reader030.fdocuments.net/reader030/viewer/2022012403/5561e8e5d8b42aa5068b514c/html5/thumbnails/12.jpg)
Liste – Menu [dejavu]
<div id="navigation_1">
<ul>
<li id="home"><a href="#" title="Home ">Home</a></li>
<li id="contatti"><a href="#" title="Contatti">Contatti</a></li>
<li id="azienda"><a href="#" title="azienda">azienda</a></li>
</ul>
</div>
<div id="navigation_2">
<ul>
<li id="home"><a href="#" title="Home ">Home</a></li>
<li id="contatti"><a href="#" title="Contatti">Contatti</a></li>
<li id="azienda"><a href="#" title="azienda">azienda</a></li>
</ul>
</div>
Lo formatteremo tramite i css
![Page 13: Html e Css - 4 | WebMaster & WebDesigner](https://reader030.fdocuments.net/reader030/viewer/2022012403/5561e8e5d8b42aa5068b514c/html5/thumbnails/13.jpg)
Menu liste e float
div#navigation_1{textalign: center}
li{display: inline} /*rendo gli elementi li inline*/
div#navigation_2{textalign: center}
div#navigation_2 ul{width: 375px; margin: 0 auto; liststyletype:none;}
div#navigation_2 li{float: left;width: 75px} /*Rendo gli elemnti li float*/
![Page 14: Html e Css - 4 | WebMaster & WebDesigner](https://reader030.fdocuments.net/reader030/viewer/2022012403/5561e8e5d8b42aa5068b514c/html5/thumbnails/14.jpg)
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>
![Page 15: Html e Css - 4 | WebMaster & WebDesigner](https://reader030.fdocuments.net/reader030/viewer/2022012403/5561e8e5d8b42aa5068b514c/html5/thumbnails/15.jpg)
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>
![Page 17: Html e Css - 4 | WebMaster & WebDesigner](https://reader030.fdocuments.net/reader030/viewer/2022012403/5561e8e5d8b42aa5068b514c/html5/thumbnails/17.jpg)
CssZenGarden
• È 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, l'unica cosa che viene modificata è il file .css esterno. Si, e proprio così!
http://www.csszengarden.com/
![Page 18: Html e Css - 4 | WebMaster & WebDesigner](https://reader030.fdocuments.net/reader030/viewer/2022012403/5561e8e5d8b42aa5068b514c/html5/thumbnails/18.jpg)
CssZenGarden
CSS consentono un controllo totale e completo sullo stile di un documento ipertestuale. L'unico modo per spiegarlo, in modo da stimolare l'interesse nelle persone, è mostrare cosa tutto questo può effettivamente implicare, una volta che le redini sono messe nelle mani di coloro i quali sono in grado di creare bellezza dalla struttura. Fino ad oggi, gran parte degli esempi dei trucchi e hacks più interessanti sono stati illustrati da specialisti di struttura e codice. I designer devono ancora fare la loro parte. Questo stato di cose deve cambiare.
http://www.csszengarden.com/tr/italiano/
![Page 19: Html e Css - 4 | WebMaster & WebDesigner](https://reader030.fdocuments.net/reader030/viewer/2022012403/5561e8e5d8b42aa5068b514c/html5/thumbnails/19.jpg)
Validare il codicehttp://jigsaw.w3.org/css-validator/
Il w3c ci osserva
![Page 20: Html e Css - 4 | WebMaster & WebDesigner](https://reader030.fdocuments.net/reader030/viewer/2022012403/5561e8e5d8b42aa5068b514c/html5/thumbnails/20.jpg)
Bibliografia
Anche in italiano
![Page 21: Html e Css - 4 | WebMaster & WebDesigner](https://reader030.fdocuments.net/reader030/viewer/2022012403/5561e8e5d8b42aa5068b514c/html5/thumbnails/21.jpg)
Domande?
Slide:
http://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail: