Sintesi della lezione

CSS

I FOGLI DI STILE 

HTML serve ad informare il browser di quali sono le componenti necessarie a mostrare un documento e ad articolare il documento in blocchi semantici.

  • I fogli di stile (Cascading Style Sheets) definiscono come i vari elementi che compongono un documento verranno mostrati su un media specifico (schermo, stampante, dispositivo mobile).
  • CSS è il linguaggio che usa il web designer per realizzare un interfaccia.
  • La prima fase di un design è la progettazione.

Progettazione WEB e concetto di accessibilità

ACCESSIBILITÀ 

  • Consentire l’accesso a tutti gli utenti indipendentemente dal dispositivo che usano.
  • Consentire l’accesso a tutti gli utenti indipendentemente dalla loro abilità.
  • Tenere conto dei dispositivi che supportano gli utenti diversamente abili.
  • Con legge 9 gennaio 2004 n.4 e i successivi decreti attuativi è obbligatorio per i siti Web della Pubblica Amministrazione e della aziende private che lavorano con la Pubblica Amministrazione seguire precise regole di accessibilità. http://www.webaccessibile.org/

TECNICHE RESPONSIVE

  • Progettare interfacce diverse che consentano di mostrare con efficienza le stesse informazioni su dispositivi diversi.
  • Utilizzare specifiche tecniche CSS per mostrare lo stesso contenuto HTML in maniera diversa sui diversi dispositivi sulla base di quanto progettato.

DEVICE PIXEL RATIO

  • Il device pixel ratio è il rapporto tra le dimensioni fisiche (in pixel) dello schermo di un dispositivo e le sue dimensioni logiche, le dimensioni usate, cioè, per visualizzare gli oggetti sullo schermo.
  • Se visualizzo la pagina di facebook su uno schermo desk top di 1920 per 1080 ottengo una visualizzazione perfetta:
  • Se uno smartphone 1920x1080 (ad esempio un Samsung Note III) avesse la stessa pixel ratio otterrei una pagina assolutamente illegibile:
  • Quindi uso delle dimensione logicheutilizzo le dimensioni logiche. In altri termini.
    • Su un desktop da 23 pollici uso 96 pixel per ogni pollice
    • Su un samsung Note III uso circa 400 pixel per ogni pollice.

ESEMPI DI PIXEL RATIO

Modello Dimensioni fisiche Dimensioni logiche Pixel ratio
APPLE IPAD 1536 x 2048 768 x 1024 2.0
APPLE IPHONE 6 750 x 1254 375 x 627 2.0
NOKIA LUMIA 520 448 x 746 320 x 533 1.4
SAMSUNG GALAXY NOTE III 1080 x 1920 360 x 640 3.0
LG G4 1440 x 2560 360 x 640 4.0

COME SI COLLEGA UN FOGLIO DI STILE A UNA PAGINA WEB

Un foglio di stile può essere esterno e interno:

  • È esterno un foglio di stile definito in un file separato dal documento.
  • Un foglio di stile si dice interno quando il suo codice è compreso in quello del documento.

FOGLI COLLEGATI

Uso dell'elemento <link>

  • La dichiarazione va sempre collocata all'interno della sezione <head> del documento:
	<html> 
		<head> 
			. . . . 
			<link rel="stylesheet" type="text/css" href="stile.css"> 
		</head> 
	<body>
    . . . .
  • L'elemento <link> presenta una serie di attributi di cui è importante spiegare significato e funzione:
    • rel descrive il tipo di relazione tra il documento e il file collegato. È sempre obbligatorio. Per i CSS due sono i valori possibili: stylesheet alternate stylesheet.
    • href serve a definire l'URL assoluto o relativo del foglio di stile. È obbligatorio.
    • type identifica il tipo di dati da collegare. Per i CSS l'unico valore possibile è text/css.
    • media con questo attributo si identifica il supporto (schermo, stampa, etc) cui applicare un particolare foglio di stile. Attributo opzionale.

