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: repeatrepeat-xrepeat-y, no-repeat
  body {
      background-repeat: repeat-x;
  }

background-attachment

  • Valori: scroll, fixed.
  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 pxptcmem, ecc) o utilizzando uno dei tre valori predefiniti: thinmedium, 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-topborder-rightborder-bottomborder-left è possibile settare tutte le proprietà dei singoli bordi.

border-radius

  • Con la proprietà border-radius è possibile impostare dei bordi arrotondati;

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 pxptcmem, ecc) o utilizzando uno dei tre valori predefiniti: thinmedium, 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-topoutline-rightoutline-bottomoutline-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 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;
}

 

Torna all'inizio