La prima cosa che facciamo sempre, per cominciare a stilare la nostra pagina web, è eliminare lo stile di default del browser per partire da "zero", la nostra pagina bianca dello stile.
Il documento di reset è un css che viene importato per primo e che annulla tutte le regole di default del browser. Il nostro stile andrà quindi a sovrascrivere il reset.
Il foglio di reset più famoso è probabilmente il Reset di Meyer:
http://meyerweb.com/eric/tools/css/reset/
body {
color: red;
}
p {
color: white;
background-color: black;
}
Il selettore serve per selezionare tutti gli elementi che verificano la regola. Le proprieta' vengono applicate agli elementi selezionati.
Le regole vengono applicate in cascata (cascade) dalla regola piu' generale a quella piu' specifica. Eventuali attributi ripetuti vengono sovrascritti.
/* Selettore con tipo di elemento: tutti gli elementi di quel tipo */
p { }
/* Tutti gli elementi p e anche h1 */
p, h1 { }
/* Tutti gli elementi a che discendono da un elemento p */
p a { }
/* Tutti gli elementi a che sono figli diretti di elementi p */
p > a { }
/* Tutti i p che seguono immediatamente un h2 (fratelli) */
h2 + p { }
/* Tutti i p che sono sullo stesso livello di un h2 (fratelli) */
h2 ~ p { }
/* Tutti gli elementi che hanno l'attributo attr */
[attr] { }
/* Tutti gli elementi che hanno l'attributo attr uguale a value */
[attr=value] { }
/* Tutti gli elementi che hanno l'attributo attr che comincia per value */
[attr^=value] { }
/* Tutti gli elementi che hanno l'attributo attr che finisce per value */
[attr$=value] { }
/* Tutti gli elementi che hanno l'attributo attr che contiene la sottostringa value */
[attr*=value] { }
/* Tutti gli elementi di tipo p che hanno l'attributo attr uguale a value */
p[attr=value] { }
Width ed height influenzano solamente le dimensioni del contenuto dell'elemento. Il default per width ed height è auto.
Il padding è un bordo interno, tra il bordo e il contenuto dell'elemento. Se espresso in % è riferito alla % della width del contenitore.
Se presente, il bordo dell'elemento. Può avere spessore, colore e stile configurati da css.
Il margine è lo spazio che un elemento si prende intorno a sé per separarsi dagli altri elementi.
div {
width: 100px;
height: 100%;
margin: 10px;
margin-top: 2em;
margin: 1em 2em 1em 2em;
padding: 10px;
padding-left: 20px;
padding: 1em 2em;
}
Solitamente relativa al parent, ovvero la percentuale sulla width del parent.
Relativi al viewport, 40vw equivale al 40% della width del viewport, vh invece è la height.
Screen pixels. Esattamente quello che ci aspetteremmo.
1 em è la dimensione corrente del font. 2 em è il doppio e così via... Il che significa che se il nostro font è visualizzato più grande (device diversa, +/- dpi, etc...) le dimensioni cambiano di conseguenza.
Specificando come `auto` i margini di un elemento il browser cercherà di mettere quanto più margine possibile. Questo è un trucchetto che può essere utile per centrare orizzontalmente un elemento nel suo parent, solitamente.
.container {
width: 200px;
height: 100px;
}
.child {
margin-left: auto;
margin-right: auto;
width: 50%;
height: 50%;
}
Css3 ci permette di avere anche piccole ed elementari espressioni per calcolare i nostri valori di width, height, etc...
Con calc possiamo fare operazioni tra misure con unità diverse, come % ed em, px e vw, etc...
.container {
width: calc(100% - 1em);
height: calc(100% / 6);
}
La posizione di default. Gli elementi sono disposti seguendo il normale flow della pagina, tra elementi block e inline.
Un elemento fixed è posizionato relativamente al viewport, ignorando lo scrolling
L'elemento viene collocato specificando left, right, top e bottom relativamente a dove sarebbe stato se fosse static.
L'elemento è posizionato in senso assoluto rispetto al primo parent che è stato a sua volta posizionato (non static).
Proviamo a costruire una barra di navigazione fissa in cima alla pagina, che rimanga tale anche se si scrolla. Riempiamo la pagina con qualche paragrafo di lorem ipsum per vedere l'effetto.
Ricreare l'esercizio come da esempio.
Un ID deve essere unico ed irripetibile. Si può usare con cautela per marcare elementi che sicuramente saranno unici e speciali.
Non uniche, usate per descrivere l'aspetti di classi di elementi, per applicare lo stesso stile a molti elementi contemporaneamente.
Dare un ID o una classe ad un elemento non altera il suo aspetto di default fino a che non viene creata una regola css appropriata.
Un elemento può essere descritto sia da un id che da una o più classi.
#my-id {
color: white;
}
.my-class {
color: black;
}
<h1 id="title">Hello World</h1>
<p class="my-class">Lorem ipsum</p>
/* Tutti gli elementi */
* { }
/* L'elemento avente l'id specificato */
#id { }
/* Tutti gli elementi di classe specificata */
.class { }
/* L'elemento con id e classe specificata */
#id.class { }
/* Tutti gli elementi di classe1 e classe2 */
.class1.class2 { }
/* Tutti gli elementi di classe 2 discendenti di classe 1 */
.class1 .class2 { }
/* Tutti gli elementi di class1 con attr = value */
.class1[attr=value] { }
p {
/* colore del testo */
color: black;
/* colore di sfondo */
background-color: white;
/* allineamento */
text-align: center; /* left | right | justify */
/* decorazione del testo */
text-decoration: none; /* overline | line-through | underline */
/* upper-lower case */
text-transform: lowercase; /* uppercase | capitalize */
/* indentazione */
text-indent: 20px;
/* spazio tra lettere e parole */
letter-spacing: 2px;
word-spacing: 10px;
/* altezza di una linea */
line-height: 20px
}
p {
/* stile del bordo per tutti i lati */
border-style: solid;
border-width: 2px;
border-color: black;
/* o per singolo lato */
border-top-style: solid;
border-top-width: 2px;
border-top-color: black;
/* o con una shortcut */
border: 2px solid black;
}
p {
/* font: nome, famiglia, serif/non serif */
font-family: "Times New Roman", Times, serif;
/* stile del font */
font-style: normal; /* italic | oblique */
/* dimensioni */
font-size: 20px;
/* peso del font */
font-weight: normal; /* bold */
/* variante del font */
font-variant: normal; /* small-caps */
}
Un elemento inline prende il minimo spazio possibile, non forza una nuova linea, e non forza gli altri elementi sopra e sotto di lui anche se ha padding e margini.
Un elemento block cerca di allargarsi in width il massimo possibile e forza una nuova linea, spostando se necessario gli altri elementi.
Si comporta come un elemento block ma senza forzare la nuova linea. È il modo per collocare più elementi block sulla stessa linea.
L'elemento è invisibile e non ha alcun effetto sul layout.
/* I link attivi */
a:active { }
/* I link già visitati */
a:visited { }
/* I link non ancora visitati */
a:link { }
/* I p vuoti */
p:empty { }
/* Gli input che hanno il focus */
input:focus { }
/* I .button che hanno il mouse sopra */
.button:hover { }
/* I .button che hanno il mouse sopra */
.button:hover { }
/* I li che sono primi figli in un parent */
li:first-child { }
/* I li che sono ultimi figli in un parent */
li:last-child { }
/* I li che sono secondi figli in un parent */
li:nth-child(2) { }
Possiamo creare la nostra classe 'button' per stilare dei link per avere dei pulsanti da usare nella nostra pagina web.
Vedere esempio.
Aggiungete le animazioni come da esempio: il cambio di colore e la posizione.