Css 4 a

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:

<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>



<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; }

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)

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

Css 4 a

Education

Transcript of Css 4 a