CSS è l’acronimo di (Cascading Style Sheets – Fogli di stile a cascata) sono utilizzati per creare la grafica del sito.
Inserimento dei css
I fogli di stile possono integrarsi all’interno del documento html oppure – più frequentemente – richiamati da un file esterno (con estensione .css).
Interno:
<head>
<title>prova</title>
<style type=”text/css”>
… contenuto css …
</style>
</head>
<body> …
Esterno:
<link rel=”stylesheet” type=”text/css” href=”stile.css”>
Commenti:
/*commento*/
Regola fondamentale:
Nei fogli di stile, per richiamare un elemento in html, si fa così:
elemento {inserire gli stili adatti}
.nomeclasse {inserire gli stili adatti}
#nomeid {inserire gli stili adatti}
Inoltre, ricordarsi che nel caso delle classi e degli id è necessario individuare ed inserire la seguente sintassi in html:
<div class”nomeclasse”>contenuto</div>
<div id=”nomeid”>contenuto</div>
Selettori:
Affinchè possiamo personalizzare gli stili di un pagina html con i css, è necessario dichiararli sia nell’uno che nell’altro, utilizzando i selettori:
1- Individuare la parte della pagina html che si vuole arricchire graficalmente.
<p> … paragrafo …</p>
<h1> … titolo 1 … </h1> <!– è così via <h2>; <h3>; <h4>; <h5>; <h6> –>
<table> … contenuto tabella </table>
2- Richiamare nel foglio di stile:
h1 {color: red;}
p {font-size: 10px; font-family: arial}
table {width: 500px}
body {font-size: 20px; background: blue; }
Le classi:
Consentono rispetto al semplice selettore di personalizzare solo quel determinato elemento o quella serie di elementi che sfruttano la stessa classe, ovvero l’ereditarietà delle classi.
1 – Vanno dichiarati nella pagina html, con questa sintassi: (generalmente si usa div come selettore, ma a secondo delle esigenze si possono usare qualsiasi altro selettore, il metodo è sempre lo stesso selettore+class)
<div class=”nomedellaclasse”> … contenuto documento … </div>
2 – Richiamato e personalizzato nel foglio del css, così:
.nomedellaclasse
{
font-family: arial;
color: red;
}
L’ereditarietà delle classi:
1. in html dichiaro una classe per uno specifico elemento:
<div class=”prova”>contenuto</div>
2. in css, rilevo come fatto sopra la classe:
.prova{
font-size: 15px;}
3. alla classe, posso associare altri elementi, precendola, così.
p.prova{
font-size: 15px;}
Le classi per i selettori:
E’ possibile specificare anche un determinato elemento in html.
1-html
<p class=”nomeclasse”>…</p>
<h1 class=”titolo”>….</h1>
2-css
p.nomeclasse {text-align: right;}
h1.titolo {font-weight: bold;}
Id:
1 – Vanno dichiarati nella pagina html, con questa sintassi:
<div id=”nomedellaclasse”> … contenuto documento … </div>
2 – Richiamato e personalizzato nel foglio del css, così:
#nomedellaclasse
{
font-family: arial;
color: red;
}
Nota:
la differenza sostanzialmente è che l’id è unico rispetto ad una classe e che si richiama con il cancelletto # anziché il punto.
Il Testo:
Allineamento
p {text-align: left;} /* a sinistra*/
p {text-align: right;} /* a destra */
p {text-align: center;} /* al centro */
p {text-align: justify;} /* giustificato */
Decorazione
p{text-decoration: overline;} /* sopralineato */
p{text-decoration: underline;} /* sottolineato */
p{text-decoration: overline underline;} /* sopra e sottolineato*/
p{text-decoration: line-through;} /* barrato */
p{text-decoration: blink;} /* */
p{text-decoration: none;} /* nessuno */
Trasformazione
p{text-transform: capitalize;} /* la prima lettera di ogni parola Maiuscola*/
p{text-transform: uppercase;} /* tutto minuscolo */
p{text-transform: lowercase;} /* TUTTO MAIUSCOLO*/
Interlinea
div {line-height: 50%;} /* il valore può essere espresso anche in em , preceduto dal numero, es.: 5em */
Spaziatura tra le lettere
div {letter-spacing: 2px;} /* il valore può essere espresso anche in em , preceduto dal numero, es.: 5em */
Il Carattere:
p {font-family: verdana} /* tipo di carattere */
p {font-size: 18px;} */ dimensione del carattere, generalmente espressa in px */
p {font-style: italic;} */stile del carattere: corsivo */
p {font-style: normal;} */stile del carattere: normale */ PREDEFINITO
P {font-weight: bold;} */spessore del carattere: grassetto*/
h1 {font-weight: 700;} */Personalizzazione dello spessore */
h1 {font-weight: lighter;} */Nessuno spessore */ PREDEDINIFTO
p {color: red;} */colore del carattere */
Gli Elenchi:
li
{list-style-type: disc;} /* i possibili valori sono: none; disc (PREDEFINITO); circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha*/
li
{list-style-image: url(prova.jpg);}
Le classi degli elenchi:
1. individuare e dichiarare le classi di elenchi in html:
<li class=”nomeelenco”></li>
2. in css:
li.nomeelenco
{color: red;}
Lo Sfondo:
p {background-color: yellow} */colore di sfondo della pagina */
div {background-image: url(sfondo.jpeg);} */immagine di sfondo della pagina*/
div {background-image: url(sfondo.jpeg); background-repeat: repeat; } */RIPETE l’immagine di sfondo della pagina,*/PREDEFINITO
div {background-image: url(sfondo.jpeg); background-repeat: repeat-x;} */ripete ORIZZONTALMENTE l’immagine di sfondo della pagina,*/
div {background-image: url(sfondo.jpeg); background-repeat: repeat-y; } */ripete VERTICALMENTE l’immagine di sfondo della pagina,*/{background-image: url(sfondo.jpeg); background-repeat: no-repeat; } */NON RIPETE l’immagine di sfondo della pagina,*/
div {background-image: url(logo.gif); background-repeat: repeat-y; background-position: 50% 50%;} */dove devi inziare a ripetersi verticalmente*/
div {background-image: url(logo.gif); background-repeat: repeat-x; background-position: 50% 50%;}*/dove devi inziare a ripetersi orizzontalmente */
div {background-image: url(sfondo.jpeg); background-attachment: scroll; } */sfondo che si muove con lo scrolling pg */
div {background-image: url(sfondo.jpeg); background-attachment: fixed;} */sfondo fisso non si muove con lo scrolling */
I Link:
a:link {color: red} /*link normale */
a:visited {color: red} /*link visitato*/
a:hover {color: blue} /*link al passaggio del mouse*/
Gli attributi, generalmente si applicano ad hover:
a:hover {bgcolor: blue; text-decoration:italic; font-size:10px; font-family: arial}
/* bgcolor, stabilire il colore di sfondo, l’effetto evidenziatore; text-decoration, indica lo stile che può assumere il testo; font-size la dimensione del testo; font-family, il tipo di carattere; è possibile anche inserire un’immagine di sfondo con background-image: url (nome.jpg). */
Le classi per i link:
1 – Nella pagina html, individuare tutti i link che vogliamo assegnare una classe:
<a href=”https://www.computereweb.eu” class=”affilliati”>computereweb.eu</a>
2- Nel foglio di stile, richiamare la classe:
a.affiliati:link { background: red}
a.affiliati:visited { background: red}
a.affiliati:hover { background: blue}
Box model (Spaziatura e Margini)
1- in html dopo <body> inserire e chiudere il </div> prima di </body:
<div id=”nomebox”>….contenuto</div>
2- nel css, inserire la seguenti sintassi
#nomebox
{ width: 350px; */larghezza */
height: 150px; */ altezza */
padding: 0px 0px 5px 5px; */ spaziatura interna*/
margin: 5px 5px 10px 5px; */spaziatura esterna*/
border: 5px solid; */ bordo*/
}
Nota: il margin, padding e border possono essere dichiarati, anche in questo modo:
top=sopra; bottom=fondo; left=sinistra; right=destra.
padding-top
padding-bottom
padding-left
padding-right
margin-top
margin-bottom
margin-left
margin-right
border-top
border-bottom
border-left
border-right
Inoltre il border può essere:
none
dotted
dashed
double
groove
ridge
inset
outset
solid
Posizionamento degli elementi:
#posizioneelemento
{ position: absolute; */la position può essere absolute (assoluta) o relative (relative valore di default)
top: 150px; */distanza bordo superiore pg e elemento*/
left: 250px; } */distanza bordo a sinistra pg e elemento*/
#classenascosta
{ display: none; } */nasconde elemento*/
#classevisibile
{ display: block; } */visualizza l’elemento*/
Il cursore del mouse:
a { cursor: crosshair; } */il cursore del mouse nel sito è differente da quello usato dal pc; può essere: auto; default; crosshair hand pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help.
Anche in questo caso, possiamo personalizzare con una classe, in modo che solo alcuni link abbiamo quel cursore.
1.html: <a href=”pagina.html” class=”cursore”>clicca qui</a>
2. css: a.cursore { cursor: crosshair; }
La barra di scorrimento:
body
{ scrollbar-base-color: #000000; */*/
scrollbar-face-color: #000000;
scrollbar-shadow-color: #FFFFFF;
scrollbar-arrow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-dark-shadow-color: #FFFFFF;
scrollbar-3d-light-color: #FFFFFF;
scrollbar-track-color: #FFFFFF; }
Tabble less
Costruire un layout attraverso le tabelle del css, detto tabble less.
Potete personalizzare come meglio credete il nome delle classi, anche se generalmente per main o wrapper s’intende la struttura generica; header e footer sono rispettivamente la testata e le piè di pagina; il content è il contenuto; la sidebar è la colonna sinistra e/o destra – a volte anche doppia colonna sx o dx.
1. html, creazione pagina index.html
<head>
<title>prova</title>
<link rel=”stylesheet” type=”text/css” href=”stile.css”>
</head>
<html>
<body>
<div align=”center”>
<div class=”main”>
<div class=”header”><center><img src=”https://www.computereweb.eu/wp-content/uploads/2009/07/cew.jpg” width=”100″ height=”100″><h1><b>computereweb.eu</h1></b></center></div>
<div class=”colonna”>
<li><a href=”https://www.computereweb.eu/#”>Home</a></li>
<li><a href=”https://www.computereweb.eu/#”>Guida CSS</a></li>
<li><a href=”https://www.computereweb.eu/#”>Guida Html</a></li>
<li><a href=”https://www.computereweb.eu/#”>Guida Mysql</a></li>
</div>
<div class=”contenitore”>contenuto del sito
Benvenuti sul sito “computer e web” pagina test sui css.
</div>
<div class=”footer”>
<center>Inserire qui il copyright ed eventuali termini e condizioni del servizio
contenuto piè di pagina</center></div>
</div>
</div>
</html>
</body>
2.Creiamo un foglio di stile, chiamamolo ad esempio stile.css (lo abbiamo già dichiarato in html!)
body
/*stilizzazione della barra di scorrimento*/
{ scrollbar-base-color: black;
scrollbar-face-color: black;
scrollbar-shadow-color: white;
scrollbar-arrow-color: white;
scrollbar-highlight-color: white;
scrollbar-dark-shadow-color: white;
scrollbar-3d-light-color: white;
scrollbar-track-color: white; }
{
background: #FFFFFF;
color: #000000;
margin: 10px 0px 10px 0px;
}
div
{
font-size: 11px;
font-family: verdana;
}
a { cursor: move; } /*stilizzazione del cursore al passaggio sui link*/
a:link { background: white} /* impostiamo i link affinchè cambiano colore di sfondo al passaggio del mouse*/
a:visited { background: white}
a:hover { background: blue}
/*formattazione generale della pagina*/
.main
{
text-align: left; /*allineamento del testo a destra*/
width: 750px; /*larghezza della pagina*/
border: solid 1px black; /*bordo della pagina*/
}
/*la grafica della testata (comunemente chiamata header)*/
.header
{
border-bottom: solid 1px black;
}
/*la grafica del box che contiene il menù*/
.colonna
{
float: left;
width: 146px;/*larghezza molto importante in considerazione di quella del contenitore*/
border-right: solid 1px black;
margin-bottom: 2px; /*spaziatura interna parte bassa*/
}
/*i nostri elenchi contenenti link compaino senza alcun stile*/
li
{list-style-type: none;}
/*la grafica vera e propria del contenuto*/
.contenitore
{
margin-left: 2px;
padding-bottom: 5px;
float: left;
width: 600px;
}
/*la grafica delle piè di pagina (comunemente chiamata footer)*/
.footer
{
clear: left;
border-top: solid 1px black;
}
Guarda l’esempio!
Ti è piaciuta questa guida?
Allora, perchè non scaricarla, nel formato universale per eccellenza, il PDF!
Clicca con il tasto destro del mouse sul link qui sotto e poi su salva oggetto con nome.
