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=”http://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=”http://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=”http://www.computereweb.eu/#”>Home</a></li>
<li><a href=”http://www.computereweb.eu/#”>Guida CSS</a></li>
<li><a href=”http://www.computereweb.eu/#”>Guida Html</a></li>
<li><a href=”http://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.
ciao io sul file non ho trovato zadig.exe perfavore ho bisogno di aiuto
Salve. Da pochi mesi ho una telecamera che usufruisce dell'applicazione iCSee. Di seguito ho acquistato una seconda telecamera identica alla…
Ho acquistato un TKMARS TK905 tramite Amazon. Ho fatto la procedura di configurazione e risponde ai SMS da App IOS…
Il mio Iban non è cambiato, quindi potete accreditare il TFR a me spettante usando lo stesso iban con il…
Io uso word gratis da outlook e quando vado in impostazioni interlinea non mi da la scelta "esatta" che dite…