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;background­color:green;}→

<span>    span {color: blue;background­color: black;}→

<strong>   strong {color: blue;background­color: 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:

font­family : "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{text­align: center}

li{display: inline} /*rendo gli elementi li inline*/

div#navigation_2{text­align: center}

div#navigation_2 ul{width: 375px; margin: 0 auto; list­style­type: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>

Esempihttp://blog.html.it/layoutgala/indexIta.html

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