Sintesi della lezione
SELETTORI
- I selettori sono pattern (criteri di selezione) usati per individuare l'elemento (o gli elementi) a cui si desidera attribuire lo stile.
ELEMENTO
- Inserendo un selettore senza prefisso si identifica un elemento HTML.
- Se si inseriscono più selettori separati da virgola il gruppo di regole viene attribuito ad ogni selettore
body, html {
height: 100%;
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 300;
color: #333333;
background-color: #ffffff;
}
h1, h2, h3, h4, h5, h6 {
font-weight:700;
}
CLASSE
- Un selettore preceduto da un punto identifica una classe.
- Una classe è un nome che identifica un gruppo di regole di stile.
- Gli elementi della pagina che contengono quel nome nell’attributo class seguono le regole di stile che la classe identifica
.red {
color: #dd0000;
}
.text-center {
text-align:center;
}
.text-right {
text-align:right;
}
ATTRIBUTO
- Un selettore compreso tra parentesi quadre rappresenta un attributo.
- Esistono varie sintassi .
[target]
Seleziona tutti gli elementi con un attributo target
[target="_blank"]
Seleziona tutti gli elementi con target="_blank"
[title~="flower"]
Seleziona tutti gli elementi con un attributo title che continene la parola "flower"
a[href^="https"]
Seleziona tutti gli elementi <a> il cui attributo href inizia con "https"
a[href$=".pdf"]
Seleziona tutti gli elementi <a> il cui attributo href termina con ".pdf"
a[href*="w3schools"]
Seleziona tutti gli elementi <a> il cui attributo href contiene la stringa "w3schools"
/* Seleziona tutti gli elementi che hanno l'attributo title*/
[title]{
background-color:#ffffdd;
}
/* Seleziona tutti gli elementi a in cui l'attributo href inizia con #*/
a[href^="#"]{
text-decoration: underline;
color: darkmagenta;
}
ID
Un selettore preceduto da #
identifica una elemento con un determinato id.
/* Seleziona l'elemento con attributo id="main" */
#main {
font-family:'Times New Roman', Times, serif;
font-size: 20px;
}
PSEUDO SELETTORI
PSEUDO CLASSI
La pseudo classe è un specifica del selettore. La sintassi è: selettore:pseudo-classe
. Usando le pseudo-classi posso attribuire un particolare aspetto ad un elemento quando si trova in un determinato stato. Esempi:
:hover
indica lo stato di un elemento quando il puntatore del mouse passa sopra all’elemento stesso
:focus
indica lo stato di un elemento quando ha il «il focus»
:nth-child(n)
indica un elemento quando è l’ennesimo figlio del suo parent.
/* Seleziona ogni elemento a contenuto in un elemento li a sua volta contenuto in un elemento ul che sta dentro un nav con classe indice quando il cursore del mouse e sopra l'elemento*/
nav.indice ul li a:hover {
color: #dd0000;
}
/* Vengono selezionati il secondo e il terzo figlio ci ogni elemento con classe header-col ccontenuto in un elemento con classe header-main*/
.header-main .header-col:nth-child(2),
.header-main .header-col:nth-child(3) {
height:40%;
text-align: right;
}
PSEUDO ELEMENTI
Lo pseudo elemento è un specifica del selettore. La sintassi è: selettore::pseudo-elemento
. Usando gli pseudo-elementi posso attribuire un particolare aspetto ad un parte dell'elemento senza che la struttura HTML la differenzi. Esempi:
::after
e ::before
consentono di inserire contenuto dopo o prima l'elemento identificato dal selettore
::first-line
consente di modificare l'aspetto della prima riga di testo di un elemento
::first-letter
consente di modificare l'aspetto della prima lettera di un elemento
::selection
determina l'aspetto della porzione di testo selezionata dell'utente
Nota bene Tutti i maggiori browser, per il momento, supportano sia la sintassi con doppi due punti selettore::pseudo-elemento
che la sintassi con i due punti singoli selettore:pseudo-elemento
mentre Microsoft Internet Explorer 8 non supporta la sintassi con i doppi due punti.
SELETTORI COMPOSTI
UNIONE DI SELETTORI
Quando viene seguito senza separatori da un selettore di classe, di id, di attributo o di pseudoclasse, vengono selezionati solo gli elementi che soddisfano ad entrambi i criteri. Esempi:
nav.indice
: elementi nav il cui attributo class contiene indice
div#main
: la div con id uguale a main
input[type=‘text‘]
: tutti gli elementi input con l’attributo type uguale a text
nav.indice {
width:95%;
position:static;
text-align: left;
transform: translate(0,0);
margin: 40px auto 10px;
}
SELEZIONARE UN ELEMENTO CHE È DENTRO UN ALTRO ELEMENTO
nav.indice ol li a {
color: #000;
}
Seleziona tutti gli elementi <a>
che sono dentro un elemento <li>
che a suo volta è dentro un elemento <ol>
che è dentro un elemento <nav>
con classe indice
.
SELEZIONARE UN ELEMENTO CHE È FIGLIO DI UN ALTRO ELEMENTO
nav.indice > ol > li a {
color: #000;
}
Seleziona tutti gli elementi <a>
che sono dentro un elemento <li>
che è figlio di un elemento <ul>
che è figlio di un elemento <nav>
con classe indice. In questo modo viene stilizzata solo la lista di primo livello, le sottoliste annidate dentro gli elementi <li> sono escluse.
BOX MODEL
Tutti gli elementi HTML possono essere considerati come scatole, riquadri che occupano un certo spazio sulla schermo. In CSS, il termine "box model" viene usato quando si parla di design e il layout.
Il box model si compone di: margini, bordi, margini interni (padding), e contenuto effettivo.
content
- Il contenuto dell'elemento, dove compaiono testo e immagini
padding
– Margine internoattorno al contenuto.
border
– Il bordo
margin
– Distanza tra l'elemento e gli elementi che lo circondano
box-sizing:content-box

