Progettazione di siti web
a.a. 2021/22

Fogli di stile: introduzione

Maria Simi
Marzo, 2022

[Learning web design, J. Niederst
Manuale di riferimento del W3C]

Vantaggi dei fogli di stile separati


Riassumiamo i vantaggi derivanti dal mantenere una chiara distinzione tra gli aspetti stilistici e quelli strutturali

Uno stile per molti contenuti

Stesso contenuto in più stili

Controllo stilistico molto potente

Regole CSS: sintassi

Regole CSS: esempi

selettore {                          regola
   proprietà: valore;
   proprietà: valore;proprietà: valore             dichiarazioni
}			                
body {
   margin: 0;
   background: white; 	   		
   font-family: helvetica, arial, sans-serif
}
h1 {
   font-weight: bold;
   font-size: 24px		
}			  

Selettori

Selettori di elementi singoli (per ID)

<p id="saluti">Saluti e baci ... </p>

#saluti {			
   font-size: 11px;
   margin-top: 25px
}

oppure p#saluti

Nota: si assume che ci sia un solo elemento con un certo id in una pagina

Selettori classe (CLASS)

Selettori contestuali

L'albero del documento

      
<html> 
 <head>
   <title>My home page</title>
 </head>
 <body>
   <h1>My <em>home</em> page</h1>
   <p>
     Welcome to my home page! Let me
     tell you about my favorite
     <em>composers</em>: 
   </p>
   <div>
     <ul>
       <li> Elvis Costello </li>
       <li> Johannes Brahms </li>
       <li> George Brassens </li>
     </ul>
   </div>
 </body>
</html>

Selettori discendenti

HTML: <h1>Questo titolo è <em>molto</em> importante</h1>	
CSS:
   h1 { color: red }
   em { color: red }
   h1 em { color: blue }

L’enfasi è blu nel contesto di un titolo rosso altrimenti è rossa

ol a em { font-weight: bold }

Il testo enfatizzato dentro un’ancora dentro una lista ordinata viene reso in grassetto

Selettori figlio

Selettori di adiacenza

I paragrafi sono normalmente rientrati con eccezione del primo paragrafo immediatamente seguente un titolo di primo livello.

DIV e SPAN: elementi generici

Tre modi di usare gli stili

Fogli di stile esterni

<head>
	…
 <link rel="stylesheet" href="stile.css" />
	…
</head>	
Pagina normale        Pagina con CSS

Fogli di stile embedded

<head>
  …
<style>
<!--
body {
   margin: 0;	
   font-family: helvetica, arial, sans-serif
}
 -->
</style>
</head>		

Nota: I commenti servono per i browser che non supportano i CSS e per evitare l’indicizzazione da parte dei motori di ricerca

Fogli di stile inline :-O

Pagina con CSS (inline)

Fogli di stile in cascata

L'albero del documento

<html> 
 <head>
   <title>My home page</title>
 </head>
 <body>
   <h1>My <em>home</em> page</h1>
   <p>
     Welcome to my home page! Let me
     tell you about my favorite
     <em>composers</em>: 
   </p>
   <div>
     <ul>
       <li> Elvis Costello </li>
       <li> Johannes Brahms </li>
       <li> George Brassens </li>
     </ul>
   </div>
 </body>
</html>

Gli stili vengono ereditati a meno di ridefinizione

I selettori e l'albero

Precedenza tra sorgenti di stile

Precedenza temporale

Esempio

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="stile.css" />		
  </head>				 	

    <style type="text/css">
      h1 {color: green}
    </style>
	

  <body style="color: red">	           
		...
	<h1 style="color: blue">Come sono?</h1>	
	  <p> Testo che segue il titolo.</p>
  </body>
</html>
file stile.css:
 h1 { 
    color: yellow;
}

Esempio

<html> <head> <style type="text/css"> h1 {color: green} </style> <link rel="stylesheet" type="text/css" href="stile.css"> </head> <body style="color: red"> <h1 style="color: blue">Come sono?</h1> <p>Testo che segue il titolo.</p> </body> </html>

stile.css

Esempio

Sfruttate la cascata!

Regole in forma abbreviata

h1 {font-weight: bold}
h2 {font-weight: bold}
h3 {font-weight: bold} 

h1 {color: green}
h1 {text-align: center}

h1 {color: green}
h1 {color: red} 

*.smaller {font-size: 9px}

h1 {font-size: 36pt;
    font-family: serif; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    line-height: normal} 

h1, h2, h3 {font-weight: bold}


h1 {color: green;
    text-align: center}

h1 {color: red}


.smaller {font-size: 9px}


h1 {font: 36pt serif}

Selettori mediante pseudo-classi

:first-childun elemento che compare come primo figlio
li:first-childprimo elemento di una lista
:last-childl’ultimo figlio dell'elemento padre
div#content p:last-childultimo paragrafo dentro il div con id 'content'
li:last-childultimo elemento di una lista
li:nth-child(n)elemento n-esimo di una lista
li:nth-child(even)elemento figlio in posizione pari ('odd' per dispari)

Indicazioni sui fogli di stile

Una regola per tutte ...

Conclusioni