Come creare fogli stile CSS e perché crearli marzo 14, 2009
Posted by datalogicommunication in CSS - Cascading Style Sheets.Tags: creare, CSS - CSS Cascading Style Sheets, ealizzazione siti internet, Fogli stile, realizzazione siti web
add a comment
Per creare un foglio CSS va bene qualsiasi editor (Frontpage, Dreamweaver, o anche il blocco note di Windows); l’importante è salvare il file nella stessa cartella in cui collocheremo i file HTML e assegnargli come estensione .CSS.
body {
font: 10px/12px verdana;
color: white;
background: url(sfondo1.jpg);
margin: 0 auto;
}
Ora che abbiamo creato il foglio stile CSS dobbiamo creare il relativo file HTM. Tenete presente che potete utilizzare il contenuto del file SOLO per imparare a creare i fogli stile. E’ vietato pubblicarlo. Potete linkare questa pagina o la pagina prova.htm ma non pubblicarle.
#contenitore {
width: 630px;
background: url(sfondo.jpg) repeat-y;
margin: 0 auto;
padding: 20;
text-align: justify;
}
#intestazione {
width: 630px;
height: 278px;
background: url(prova.jpg) repeat-x;
}
#intestazione h3 {
margin: 0px 0px 0px 10px;
font: 18px/24px arial,sans-serif;
color: yellow;
}
h3 {
font: 16px/24px arial,helvetica,sans-serif;
color: white;
margin-left: 0px;
}
#slogan {
position: absolute;
top: 0px;
margin-left: 635px;
padding: 8;
width: 170px;
height: 65px;
background: #3513E1;
}
#menu {
position: absolute;
top: 100px;
margin-left: 635px;
padding: 8;
width: 170px;
height: 350px;
background: #C30A0A;
}
a:hover,a:active {
background: #E1C290;
}
<html>
<head>
<title>come creare un foglio stile CSS</title>
<style type=”text/css” media=”screen”>@import “prova.css”;
</style>
</head>
<body>
<div id=”intestazione”>
<h3>REALIZZAZIONE SITI WEB</h3>
</div>
<div id=”contenitore”>
<h4>ESEMPIO DI CIO’ CHE OTTENIAMO CON UN FOGLIO CSS</h4>
<p>Ecco un esempio di cosa possiamo ottenere con un semplice foglio stile CSS abbinato a questo file HTM. Il foglio stile associato si chiama prova.css.
Potete aprirlo e verificare le istruzioni di formattazione contenute nello stesso.</p>
<p>Il foglio stile dell’esempio prevede 4 DIV (equivalenti a 4 celle di una
tabella tradizionale): il DIV contenitore, il DIV intestazione, il DIV menu e il
DIV slogan.</p>
<p>All’interno del DIV contenitore ho scritto il testo principale (quello che state leggendo). all’interno del DIV
intestazione ho inserito come sfondo una fotografia del mio studio (intestazione.jpg),
all’interno del DIV slogan ho inserito i miei numeri telefonici e l’invito a
contattarmi, all’interno del DIV menu ho inserito i link a tre pagine del sito.
Tutte le istruzioni contenute nel foglio stile sono commentate. I commenti li
trovate tra i simboli /* e */</p>
<p>Analizzando il foglio stile PROVA.CSS potrete vedere le caratteristiche di
ognuno di questi DIV (colore o immagine di sfondo, posizionamento nella pagina,
tipo di font e dimensioni.</p>
<p>Analizzando il codice di questa pagina (PROVA.HTM) potrete vedere come vanno richiamati i DIV presenti nel foglio stile (esempio: <DIV ID="menu">).</p>
<p>Grazie all’utilizzo del foglio stile CSS sterno contenente tutte le
informazioni relative alla formattazione della pagina HTML questa pagina risulta molto leggera (è di soli 2 KB).</p>
</body>
</html>
