Lezione 6

Sintesi della lezione

Proprietà display

Valore Descrizione
inline Valore predefinito. Visualizza un elemento come elemento inline (es.: <span>)
block Visualizza un elemento come un elemento block (e.: <p>)
flex Visualizza un elemento come un contenitore secondo il modello box-flex. Nuovo in CSS3
inline-block Visualizza un elemento come un contenitore di tipo inline block. Gli elemnti contenuti all'interno si comportano come in un blocco, ma l'elemento stesso si comporta come elemento inline
inline-flex Visualizza un elemento Ma che si posiziona come inlinecome un contenitore secondo il modello box-flex.
inline-table L'elemento viene visualizzato come una tabella inline
list-item L'elemento si comporta come un elemento<li>.
table L'elemento si comporta come un elemento<table>.
table-caption L'elemento si comporta come un elemento <caption>.
table-column-group L'elemento si comporta come un elemento<colgroup>.
table-header-group L'elemento si comporta come un elemento<thead>.
table-footer-group L'elemento si comporta come un elemento <tfoot>.
table-row-group L'elemento si comporta come un elemento <tbody>.
table-cell L'elemento si comporta come un elemento <td>.
table-column L'elemento si comporta come un elemento <col>.
table-row L'elemento si comporta come un elemento <tr>.
none L'elemento non viene visualizzato.

Posizionamento di un elemento

position

La proprietà position specifica il metodo di posizionamento utilizzato per un elemento.

position può assumere quattro diversi valori:

  • static
  • relative
  • fixed
  • absolute

La posizione degli elementi è determinata dalle proprietà top, right, bottom e left.

  • Modificare i valori di queste proprietà ha effetto solo se position è diversa da static.
  • L'effetto sulla posizione cambia a secondo dell'impostazione di position.

static

Gli elementi HTML sono posizionati così per impostazione predefinita.

  • Un elemento con position:static non è posizionato in modo speciale, ma secondo il normale flusso della pagina
  • La posizione non è influenzata dalle proprietà top, right, bottom e left.
div.normale  
{
    position: static;
    border: 3px solid #73AD21;
}

relative

  • La posizione di un elemento con  position:realtive è calcolata in maniera relativa rispetto alla sua posizione naturale secondo il normale flusso della pagina
  • Le proprietà top, right, bottom e left causeranno uno scostamento dell'elemento rispetto alla sua posizione naturale.
div.relativa  {
    position: realtive;
    left: 50px;
}

fixed

  • La posizione di un elemento con  position:fixed è calcolata in relazione alla finestra del browser il che significa che rimane sempre nello stesso posto, anche se la pagina viene fatto scorrere.
  • Le proprietà top, right, bottom e left determinano la posizione dell'elemento.
div.fissa  {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

absolute

  • La posizione di un elemento con  position:absolute è calcolata in relazione  all'elemento che lo contiene se questo non è position:static, altrimenti in relazione al documento.
  • Le proprietà top, right, bottom e left determinano la posizione dell'elemento.
  • L'elemento position:absolute quando la pagina sclolla, scrolla insieme all'emento relativamente al quale è posizionato.
div.realtiva {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
} 

div.assoluta {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}

z-index

  • Quando un elemento è posizionato (cioè non è  position:static) può sovrapporsi ad altri elementi-
  • La proprietà z-index determina l'ordine di questa sovrapposizione è può avere sia un valore positivo che uno negativo.
img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

Esercizi

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="container">
		  <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>
      </div>
    </header>
	<section id="titoli" class="container">
		<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" class="container">
		<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" class="container"> 
	  <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" class="container">
		<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" class="container">
		<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: 4em;
}
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;
	position: fixed;
	top:0;
	left:0;
	right: 0;
}

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

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

.navbar > ul > li {
	list-style: none;
	display: inline-block;
}
.navbar > ul > li a {
	color: #ffffff;
	padding:18px 20px;
	text-decoration: none;
	/*font-weight: 700;*/
	font-size: 22px;
}
.navbar > ul > li a:hover,
.navbar > ul > li a:focus {
	background-color: rgba(255,255,255,0.2);
	outline: none;
}
.container {
	width: 1180px;
	margin:0 auto;
}
.main-header .logo {
	font-weight: 700;
	line-height: 1;
	font-size: 46px;
	padding-top: 5px;
}

body > section {
	padding-top: 65px;
}

 

Torna all'inizio