FOGLI INCORPORATI

I fogli incorporati sono quelli inseriti direttamente nel documento HTML tramite l'elemento <style>. Anche in questo caso la dichiarazione va posta all'interno della sezione <head>:

	<html>    
		<head>        
			<title>Inserire i fogli di stile in un documento</title>     
			<style type="text/css">           
				body {                   
					background: #FFFFCC;           
				}      
			</style>     
		</head> 
		<body>
        ..........

STILI IN LINEA

  • L'ultimo modo per formattare un elemento con un foglio di stile consiste nell'uso dell'attributo 'style'.
  • Esso fa parte della collezione di attributi HTML definita Common: si tratta di quegli attributi applicabili a tutti gli elementi.
  • La dichiarazione avviene a livello dei singoli tag contenuti nella pagina e per questo si parla di fogli di stile in linea. La sintassi generica è la seguente: <elemento style="regole_di_stile">

COME SONO COSTRUITE LE REGOLE

Un foglio di stile è costituito da una serie di regole che stabiliscono come un gruppo di elementi html (identificati da un selettore) viene reso su un media.

selettore {
    proprietà1: valore; 
    proprietà2: valore;
}

}

  • selettore: definisce a quali elementi si applicano le regole che seguono
  • {...} Parentesi graffe: racchiudono l'elenco delle regole 
  • Regola: è composta dal nome di una proprietà e da un valore: color:#333333;
  • proprietà: indica l'elemento visuale che viene modificato
  • : [due punti]: è l'operatore che collega la proprietà al valore che le viene assegnato.
  • valore: determina quale sarà l'aspetto dell'elemento per quanto riguarda la caratteristica controllata dalla proprietà a cui è stato assegnato.

