Sintesi della lezione
Ripasso dei concetti principali di CSS e completamento dell'esecizio svolto insieme.
Esercizio
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 class="clearfix row">
<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>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore accusamus aliquam, aperiam id, ullam adipisci aliquid necessitatibus libero error earum recusandae ipsum tempora suscipit quaerat dolor harum sapiente inventore hic, voluptatem eius mollitia officiis. Eius aperiam eaque perspiciatis debitis, quidem repellat atque temporibus, dignissimos beatae modi, facilis cum possimus rerum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi nemo facilis aut officia saepe quisquam, debitis soluta totam fuga omnis quam ad, impedit mollitia quaerat ipsa dolores, commodi quia tempore!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet excepturi, sapiente, consequuntur enim autem nam dolores accusamus quasi necessitatibus exercitationem asperiores atque culpa ratione saepe consectetur recusandae qui magnam facilis quaerat reiciendis! Error accusamus in fuga nemo eligendi sed veniam ut consectetur libero cum dolore, dolorum harum nulla ea perspiciatis quidem dolores ipsam repellat inventore.</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;
}
.logo img {
max-height: 100%;
width: auto;
}
body > section {
padding-top: 65px;
}
body > section > header {
margin-bottom: 50px;
border-bottom: #cccccc 2px solid;
}
body > section > header h1 {
font-size: 4.7em;
margin-bottom: 0;
}
article figure {
margin: 0;
width: 50%;
float: left;
padding: 0 15px;
box-sizing: border-box;
}
article figure figcaption {
background-color: black;
color: white;
font-size: 0.80em;
padding: 3px 10px;
}
article p {
padding: 0 15px;
}
img {
max-width: 100%;
height: auto;
}
.row {
margin-left: -15px;
margin-right: -15px;
}