box-sizing:border-box

background

box-sizing
- Le proprietà
box-sizing
viene utilizzato per indicare al browser quali componenti del box model devono essere inclusi nel calcolo di larghezza e altezza.
- Il valore di
box-sizing
deve essere:
content-box
(default): il calcolo comprende solo il contenuto.
border-box
: il calcolo comprende anche margine interno (padding) e border ma non margin .
* {
box-sizing : border-box;
}
BACKGROUND
background-color
- Definisce il colore di sfondo di un elemento.
body {
background-color: #FFFFFF;
}
div.main {
background-color: transparent;
}
background-image
- Definisce l'URL di un'immagine da usare come sfondo di un elemento.
body {
background-image: url(sfondo-scuro.jpg);
}
div.main {
background-image: none;
}
background-repeat
- Consente di definire la direzione in cui l'immagine di sfondo viene ripetuta.
- Valori:
repeat
, repeat-x
, repeat-y,
no-repeat
body {
background-repeat: repeat-x;
}
background-attachment
div.main {
background-attachment: fixed;
}
background-position
- Definisce il punto in cui verrà piazzata un'immagine di sfondo.
body {
background-position: top center;
}
- Valori: valori in percentuale, valori espressi con unità di misura, parole chiave top, left, bottom, right, center.
background
- Per essere valida, la dichiarazione non deve contenere necessariamente riferimenti a tutte le proprietà viste finora, ma deve contenere almeno la definizione del colore di sfondo.
body {
background: url(pattern.png) repat-x scroll;
}
background-clip
- Definisce l'are dello sfondo.
- Valori: border-box|padding-box|content-box|initial|inherit
div.main {
background-clip: padding-box;
}
background-origin
- A cosa è relativa la posizione dell'immagine.
- Valore: border-box|padding-box|content-box|initial|inherit
div.main {
background-origin: border-box;
}
background-size
- Consente di definire come l'immagine di sfondo riempirà il contenitore.
- Valori: auto|larghezza altezza|cover|contain|initial|inherit
div.main {
background-size: cover;
}
BORDER
border-style
- La proprietà
border-style
specifica quale tipo di bordo visualizzare.
- Valori sono consentiti:
- dotted - Definisce un bordo punteggiato
- dashed - Definisce un bordo tratteggiato
- solid - Definisce un bordo solido
- double - Definisce un doppio bordo
- groove- Definisce un bordo 3D scanalato. L'effetto dipende dal valore border-color
- ridge- Definisce un bordo 3D increspato. L'effetto dipende dal valore border-color
- inset- Definisce un bordo 3D inserto. L'effetto dipende dal valore border-color
- outset- Definisce un bordo in 3D. L'effetto dipende dal valore border-color
- none - Definisce nessun bordo
- hidden - Definisce un bordo nascosto
- La proprietà
border-style
può avere da uno a quattro valori (superiore, destro, inferiore, sinistro).
p.dotted { border-style: dotted; }
p.dashed { border-style: dashed; }
p.solid { border-style: solid; }
p.double { border-style: double; }
p.groove { border-style: groove; }
p.ridge { border-style: ridge; }
p.inset { border-style: inset; }
p.outset { border-style: outset; }
p.none { border-style: none; }
p.hidden { border-style: hidden; }
p.mix { border-style: dotted dashed solid double; }
border-width
- La proprietà
border-width
specifica la larghezza dei quattro bordi.
- La larghezza può essere impostata come una dimensione specifica (in
px
, pt
, cm
, em
, ecc) o utilizzando uno dei tre valori predefiniti: thin
, medium
, o thick
.
- La proprietà
border-width
può avere da uno a quattro valori (superiore, destro, inferiore, sinistro).
p.two {
border-style: solid;
border-width: medium; }
p.three {
border-style: solid;
border-width: 2px 10px 4px 20px;
}
border-color
- La proprietà border-color specifica la larghezza dei quattro bordi.
- Il colore deve essere specificato con uno dei valori legali
- La proprietà border-color può avere da uno a quattro valori (superiore, destro, inferiore, sinistro).
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: red green #0000FF rgb(255,255,0);
}
Per ognuna delle proprietà elencate esiste la versione che consente di stilizzare un singolo lato;
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Con la proprietà border è possibile settare tutte le proprietà di tutti i quattro bordi con un'unica regola;
p {
border: 5px solid blue;
}
Con le proprietà border-top
, border-right
, border-bottom
, border-left
è possibile settare tutte le proprietà dei singoli bordi.
border-radius
p {
border: 2px solid darkred;
border-radius: 5px;
}
OUTLINE
L'outline è un bordo esterno che serve ad evidenziare un elemento e non influisce in alcun modo sulle dimensioni dell'elemento. Per default un outline tratteggiato circonda gli elementi che hanno il focus. La proprietà è la stesse caratteristiche di border
.
outline-style
L'outline è un bordo esterno che serve ad evidenziare un elemento e non influisce in alcun modo sulle dimensioni dell'elemento. Per default un outline tratteggiato circonda gli elementi che hanno il focus. La proprietà è la stesse caratteristiche di border.
- La proprietà
outline-style
specifica quale tipo di bordo visualizzare.
- Valori sono consentiti:
- dotted - Definisce un bordo punteggiato
- dashed - Definisce un bordo tratteggiato
- solid - Definisce un bordo solido
- double - Definisce un doppio bordo
- groove- Definisce un bordo 3D scanalato. L'effetto dipende dal valore outline-color
- ridge- Definisce un bordo 3D increspato. L'effetto dipende dal valore outline-color
- inset- Definisce un bordo 3D inserto. L'effetto dipende dal valore outline-color
- outset- Definisce un bordo in 3D. L'effetto dipende dal valore outline-color
- none - Definisce nessun bordo
- hidden - Definisce un bordo nascosto
- La proprietà
outline-style
può avere da uno a quattro valori (superiore, destro, inferiore, sinistro).
p.dotted { outline-style: dotted; }
p.dashed { outline-style: dashed; }
p.solid { outline-style: solid; }
p.double { outline-style: double; }
p.groove { outline-style: groove; }
p.ridge { outline-style: ridge; }
p.inset { outline-style: inset; }
p.outset { outline-style: outset; }
p.none { outline-style: none; }
p.hidden { outline-style: hidden; }
p.mix { outline-style: dotted dashed solid double; }
outline-width
- La proprietà
outline-width
specifica la larghezza dei quattro bordi.
- La larghezza può essere impostata come una dimensione specifica (in
px
, pt
, cm
, em
, ecc) o utilizzando uno dei tre valori predefiniti: thin
, medium
, o thick
.
- La proprietà
outline-width
può avere da uno a quattro valori (superiore, destro, inferiore, sinistro).
p.two {
outline-style: solid;
outline-width: medium; }
p.three {
outline-style: solid;
outline-width: 2px 10px 4px 20px;
}
outline-color
- La proprietà outline-color specifica la larghezza dei quattro bordi.
- Il colore deve essere specificato con uno dei valori legali
- La proprietà outline-color può avere da uno a quattro valori (superiore, destro, inferiore, sinistro).
p.one {
outline-style: solid;
outline-color: red;
}
p.two {
outline-style: solid;
outline-color: red green #0000FF rgb(255,255,0);
}
Per ognuna delle proprietà elencate esiste la versione che consente di stilizzare un singolo lato;
p {
outline-top-style: dotted;
outline-right-style: solid;
outline-bottom-style: dotted;
outline-left-style: solid;
}
Con la proprietà border è possibile settare tutte le proprietà di tutti i quattro bordi con un'unica regola;
p {
border: 5px solid blue;
}
Con le proprietà outline-top
, outline-right
, outline-bottom
, outline-left
è possibile settare tutte le proprietà dei singoli bordi.
BOX MODEL
- Tutti gli elementi HTML possono essere considerati come scatole, riquadri che occupano un certo spazio sulla schermo. In CSS, il termine "box model" viene usato quando si parla di design e il layout.
- Il box model si compone di: margini, bordi, margini interni (padding), e contenuto effettivo.
content
- Il contenuto dell'elemento, dove compaiono testo e immagini
padding
– Margine internoattorno al contenuto.
border
– Il bordo
margin
– Distanza tra l'elemento e gli elementi che lo circondano
margin
CSS ha proprietà per specificare il margine per ogni lato di un elemento:
margin-top
margin-right
margin-bottom
margin-left
Tutte le proprietà dei margini possono avere i seguenti valori: auto, misura (px, em, ecc.), precentuale Sono consentiti valori negativi.
/* Esempi */
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
p {
margin: 100px 150px 100px 80px;
}
padding
CSS ha proprietà per specificare il margine interno (padding) per ogni lato di un elemento:
padding-top
padding-right
padding-bottom
padding-left
Tutte le proprietà possono avere i seguenti valori: auto, misura (px, em, ecc.), precentuale
/* Esempi */
p {
padding-top: 100px;
padding-bottom: 100px;
padding-right: 150px;
padding-left: 80px;
}
p {
padding: 100px 150px 100px 80px;
}
height
e width
- Le proprietà
height
e width
sono utilizzati per impostare l'altezza e la larghezza di un elemento.
height
e width
possono essere impostate su auto (impostazione predefinita), e sarà il browser a calcolare l'altezza e la larghezza), o essere specificato con una misura, come px, cm, em, ecc, o in percentuale (%) del blocco che contiene l'elemento.
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
max-height
e max-width
- Le proprietà
max-height
e max-width
sono utilizzati per impostare l'altezza e la larghezza massima di un elemento.
max-height
e max-width
possono essere una misura, come px, cm, em, ecc, una percentuale (%) del blocco che contiene l'elemento o none.
div {
max-height: 200px;
max-width: 50%;
background-color: powderblue;
}
min-height
e min-width
- Le proprietà
min-height
e min-width
sono utilizzati per impostare l'altezza e la larghezza minima di un elemento.
min-height
e min-width
possono essere una misura, come px, cm, em, ecc, una percentuale (%) del blocco che contiene l'elemento. Per eliminare il limite vanno impostate su 0 .
div {
min-height : 200px;
min-width : 50%;
background-color: powderblue;
}
box-sizing
- Le proprietà
box-sizing
viene utilizzato per indicare al browser quali componenti del box model devono essere inclusi nel calcolo di larghezza e altezza.
- Il valore di
box-sizing
deve essere:
content-box
(default): il calcolo comprende solo il contenuto.
border-box
: il calcolo comprende anche margine interno (padding) e border ma non margin .
* {
box-sizing : border-box;
}