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

1. HTML e CSS [4]
Synergia – Matteo Magni

2. Css
Struttura delle regole
• Selettore
– Indica su quale
elemento del documento
vogliamo agire.
• Blocco delle
dichiarazioni
– Proprietà
– Valore

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. Raggruppare i selettori
h1 {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. Selettore Universale
* {color:red}
Introdotto dai css2
È l'equivalente di un
selettore
raggruppato con tutti
gli elementi del
documento

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. Selettore class - Attributo class
• Funziona come l'id 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. Pseudoclassi
• Le pseudoclassi a:link {…}
identificano a:hover {…}
elementi in base a:visited {…}
alle loro proprietà.

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- l'allineamento 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. Giochiamo un po' con i valori
Colori: 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. 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

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. Menu liste e float
div#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. 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. 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. Esempi
http://blog.html.it/layoutgala/indexIta.html

17. CssZenGarden
http://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, l'unica cosa
che viene modificata è il file .css
esterno. Si, e proprio così!

18. CssZenGarden
http://www.csszengarden.com/tr/italiano/
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.

19. Validare il codice
http://jigsaw.w3.org/css-validator/
Il w3c ci osserva

20. Bibliografia
Anche in italiano

21. Domande?
Slide:
http://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail:
matteo@magni.me