Post on 27-Jun-2015
I FOGLI DI STILE: I FOGLI DI STILE:
CSSCSSCascading Style Sheet Fogli di stile a cascata
4A AFM
Sapri
Fogli di stile (CSS)I CSS vengono introdotti nel 1996 e servono per gestire gli aspetti legati alla grafica di un documento web (tipicamente html). Ad esempio: il font, i colori, le spaziature, margini…
In pratica, i CSS permettono di descrivere la formattazione di un documento HTML separandola dai contenuti veri e propri
CSS: definisce lo stile degli elementi
HTML: definisce gli elementi contenuti nella
pagina web
PAGINA WEB
Come usare i cssPossono essere associati ad un documento html in 2 modi
css esterni un foglio di stile definito in un file separato dal documento. Si tratta di semplici documenti di testo editabili con il Blocco Note ai quali si assegna l'estensione .css.
css interni quando il suo codice è compreso in quello del documento HTML
I CSS Interni si dividono in 2 categorie:
Interno - inline
Interno - incorporato
Css interno –inlineI fogli in linea sono usati per formattare uno specifico elemento (tag) nel documento html. In questo caso l’attributo style viene inserito nel tag che si vuole formattare.
La sintassi generica è la seguente:<elemento style="regole_di_stile">
Se, ad esempio, si vuole formattare un titolo H1 in modo che abbia il testo di colore rosso e lo sfondo nero, scriveremo:<h1 style="color: red; background: black;">...</h1>
Css interni -incorporatiI fogli incorporati sono quelli inseriti direttamente nel documento HTML tramite l'elemento <style>. La dichiarazione va posta all'interno della sezione <head>.
<html><head><style type="text/css">body {background-color: yellow;}h1 { color: blue; text-align:center; }p { font-family: Arial; color: red; }</style></head><body><h1>Esempio di CSS</h1><p>Questo è il testo in un paragrafo!</p></body> </html>
ESEMPIO:
6
<HTML>
<HEAD>
<STYLE TYPE="text/css">
H1 {color:blue; font-style:italic;}
H2 {color:red; font-style:italic;}
H3 {color:yellow; font-style:italic;}
B {color:green; font-style:italic;}
</STYLE>
</HEAD>
<BODY>
<CENTER>
<H1> Prova CSS per H1 </H1>
<H2> Prova CSS per H2 </H2>
<H3> Prova CSS per H3 </H3>
<B> Prova CSS per B </B>
</CENTER>
</BODY>
</HTML>
8
<html><head><style type="text/css">body {background-image: url('fiore.jpg');background-size: cover;background-repeat: no-repeat;}h1 { color: yellow; text-align:center; }</style></head><body><h1>Esempio di immagine di sfondo con CSS interno</h1></body> </html>
I css incorporati possono essere utili per utilizzare una immagine di sfondo che ricopre tutta la pagina
9
<html><head><title> Esempio senza CSS</title></head><body background="fiore.jpg"><h1>Esempio di immagine di sfondo senza CSS</h1></body> </html>
Senza css l’immagine sarebbe stata ripetuta più volte all’interno della pagina
Css esternoIl CSS esterno è separato dalle pagine HTML, viene creato con blocco note e salvato con estensione .css e all’interno della pagina html viene richiamato utilizzando l'elemento <link>. Il tag <link> va sempre collocato all'interno della sezione <head> di una pagina HTML.Ad esempio:<html><head><title> Titolo di prova</title><link rel="stylesheet" type="text/css" href="stile.css"></head><body>...
rel: descrive il tipo di relazione tra il documento e il file collegato. href: indica il nome del file del foglio di stile. type: indica il tipo di dati da collegare, che nel caso dei CSS è “text/css”. Queste proprietà del tag <link> sono tutte obbligatorie.
Css esterno- esempioFile html (mio.html)<html> <head> <link rel="stylesheet" type="text/css" href=“stile.css" /> </head> <body> <h1>Questo titolo è al centro pagina</h1> <h2>Questo titolo è blu</h2> <p>Questo paragrafo ha un margine sinistro di 50 pixel</p> </body> </html>
File css (stile.css)body { background-color:yellow; }h1 { text-align: center; } h2 { color:blue; } p { margin-left:50px; }
12
Riepilogando, un foglio di stile è un normale file di testo che può essere scritto con blocco note e salvato con estensione .css Gli elementi di un foglio di stile hanno la seguente struttura:tag { proprietà1: valore1; proprietà2: valore2; ... }
tag: è il tag della pagina html (<p>, <body>, <H1>, <H2>…) che si desidera formattare .
proprietà: definisce cosa si vuole formattare (colore, dimensione, posizione, tipo di carattere…)
valore: indica il valore della formattazione (rosso, 25pt, center, arial…
SCRIVERE UN FOGLIO DI STILE
per lo sfondo
BODY {background-color: colore in inglese o valore RGB }
BODY {background-image: URL immagine}
CSS: proprietà (1)
NB: Vedi libro a pag. 321
per le liste
list-style-image: URL immagine
list-style-type: disc | circle | square | none
list-style-position: inside | outside
(inside indica il rientro della lista)
per il testo e i font (forma del carattere)
font-style: normal | italic | oblique
font-weight: normal | bold
font-size: valore (in px)
font-family: arial | serif | …
text-align: left | right | center | justify
text-indent: lunghezza | percentuale (rientro della prima riga di un blocco di testo)
per i bordi
border-color: colore in inglese o valore RGB
border-width: thin | medium | thick | num (num=numero che indica l’ampiezza)
border-style: none | dotted | dashed | solid | groove | ridge
Groove=incassatoRidge=in rilievo
CSS: proprietà (2)
Esempio
15px
Personalizzare i linkCon i CSS si possono personalizzare anche i link, la personalizzazione può riguardare i link attivi, quelli visitati, il passaggio del puntatore del mouse sull'area cliccabile
ESEMPI: cambia il colore quando il mouse passa sul link: A:hover {color:red} viene sottolineato quando il mouse passa sul link: A:link {text-decoration:none} A:visited {text-decoration:none} A:hover {text-decoration:underline} cambia la dimensione del testo quando è attivato: A:link {font-size:lOpx} A:visited {font-size:lOpx} A:hover {font-size:llpx}
Esempio
18
<html><head> <link rel="stylesheet" type="text/css" href="stile.css" /> </head> <body> <h1>Esempio di link con CSS</h1> <p> <a href="www.ansa.it"> Notizie Ansa </a> </p></body> </html>
body { background-color:yellow; }H1 {text-align:center} P {text-align:center} A:link {font-weight:bold; text-decoration:none} A:visited {font-weight:bold; text-decoration:none} A:hover {font-weight:bold; text-decoration:underline; color:red}
Questo è il file link.html
Questo è il file stile.css
Selettore: idUn elemento html puo’ specificare dei propri selettori chiamati :
• id• class
Il selettore id:• Specifica lo stile di un singolo/unico elemento• E’ definito con il #
<html> <head><style type="text/css">#para1 { text-align:center; color:red; } </style>
</head><body><p id="para1">Hello World!</p><p>This paragraph is not affected by the style.</p></body> </html>
Selettore: class Un selettore class :• definisce lo stile di un insieme di elementi• imposta in una sola volta lo stile di tutti gli elementi di quella classe• si utilizza il simbolo “.”
<html><head><style type="text/css">.center { text-align:center;}</style></head>
<body><h1 class="center">Center-aligned heading</h1><p class="center">Center-aligned paragraph.</p> </body></html>
21
Esempio: selettore class
22
Esempio: selettore class
CSS: I BoxSuddividono la pagina web in aree e permettono di definire la posizione precisa degli elementi che si vogliono inserire nella pagina.
Ad esempio: in una pagina web si potrebbe definire un box per l’intestazione, uno per il contenuto, uno per il menù di navigazione e uno per il piè di pagina
CSS: I BoxI box si definiscono con il tag:<div class=“nome del box> contenuto del box </div>Vediamo l’esempio di 2 box, con bordi tratteggiati, che suddividono pagina in area sinistra e area destra
Esempio Questo è il file stilebox.css
.BoxSinistro { background-color: azure; border: thin dashed; width: 45%; padding: 1%; float: left; margin: 3px }
.BoxDestro { background-color: yellow; border: thin dashed; width: 45%; padding: 1%; float: right; margin: 3px; }
Questo è il file box.html
<html><head> <link rel="stylesheet" type="text/css" href="stilebox.css" /> </head> <body> <div class="BoxSinistro"> CONTENUTO BOX<br> sinistro </div> <div class="BoxDestro"> CONTENUTO BOX<br> destra </div> </body> </html>
26
Esempio: BOX
27
Esempio: BOX