Sintesi della lezione

Valori che si possono assegnare alle proprietà CSS

Valore Esempio
parola riservata display: none; margin-left: auto;
numero line-height: 1.3; font-weight: 300;
misura margin-top: 20px; line-height: 24px;
percentuale width: 80%; margin-top: 2%;
url background-image: url(img/sfondo.jpg);
colore nome-colore,  #RRGGBB, #RRGGBBAA, rgb(rrr,ggg,bbb), rgba(rrr,ggg,bbb,aaa), hsl(hhh,sss,lll), hsla(hhh,sss,lll,aaa)
più valori background: url(img/sfondo.jpg) no-repeat center;  margin: o auto;
attr() Funzione che restituisce il valore dell'attributo inserita tra parentesi
calc() Consente di inserire una misura come risultato di un calcolo

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

  • 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 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

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

float

  • Un elemento di tipo blocco (display:block) interrompe il flusso naturale della pagina anche se non ne occupa tutta la larghezza. Le proprietà float consente agli elementi che seguono l'elemento blocco di affiancarsi all'elemento stesso, a destra o a sinistra se lo spazio rimanente nella pagina lo consente.
  • Il valore di float può essere:
    • left: L'elemento si colloca a sinistra nella pagina e gli elementi che seguono lo affiancano a destra.
    • right: L'elemento si colloca a destra nella pagina e gli elementi che seguono lo affiancano a sinistra.
    • none: (valore di default) l'elemento non consente il float.
img {
    float : right;
    margin: 0 0 15px 15px;
}

clear

  • Le proprietà clear consente di interrompere il flusso float
  • Il valore di clear può essere:
    • left: Interrompe il float a sinistra.
    • right: Interrompe il float a destra.
    • both: Interrompe il float sia sinistra che a destra .
div.clear {
    float : none;
    clear: both;
}

CLEARFIX

  • Spesso è un problema interrompere correttamente il flusso float se gli elementi non sono della stessa altezza. In rete si trova questo trucco. Assegnando la classe clearfix ad un elemento che contiene elementi float il flusso si chiude correttamente..
  .clearfix {     
  overflow: auto;
  }
  .clearfix::after {     
  content: "";     
  clear: both;     
  display: table;
  }

Esecizi svolti in classe

HTML

<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Raleway:400,700" rel="stylesheet">
<link href="../css/Stili.css" rel="stylesheet">
<title>Tipografia</title>
</head>

<body>
	<header class="main-header clearfix">
		<div class="logo">
			Logo
		</div>
		<nav class="navbar">
			<ul>
				<li><a href="#titoli">Titoli</a></li>
				<li><a href="#liste">Liste</a></li>
				<li><a href="#modulo">Elementi form</a></li>
				<li><a href="#articolo">Articolo</a></li>
				<li><a href="#video">Video</a></li>
			</ul>
		</nav>
	</header>
	<section id="titoli">
		<h1>Titolo 1</h1>
		<h2>Titolo 2</h2>
		<h3>Titolo 3</h3>
		<h4>Titolo 4</h4>
		<h5>Titolo 5</h5>
		<h6>Titolo 6</h6>
	</section>
	<section id="liste">
		<header>
			<h1>Liste</h1>
		</header>
		<ul>
			<li>Voce lista</li>
			<li>Voce lista</li>
			<li>Sottilista
				<ul>
					<li>Elemento sottolista</li>
					<li>Elemento sottolista</li>
				</ul>
			</li>
			<li>Voce lista</li>
		</ul>
		<ol>
			<li>Voce lista</li>
			<li>Voce lista</li>
			<li>Sottolista
				<ol>
					<li>Voce sottolista</li>
					<li>Voce sottolista</li>
				</ol>
			</li>			
		</ol>
	</section>
	<section id="modulo">
		<header>
			<h1>Elementi del form</h1>
		</header>
		<form>
			<label>Inserimento testo</label>
			<input type="text" maxlength="50" placeholder="Inserisci il nome" name="nome" id="nome"/><br />
			<input type="checkbox" name="newsletter" value="si" />
			<label>Invia newsletter</label><br />
			<label>Maschio</label>
			<input type="radio" name="sesso" value="M" checked="checked" /> <label>Femmina</label>
			<input type="radio" name="sesso" value="F" /><br />
			<label>Messaggio</label><br />
			<textarea rows="10" maxlength="500" placeholder="Inserisci un messaggio"></textarea><br />
			<button type="button" id="bottoneDiProva">Cliccami!</button>
		</form>
	</section>
	<section id="articolo">
		<header>
			<h1>Articolo</h1>
		</header>
		<article>
			<header>
				<h1>Questo è un articolo</h1>
				<h3>di Mario Rossi</h3>
			</header>
			<div>
				<figure>
					<img src="https://unsplash.it/640/480/?random" alt="Immagine casuale da unplash.it" title="Questa è un immagine" />
					<figcaption>Immagine casuale</figcaption>
				</figure>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure magnam ex vel aliquam aperiam numquam fugit, asperiores quas quo, molestias modi nemo possimus laudantium repellat enim, quasi rerum non consequuntur.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita quo alias enim? Voluptatum unde dolore natus aliquam facere, provident minima numquam neque error placeat inventore perspiciatis laborum tenetur non excepturi distinctio, sint a suscipit voluptate et molestiae? Asperiores nesciunt nobis sequi, sint maiores similique rerum, neque laboriosam, voluptatum, delectus earum?</p>
			</div>
		</article>
	</section>
	<section id="video">
		<header>
			<h1>Video</h1>
		</header>
		<div>
			<iframe width="854" height="480" src="https://www.youtube.com/embed/aCI_uYdgNrM" frameborder="0" allowfullscreen></iframe>
		</div>
	</section>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
body {
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	font-size: 18px;
	color: #333333;
	margin: 0;
	padding: 0;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 400;
}
h1 {
	font-size: 3.5em;
}
h2 {
	font-size: 3em;
}
h3 {
	font-size: 2.2em;
}
h4 {
	font-size: 1.5em;
}
h5 {
	font-size: 1em;
}
h6 {
	font-size: 0.85em;
}

.main-header{
	background-color: midnightblue;
	color: #f6f6f6;
}

.main-header .logo {
	float: left;
}
.main-header .navbar {
	float:right;
}

.clearfix {
	overflow: auto;
}
.clearfix::after {
	content:"";
	clear: both;
	display: table;
}

 

Torna all'inizio