Lez.1 - Corso Avanzato Css

RESET:
- Ripristinare a Livelle Predefiniti

Reset

Reset (resettare):
Resettare qualcosa significa ripristinare le sue impostazioni ai livelli predefiniti.

Sappiamo che il browser (e dipende molto da quale browser viene visualizzata la pagina, perché non tutti i browser visualizzano la pagina allo stesso modo in special modo se parliamo di dimensioni e spaziature) di suo ha già una impostazione per visualizzare la pagina, quindi se abbimo necessità di resettare qualcosa è meglio farlo soltanto in fase iniziale e poi dopo nello stile della pagina vero e proprio andiamo ad assegnare i valori definitivi alle proprietà dei vari elementi.

Il reset, se lo facciamo manualmente elemento per elemento, è importante posizionarlo per primo nello style perchè il browser deve leggerlo per prima cosa.

I css reset sono utili perché vanno ad eliminare gli stili predefiniti di tutti i browser in modo che gli elementi html che usiamo nella nostra pagina vengono gestiti allo stesso modo su tutti i browser.
Se non vogliamo stare li ad elencare tutti gli elementi uno per uno, possiamo usare un
Css Reset con Selettore Universale (quello che viene richiamoto con * l'asteriso) come vediamo nell'esempio sotto.
Questo però a mio parere non è il metodo migliore perché come ho resettato tutti gli elementi mi devo mettere a ridefinire uno stile per tutti quei elementi che sono stati toccati dal Selettore Universale.
Questo può andar bene solo per una pagina web di poche righe, per un sito di piccole dimensioni, per un sito più grande c'è bisogno di un reset più professionale.
Se vogliamo dei Reset più Professionali sul web se ne trovano tanti.

Uno sito consigliato è: CSSRESET.COM dove fa vedere i reset più popolari.

Il Codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Selettori Multipli</title>
  <meta charset="utf-8">
  <style type="text/css">
    /*CSS RESET*/
    body, h1, h2, h3, p, section {
	    margin: 0px;
	    padding: 0px;
    }
    /*css reset con Selettore Universale*/
    * {
	    margin: 0px;
	    padding: 0px;
    } 
    /* reset per far capire al browser che i vari elementi li deve considerare come elementi di blocco*/
    header, section, footer, nav, {
	    display: block;
    }
    /*h2 una volta resettato lo imposto con un margine di 30px*/
    h2 {margin:30px;} 
  </style>
 </head>
 <body>
   <header>
	   <h1>Reset Ripristinare a livelli predefiniti</h1>
   </header>
   <section>
	   <h2>Cosa cambia con o senza CSS Reset</h2>
	   <p>Testo per vedere come cambia se resettiamo una pagina web.</p>
	   <p>Testo per vedere come cambia se resettiamo una pagina web.</p>
	   <p>Testo per vedere come cambia se resettiamo una pagina web.</p>
   </section>
 </body>               
</html>