CSS

testata immagine Ingrandisci il Font ingrandisci font | Riduci il Font riduci font | stampa documentosalva documento in pdf

Il CSS o Cascading style sheet è un linguaggio di formattazione delle pagine web.

Poichè io non amo la teoria ma la pratica, direi di passare direttamente all'azione. Tanto la teoria la potete trovare ovunque in giro per il web.

Allora come si include un "Foglio di stile" dentro una pagina html?

O meglio il CSS può essere: incluso, incorporato o in linea

E' preferibile che il Foglio di stile sia esterno piuttosto che in linea.

Ecco come collegare un foglio di stile esterno, inserire il seguene codiche fra <head>ed </head>

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
[...]
</html>
</pre>

style.css, indica il nome del foglio di stile e in questa sezione và inserito il percorso in cui esso si trova. Se ad eempio lo inseriamo in una cartella denominata css, allora il persorso da inserire sarà: css/style.css

Esempio di CSS incorporati:

<html>
<head>
<style type="text/css">
body {background: white;}
p {color: black;}
[...]
</style>
</head>
<body>
[...]
</html>
Esempio di CSS importati dall'esterno: Importare un CSS Esterno:
Importare un CSS Esterno.
<html>
 <head>  
 <style>  
  @import url(stile.css);
  </style>
 </head>  
<body>
Esempio di CSS in linea:
<h1 style="color: red; background: black;">...</h1>
Al posto di h1 si può inserire l'elemento desiderato. es: h2, h3, p, etc.

Media query per Versione stampabile  e dispositivi con tutte le risoluzioni dello schermo di questo sito, prendi spunto da qui per personalizziare il tuo style:

 

/*CSS per versione stampabile*/

@media print {	/*Regola dedicata alla visualizzazione su carta per la stampa*/

    #header, .homepage #header, #sidebar, #featured, #copyright, #footer	{
         display: none;
    }
	
	#content	{
         width: 100%;
    }
	
	 .button_box {
         background: #fff;
	     color: #000000;
	     border: solid #333 1px;   
    }
	

    .box { /*box per contanienr e gallery*/
	     width: 30%;
         padding-bottom: 30%;
         background: #fff;
	      color: #000000;
    }	
	 
	.innerContent{ /*contenitore box container*/
         background: #fff;
	     color: #000000;
	     margin-left: 5px;
	     margin-right: 5px;
         border: solid #1C55A2 1px; /*bordo blu*/
	  
    }
	
	
	 .boxarticoli { /*box articoli*/
	     width: 30%;
         padding-bottom: 30%;    
    }	
     .innerarticoli {
	     margin-left: 5px;
         margin-right: 5px;
		 border: solid #333 1px; 
	}
	
	
	
	h1, h2, h3, h4, h5, h6  { /*titoli colore blu*/
	   color: #1C55A2;
    }
	
	p  {
	   color: #000000;
    }
	
	a:link, a:hover, a:visited
	{
		color: blue;
	}
	
}

				 
				 
/*Media query per Responsive Design adattabile ai vari devise e risoluzioni dello schermo*/

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
    .box { /*box per categorie*/
      width: 100%;
      padding-bottom: 100%;
   }

    .boxarticoli {
      width: 100%;
      padding-bottom: 100%;
   }
   
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
    .box {  /*box per categorie*/
      width: 50%;
      padding-bottom: 50%;
   }
   
     .boxarticoli {
      width: 50%;
      padding-bottom: 50%;
   }
 
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
   .box {   /*box per categorie*/
      width: 33.3%;
      padding-bottom: 33.3%;
   }
   
   .boxarticoli {
      width: 33.3%;
      padding-bottom: 33.3%;
   }
   
}


@media only screen and (max-width : 1290px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   .box {  /*box per categorie*/
      width: 25%;
      padding-bottom: 25%;
   }
   
   .boxarticoli {
      width: 25%;
      padding-bottom: 25%;
   }
   
}