Post on 24-May-2015
description
transcript
HTML e CSS [4]Synergia – Matteo Magni
Css
• Selettore– Indica su quale
elemento del documento vogliamo agire.
• Blocco delle dichiarazioni– Proprietà
– Valore
Struttura delle regole
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;}→
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 }
Selettore Universale
* {color:red}
Introdotto dai css2
È l'equivalente di un selettore raggruppato con tutti gli elementi del documento
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}
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}
Pseudoclassi
• Le pseudoclassi identificano elementi in base alle loro proprietà.
a:link {…}
a:hover {…}
a:visited {…}
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.
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;
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
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
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*/
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>
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>
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/
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/
Validare il codicehttp://jigsaw.w3.org/css-validator/
Il w3c ci osserva
Bibliografia
Anche in italiano
Domande?
Slide:
http://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail:
matteo@magni.me