SlideShare a Scribd company logo
1 of 2
<!DOCTYPE HTML>
<html lang="it"> <!--dichiariamo il linguaggio del documento-->
<html>
<head>
<title>Introduzione CSS</title> <!-- testo scheda -->
<style type="text/css">
body{
background-color:lightblue;
}
#pagina{
background-color:white; padding:5px;
width:900px; margin:0 auto;
border:1px;
}
#nav{
margin:0; padding:0;
list-style:none;
}
#nav li{
float:left; /* da vert a orizz */
margin-left:0px;
margin-right:10px;
color:blue;
}
#nav li a{
color:blue;
}
h1{
font-family: verdana;
font-size:20px;
padding:0px;
margin-left:40px;
}
.a li a{
list-style-type:none;
text-decoration:none;
color:black;
}
h2{
font-family: verdana;
font-size:20px;
}
h3{
font-family: verdana;
font-size:20px;
}
pre{
padding:0px;
margin-left:40px;
}
</style>
</head>
<body>
<div id="pagina">
<h1>Benvenuti alla mia pagina</h1>
<pre>Usa il menu per selezionare differenti stili di fogli</pre>
<ul class="a">
<li><a href="stilefoglio1.html">Stilefoglio 1</a></li>
<li><a href="stilefoglio2.html">Stilefoglio 2</a></li>
<li><a href="Stilefoglio3.html">Stilefoglio 3</a></li>
<li><a href="Stilefoglio4.html">Stilefoglio 4</a></li>
<li>No Stilefoglio</li>
</ul>
<h2>Stessa pagina differenti stili di fogli</h2>
<p>Questa e' la dimostrazione di come differenti stile di fogli possono cambiare
la visione della tua pagina HTML.<br>
Tu puoi cambiare la visione di questa pagina selezionando diversi stili di fogli
nel menu,
oppure selezionando questi seguenti links:<br>
</p>
<ul id="nav">
<li><a href="Stilefoglio1.html">Stilefoglio1</a></li>
<li><a href="Stilefoglio2.html">Stilefoglio2</a></li>
<li><a href="Stilefoglio3.html">Stilefoglio3</a></li>
<li><a href="Stilefoglio4.html">Stilefoglio4</a></li>
</ul>
<div style="clear:both;"></div> <!-- reset flusso -->
<h3>No stili</h3>
<p>Questa pagina usa elementi DIV per un gruppo differente di sezioni della
pagina HTML<br>
Selezionare qui per vedere come la pagina si mostra con nessuno stile<br>
</p>
<ul id="nav">
<li>NoStilefoglio</li>
</ul>
<div style="clear:both;"></div> <!-- reset flusso -->
<h4>Barra laterale</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore<br>
magna aliquam erat volutpat.
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore<br>
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut<br>
aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat,<br>
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
odio dignissim qui blandit praesent luptatum zzril<br>
delenit augue duis dolore te feugait nulla facilisi.
</p>
</div> <!-- fine pagina -->
<!-- <footer> Copyright Model Simple. Powered by SartoriMax 2016 </footer> <!--
informazioni sul documento-->
</body>
</html>

More Related Content

Similar to Nostilefoglio

Html e Css - 4 | WebMaster & WebDesigner
Html e Css - 4 | WebMaster & WebDesignerHtml e Css - 4 | WebMaster & WebDesigner
Html e Css - 4 | WebMaster & WebDesignerMatteo Magni
 
HTML + CSS - Lezione 3
HTML + CSS - Lezione 3HTML + CSS - Lezione 3
HTML + CSS - Lezione 3Vincenzo Caico
 
Html e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesignerHtml e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesignerMatteo Magni
 

Similar to Nostilefoglio (6)

Fogli di stile CSS
Fogli di stile CSSFogli di stile CSS
Fogli di stile CSS
 
Html e Css - 4 | WebMaster & WebDesigner
Html e Css - 4 | WebMaster & WebDesignerHtml e Css - 4 | WebMaster & WebDesigner
Html e Css - 4 | WebMaster & WebDesigner
 
HTML + CSS - Lezione 3
HTML + CSS - Lezione 3HTML + CSS - Lezione 3
HTML + CSS - Lezione 3
 
Corso HTML5. Una pagina base
Corso HTML5. Una pagina baseCorso HTML5. Una pagina base
Corso HTML5. Una pagina base
 
Php e mysql (primi passi)
Php e mysql (primi passi)Php e mysql (primi passi)
Php e mysql (primi passi)
 
Html e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesignerHtml e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesigner
 

Nostilefoglio

  • 1. <!DOCTYPE HTML> <html lang="it"> <!--dichiariamo il linguaggio del documento--> <html> <head> <title>Introduzione CSS</title> <!-- testo scheda --> <style type="text/css"> body{ background-color:lightblue; } #pagina{ background-color:white; padding:5px; width:900px; margin:0 auto; border:1px; } #nav{ margin:0; padding:0; list-style:none; } #nav li{ float:left; /* da vert a orizz */ margin-left:0px; margin-right:10px; color:blue; } #nav li a{ color:blue; } h1{ font-family: verdana; font-size:20px; padding:0px; margin-left:40px; } .a li a{ list-style-type:none; text-decoration:none; color:black; } h2{ font-family: verdana; font-size:20px; } h3{ font-family: verdana; font-size:20px; } pre{ padding:0px; margin-left:40px; } </style> </head> <body> <div id="pagina"> <h1>Benvenuti alla mia pagina</h1> <pre>Usa il menu per selezionare differenti stili di fogli</pre> <ul class="a"> <li><a href="stilefoglio1.html">Stilefoglio 1</a></li> <li><a href="stilefoglio2.html">Stilefoglio 2</a></li> <li><a href="Stilefoglio3.html">Stilefoglio 3</a></li> <li><a href="Stilefoglio4.html">Stilefoglio 4</a></li> <li>No Stilefoglio</li> </ul> <h2>Stessa pagina differenti stili di fogli</h2>
  • 2. <p>Questa e' la dimostrazione di come differenti stile di fogli possono cambiare la visione della tua pagina HTML.<br> Tu puoi cambiare la visione di questa pagina selezionando diversi stili di fogli nel menu, oppure selezionando questi seguenti links:<br> </p> <ul id="nav"> <li><a href="Stilefoglio1.html">Stilefoglio1</a></li> <li><a href="Stilefoglio2.html">Stilefoglio2</a></li> <li><a href="Stilefoglio3.html">Stilefoglio3</a></li> <li><a href="Stilefoglio4.html">Stilefoglio4</a></li> </ul> <div style="clear:both;"></div> <!-- reset flusso --> <h3>No stili</h3> <p>Questa pagina usa elementi DIV per un gruppo differente di sezioni della pagina HTML<br> Selezionare qui per vedere come la pagina si mostra con nessuno stile<br> </p> <ul id="nav"> <li>NoStilefoglio</li> </ul> <div style="clear:both;"></div> <!-- reset flusso --> <h4>Barra laterale</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore<br> magna aliquam erat volutpat. </p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore<br> magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut<br> aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,<br> vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril<br> delenit augue duis dolore te feugait nulla facilisi. </p> </div> <!-- fine pagina --> <!-- <footer> Copyright Model Simple. Powered by SartoriMax 2016 </footer> <!-- informazioni sul documento--> </body> </html>