MPORTANZA DELLA SINTASSI

  • Un linguaggio è l’insieme di regole (sintassi, ortografia, punteggiatura) che fa si che il codice (istruzioni) che scrivo siano correttamente interpretate dal computer
  • In CSS l’elemento sintattico principale è la punteggiatura: h2{ color:#333333; font-weight: bold; font-size: 40px; }
  • Se sbaglio il nome di una proprietà o un valore, semplicemente la regola verrà ignorata
  • Se sbaglio o tralascio la punteggiatura potrebbe non essere interpretato l’intero codice. Se tralascio, ad esempio, la parentesi graffa chiusa, tutto il codice che segue non verrà interpretato.

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.

ELENCO COMPLETO DEI SELETTORI

Selettore Esemempio Descrizione CSS
.class .intro Seleziona tutti gli elementi con class="intro" 1
#id #firstname Seleziona tutti gli elementi con id="firstname" 1
* * Seleziona tutti gli elementi  2
element p Seleziona tutti gli elementi <p> 1
element,element div, p Seleziona tutti gli elementi <div> e tutti gli elementi <p>  1
element element div p Seleziona tutti gli elementi <p> che sono dentro elementi <div> 1
element>element div > p Seleziona tutti gli elementi <p> qundo il parent è un elemento <div> 2
element+element div + p Seleziona tutti gli elementi <p> che sono posto immediatamente dopo  un elemento <div> 2
element1~element2 p ~ ul Seleziona ogni elemento <ul> preceduto da un elemento <p> 3
[attribute] [target] Seleziona tutti gli elementi con un attributo target 2
[attribute=value] [target=_blank] Seleziona tutti gli elementi con target="_blank" 2
[attribute~=value] [title~=flower] Seleziona tutti gli elementi con un attributo title che contiene la parola "flower" 2
[attribute|=value] [lang|=en] Seleziona tutti gli elementi con un attributo lang che inizia con "en" 2
[attribute^=value] a[href^="https"] Seleziona ogni elemento <a> il cui attributo href inizia con "https" 3
[attribute$=value] a[href$=".pdf"] Seleziona ogni elemento <a> il cui attributo href finisce con  ".pdf" 3
[attribute*=value] a[href*="w3schools"] Seleziona ogni elemento <a> il cui attributo href contiene "w3schools" 3
:active a:active Selezione il link attivo 1
::after p::after Inserire qualcosa dopo il contenuto di ogni elemento <p> 2
::before p::before Inserire qualcosa prima del contenuto di ogni elemento <p> 2
:checked input:checked Seleziona ogni elemento <input> con attributo checked 3
:disabled input:disabled Seleziona ogni elemento <input> con attributo disabled  3
:empty p:empty Seleziona ogni elemento <p> che non ha figli (inclusi i nodi di testo) 3
:enabled input:enabled Seleziona ogni elemento <input> non disabilitato 3
:first-child p:first-child Seleziona ogni elemento <p> che è il primo figlio del suo parent 2
::first-letter p::first-letter Seleziona la prima lettera di ogni elemento <p> 1
::first-line p::first-line Seleziona la prima linea di ogni elemento <p> 1
:first-of-type p:first-of-type Seleziona ogni elemento <p> che è il primo elemento <p> del suo genitore 3
:focus input:focus Seleziona l'elemento <input> che ha il focus 2
:hover a:hover Definisce l'aspetto di tutti gli elementi a quando il cursore del mouse passa loro sopra. 1
:invalid input:invalid Seleziona ogni elemento <input> con un valore non valido 3
:lang(language) p:lang(it) Seleziona ogni elemento <p> con un attributo lang uguale a "it"  2
:last-child p:last-child Seleziona ogni elemento <p> che è l'ultimo figlio del suo parent 3
:last-of-type p:last-of-type Seleziona ogni elemento <p> che è l'ultimo elemento <p> del suo genitore 3
:link a:link Seleziona i link non visitati 1
:not(selector) :not(p) Seleziona ogni elemento che non è un <p> elemento 3
:nth-child(n) p:nth-child(2) Seleziona ogni elemento <p> che è il secondo figlio del suo genitore 3
:nth-last-child(n) p:nth-last-child(2) Seleziona ogni elemento <p> che è il secondo figlio del suo genitore, cominciando a contare dall'ultimo  3
:nth-last-of-type(n) p:nth-last-of-type(2) Seleziona ogni elemento <p> che è il secondo  elemento  <p> del suo genitore, cominciando a contare dall'ultimo  3
:nth-of-type(n) p:nth-of-type(2) Seleziona ogni elemento <p> che è il secondo  elemento  <p> del suo genitore 3
:only-of-type p:only-of-type Seleziona ogni elemento <p> che è l'unico  elemento  <p> del suo genitore 3
:only-child p:only-child Seleziona ogni elemento <p> che è l'unico  elemento del suo genitore 3
:optional input:optional Seleziona ogni elemento <input> che non ha l'attributo "required"  3
:out-of-range input:out-of-range Seleziona ogni elemento <input> con un valore fuori dal fage specificato 3
:read-only input:read-only Seleziona ogni elemento <input> con l'attributo "readonly"  3
:read-write input:read-write Seleziona ogni elemento <input> con l'attributo "readonly"  NON specificato 3
:required input:required Seleziona ogni elemento <input> che ha l'attributo "required"  3
:root :root Seleziona elemento radice del documento 3
::selection ::selection Parte della pagina selezionata dall'utente  
:valid input:valid Seleziona tutti gli elementi <input> con un valore valido 3
:visited a:visited Seleziona tutti i link visitati 1

Dettagli: http://www.w3schools.com/cssref/css_selectors.asp

PROPRIETÀ CSS

FONT E TESTO

font-family

  • La famiglia di font di un testo viene impostato con la proprietà font-family
  • La proprietà font-family può contenere diversi nomi dei font. Se il browser non supporta la prima font, cercherà la successiva, e così via.
  • Il tipo di carattere preferito sarà il promo della lista, e la famiglia generica, l'ultima e verrà utilizzata se nessun altra font è disponibile.
  • Nota : Se il nome di una famiglia di font è più di una parola, deve essere tra virgolette, come: "Times New Roman".
  • L'elenco delle font è separato da virgole:
body {
    font-family: "Times New Roman", Times, serif;
}

font-style

  • La proprietà font-style è principalmente utilizzato per specificare il testo corsivo.
  • Tre valori possibili:
    • normal - Il testo viene visualizzato normalmente
    • italic - Il testo viene mostrato in corsivo
    • oblique - Simile al corsivo
p.normal {
    font-style: normal;
}
p.italic {
    font-style: italic;
}
p.oblique {
    font-style: oblique;
}

font-size

La proprietà font-size è determina il corpo del font. Posso assegnare: •

  • una misura – 16px1.2em
  • una percentuale – 100%
  • una parola riservata – smalllarge

Le misure più utilizzate sono i pixel (suffisso px) e em (suffisso em). Nel primo caso viene indicata una misura assoluta (l'altezza che ha, in pixel, il carattere sullo schermo). L'unità di misura em è relativa alla dimensione di default che è stata assegnata al carattere.

p {
    font-size: 18px;
}
h1 {
    font-size: 2.4em; /* Equivalente a (2.4 * 18) 43px */
}

font-weight

La proprietà font-weight è determina il peso del font. Posso assegnare:

  • una misura  da 100 a  900
  • una parola riservata: boldnormallighterbolder
p {
    font-weight: normal;
}
strong {
    font-weight: 900;
}

font-variant

La proprietà font-variant è determina se il font è reso in maiuscoletto. Posso assegnare:

  • normal
  • small-caps
p {
    font-variant: normal;
}
h1 {
    font-variant : small-caps;
}

color

La proprietà color è determina il colore del testo. Posso assegnare:

  • Il nome di un colore come red
  • Un valore esadecimale (usando il prefisso #) come #ff0000
  • Le funzioni rgb e rgba come rgb(255,0,0)
body {
    color: #333333;
}
h1 {
    color : darkblue;
}

text-align

La proprietà text-align è determina l'allineamento del testo. Posso assegnare i valori leftrightcenter justified.

h1 {
    text-align: center;
}
h2 {
    text-align: left;
}

text-decoration

La proprietà text-decoration aggiunge o elimina la sottolineatura e altre decorazioni. Posso assegnare i valori noneunderlineoverline line-through.

.errore {
    text-decoration: line-through;
}
a {
    text-decoration: none;
}

text-transform

La proprietà text-transform determina se il testo viene reso in maiuscolo, minuscolo o normale. Posso assegnare i valori nonelowercaseuppercase capitalize.

.h1 {
    text-transform: upercase;
}
.lowercase {
    text-transform: lowercase;
}

text-indentation

La proprietà text-indentation determina l'ammontare del rientro della prima riga del testo. Posso assegnare una misura (px, em, % ecc).

p{
    text-indentation: 30px;
}

letter-spacing

La proprietà letter-spacing determina l'ammontare dello spazio tra i caratteri. Posso assegnare una misura (normalmente pixel) . 0 indica la distanza normale, una misura positiva aumenta, una negativa diminuisce.

h1{
    letter-spacing: 3px;
}

line-height

La proprietà line-height determina l'interlinea utilizzata per il testo Posso assegnare:

  • una misura assoluta (es. 20px)
  • una misura relativa al corpo del carattere (es: 1.4 )
h1{
    line-height: 1.1;
}

text-direction

La proprietà text-direction determina la direzione di scrittura Posso assegnare rtl (right to left) o ltr (left to right):

body{
    text-direction: rtl;
}

word-spacing

La proprietà word-spacing determina l'ammontare dello spazio tra le parole. Posso assegnare una misura (normalmente pixel) . 0 indica la distanza normale, una misura positiva aumenta, una negativa diminuisce.

h1{
    word-spacing: -2px;
}

text-shadow

La proprietà text-shadow aggiunge un ombreggiatura al testo. Posso assegnare tre misure e un colore:

h1{
    text-shadow: 2px 2px 5px red;
}

crea un ombra spostata a destra di 2px, in basso di 2px, sfumata per 5px di colore red.

LISTE

In HTML, ci sono due tipi principali di liste:

  • liste non ordinate (<ul>) (gli elementi della lista sono contrassegnati con bullets)
  • liste ordinate (<ol>) (gli elementi della lista sono contrassegnati da numeri o lettere)

Con i fogli di stile però posso modificarne completamente l'apparenza. In particolare:

  • Personalizzare il modo in cui vengono presentati gli elenchi ordinati
  • Personalizzare i bullets delle liste non ordinate
  • Sostituire gli indicatori con un immagine personalizzata

list-style-type

La proprietà list-style-type definisce l’aspetto del marcatore di lista .

ul.a {     
  list-style-type: circle;
}
ul.b {     
  list-style-type: square;
}
ol.c {     
  list-style-type: upper-roman;
}
ol.d {     
  list-style-type: lower-alpha;
}

La scelta dei valori possibili è lunghissima. La tabelle che segue illustra i principali:

Valore Descrizione
disc un cerchietto pieno colorato; il colore può essere modificato per tutti i tipi con la proprietà color
circle un cerchietto vuoto
square un quadratino
decimal sistema di conteggio decimale 1, 2, 3, …
decimal-leading-zero sistema di conteggio decimale ma con la prima cifra preceduta da 0 (01, 02, …)
lower-roman cifre romane in minuscolo (i, ii, iii, iv, …)
upper-roman cifre romane in maiuscolo (I, II, III, IV, …)
lower-alpha lettere ASCII minuscole (a, b, c, …)
upper-alpha lettere ASCII maiuscole (A, B, C, …)
lower-greek Lettere minuscole dell'alfabeto greco

Impostando la  proprietà list-style-type a none  vene eliminata l'impostazione di default.

ul.unstyled {     
  list-style-type: none;
  padding: none;
  margin: 0;
}

list-style-image

La proprietà list-style-image consente di utilizzare un'immagine personalizzata al posto del marcatore.

ul {     
  list-style-image: url(square.gif);
}

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.

display

La proprietà display determina come viene visualizzato un elemento nel flusso di elementi che compongono la pagina HTML.

nav ul li {     
  display: inline-block;
}

.hidden {     
  display: none;
}

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;
}

File creati/modificati durante la lezione

/tipografia.html

<!DOCTYPE html>
<html lang="it">

<head>
    <title>Primo esercizio</title>
    <meta charset="utf-8">
    <style>
        *{
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
            Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            font-size: 16px;
            margin:0;
        }
        h1,h2,h3,h4,h5,h6 {
            font-weight: 300;
            font-variant: small-caps;
            letter-spacing: 0.1em;
        }
        h1 {
            font-size: 4rem;
        }
        h2 {
            font-size: 3.2rem;
        }
        h3 {
            font-size: 2.5rem;
        }
        h4 {
            font-size: 1.8rem;
        }
        h5 {
            font-size: 1.2rem;
        }
        h6 {
            font-size: 0.9rem;
        }
        p {
            line-height: 22px;
        }
        a:hover {
            color:red;
        }
        a[target="_blank"]::after {
            content: "*";
        }
        button, input[type="submit"], input[type="reset"],
        input[type="button"] {
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        ol > li > ol {
            list-style: upper-roman;
        }

        ul > li > ul {
            list-style: lower-alpha;
        }

        .container {
            padding-left: 15px;
            padding-right: 15px;
            max-width: 1140px;
            margin-left: auto;
            margin-right: auto;
        }

        .container img {
            max-width: 100%;
        }

        .occhiello {
            font-size: 1.2em;
            font-style: italic;
        }

        .evidenziato {
            font-weight: 700;
            color:blueviolet;
        }

        .capolettera::first-letter {
            font-family: 'Times New Roman', Times, serif;
            font-size:2.5em;
            font-weight: 700;
        }
        .prima-riga::first-line {
            font-size: 1.3em;
            font-style: italic;
        }

        .text-center {
            text-align: center;
        }

        .in-evidenza {
            border: 3px grey solid;
            padding: 1.5rem 2rem 1.5rem 2rem;
            font-size: 1.2em;
            background-color: #ffffcc;
        } 

        .barra-nav {
            background-color: darkmagenta;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
        }

        .barra-nav ul {
            margin: 0;
            padding: 0;
        }

        .barra-nav ul li {
            list-style: none;
            display: inline-block;
        }

        .barra-nav ul li a {
            color: rgba(255,255,255,0.8);
            font-size: 1.3rem;
            display: block;
            padding: 1rem 2rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            text-decoration: none;
        }

        .barra-nav ul li a:hover {
            background-color: rgba(255,255,255,0.2);
            color: white;
        }

        .padding-navbar {
            padding-top:60px;
        }

    </style>
</head>

<body>
    <nav class="barra-nav">
        <ul>
            <li><a href="#tipografia">Titoli e paragrafo</a></li>
            <li><a href="#liste">Liste</a></li>
            <li><a href="#link">Collegamenti ipertestuali</a></li>
        </ul>        
    </nav>

    <!-- Titolo e paragrafo-->
    <div class="container padding-navbar" id="tipografia">
        <h1>Titolo 1</h1>
        <h2>Titolo 2</h2>
        <h3>Titolo 3</h3>
        <h4>Titolo 4</h4>
        <h5>Titolo 5</h5>
        <h6>Titolo 6</h6>
        <p class="occhiello text-center">Nisi sit velit est ex in est. </p>
        <p class="capolettera">Irure laborum enim excepteur aliqua esse.
            Esse laborum mollit enim laboris duis enim ipsum duis.
            Exercitation labore anim anim ut minim excepteur non
            fugiat sit quis dolore qui. Ex deserunt occaecat
            consectetur ad aliqua cillum minim. Labore fugiat
            cupidatat enim qui ex duis irure nostrud fugiat.
            Amet mollit deserunt aliqua et reprehenderit ipsum est
            aliqua mollit ea ullamco dolor. Aliqua sunt aute anim
            dolor id dolor eu incididunt amet. Consectetur nostrud
            nulla ut nostrud nisi pariatur</p>
    </div>
    <div class="container padding-navbar" id="liste">
        <!-- Liste -->
        <h1>Lista ordinata</h1>
        <ol>
            <li>Elemento 1</li>
            <li>Elemento 2</li>
            <li>Suttolista
                <ol>
                    <li>Sottoelemento 1</li>
                    <li>Sottoelemento 2</li>
                </ol>
            </li>
            <li>Elemento 4</li>
        </ol>

        <h1>Lista puntata</h1>
        <ul>
            <li>Elemento 1</li>
            <li>Elemento 2</li>
            <li>Suttolista
                <ul>
                    <li>Sottoelemento 1</li>
                    <li>Sottoelemento 2</li>
                </ul>
            </li>
            <li>Elemento 4</li>
        </ul>
    </div>
    <div class="container padding-navbar" id="link">
        <p class="prima-riga in-evidenza">Velit nostrud commodo dolor <strong>fugiat anim reprehenderit esse labore 
            incididunt id tempor</strong> fugiat anim reprehenderit esse labore 
            incididunt id tempor. Minim <span style="font-family: 'Courier New', Courier, monospace; font-weight: bold;">
                amet sunt incididunt laborum </span>cillum 
            adipisicing magna. Veniam aliquip ea non Lorem sit id amet elit 
            laboris mollit. Ex veniam <em>velit aute adipisicing aliquip occaecat 
            excepteur et et aliquip nulla</em> velit aute adipisicing aliquip occaecat 
            excepteur et et aliquip nulla. Ullamco ipsum elit est labore tempor 
            eu tempor in aliqua. Eu sint magna eiusmod deserunt minim sint laboris 
            veniam cupidatat. Reprehenderit anim commodo commodo voluptate.</p>
            <p>Reprehenderit <code>voluptate ullamco voluptate</code> magna fugiat est ad
                 nulla.</p>
            <p class="in-evidenza">Consequat cupidatat fugiat ut occaecat id est aliqua esse ullamco aute 
                deserunt ea. Consequat ipsum occaecat amet in culpa ullamco non aliqua.
                 Ut nulla esse sit eiusmod ipsum elit et in. Sint Lorem anim irure ad qui 
                 cillum ea esse consectetur amet non <a href="//www.google.com">Questo è un 
                    link a Google</a> do sit quis. Occaecat tempor 
                 reprehenderit duis amet pariatur esse ullamco consectetur ipsum sint 
                 nisi laborum. Aute minim incididunt <a href="//www.facebook.com" target="_blank">
                Facebook</a> labore ex magna sint pariatur ea 
                 officia.</p>
            <p>Clicca qui per aprire hello: <a href="prova/">Clicca</a></p>
    </div>
    <form class="container" id="proveform">
        <label>Immetti un testo: </label>
        <input type="text" maxlength="20" name="testo" value="pippo"><br>
        <label>Secondo testo: </label>
        <input type="text" name="test2" placeholder="inserisci un testo"><br>
        <label>Inserisci la password: </label>
        <input type="password" name="pwd" placeholder="insrisci la password"><br>
        <label>Inserisci la data</label>
        <input type="date" name="data" placeholder="data di oggi"><br>
        <label>Inserici un numero</label>
        <input type="number"><br>
        <label for="newsletter">Mandami la newsletter </label>
        <input type="checkbox" name="newsletter" id="newsletter" checked><br>
        <label for="maschio">Maschio </label><input name="sesso" value ="maschio" id="maschio" type="radio">&nbsp;
        <label for="femmina">Femmina </label><input name="sesso" value="femmina" id="femmina" type="radio"><br>
        <textarea name="massaggio" maxlength="200" cols="100" rows="3" placeholder="Inserisci un messaggio"></textarea><br>
        <label>Scegli un giorno della settimana</label>
        <select name="giorno" >
            <option value="0">Lunedì</option>
            <option value="1">Martedì</option>
            <option value="2">Mercoledì</option>
            <option value="3">Giovedì</option>
            <option value="4" selected >Venerdì</option>
            <option value="5">Sabato</option>
            <option value="6">Domenica</option>
        </select><br>
        <input type="button" value="Ok"> <input type="submit" value="Invia i dati"> <input type="reset" value="Reset">
        <button type="button"><em>Questo àè fatto con button</em></button>
    </form>
    <div class="container" id="proveimmgini">
        <img src="http://lorempixel.com/1920/1080/sports" alt="Un immagine di sport">
        <p>Guarda questa immagine: <img src="http://lorempixel.com/400/300/sports" alt="Immagine sportiva"></p>
    </div>
    <div class="container" id="provaiframe">
        <iframe src="http://www.sisteminterattivi.org" width="800" height="400" frameborder="0"></iframe>

        <iframe width="1200" height="600" src="https://www.youtube.com/embed/qCDDRyXMr_c" frameborder="0" 
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen></iframe>
    </div>
    <div class="container" id="audio_e_video">
        <video controls autoplay loop muted>
            <source src="media/mov_bbb.mp4" type="video/mp4">
        </video>
        <audio controls>
            <source src="media/Fortuna.mp3" type="audio/mp3">
        </audio>
    </div>
</body>

</html>