Css - Appunti

3,667 views

Published on

Cascading Style Sheets

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,667
On SlideShare
0
From Embeds
0
Number of Embeds
3,208
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Css - Appunti

  1. 1. Cascading Style Sheets Fogli di stile a cascata I CSS:  servono per definire lo stile di presentazione di un documento HTML o di alcuni suoi elementi;  permettono di ottenere una separazione tra contenuto e layout (struttura).
  2. 2. Cascading Style Sheets Fogli di stile a cascata CSS 1 dal 1996 CSS2 dal 1998 CSS 2.1 dal 2011 – versione supportata da tutti i browser CSS 3 specifiche non ancora pubblicate. Prevedono: nuove proprietà – suddivisione in moduli – N.B.: non tutti i browser li supportano! Versioni:
  3. 3. Cascading Style Sheets Fogli di stile a cascata Un foglio di stile CSS è costituito da una sequenza di regole. Ogni regola è composta da: • un selettore: che definisce la parte di documento a cui si applica lo stile; • dichiarazioni racchiuse tra parentesi graffe (e ognuna terminata da ;) a loro volta identificate da: • una proprietà; • un valore. selettore { proprietà1:valore1; proprietà2:valore2; ...} p { font-family:Arial; font-size:12pt; }
  4. 4. Cascading Style Sheets Fogli di stile a cascata I fogli di stile CSS possono essere: • dentro al documento .html. In questo caso si dicono: INTERNI • in un altro file. In questo caso si dicono: ESTERNI N.B.: il risultato finale non cambia! In uno stesso documento possono essere inseriti stili con diverse modalità!!! File . html con contenuto del documento e stili File . html con contenuto del documento File . css con stili
  5. 5. Cascading Style Sheets Fogli di stile a cascata In generale, viene applicata la regola più vicina all’elemento nel codice del documento. L’ordine, se le dichiarazioni degli stili sono fatte nell’ordine più corretto e logico, è quindi il seguente: gli stili in linea prevalgono su quelli incorporati che a loro volta prevalgono su quelli collegati.
  6. 6. Cascading Style Sheets Fogli di stile a cascata Gli stili interni al documento possono essere posizionati: 1. direttamente nel tag di riferimento tramite l'attributo style (in linea o inline style); 2. all'interno di un tag <style> (incorporati o internal style sheet);
  7. 7. Cascading Style Sheets Fogli di stile a cascata 1. CSS posizionato direttamente nel tag di riferimento tramite l'attributo style (in linea o inline style): <html> <head> <title >Pagina di prova </title > </head> <body> <h1 style ="color: blue;">Questo titolo deve essere blu </h1> <p>Contenuto della pagina di prova </p> </body> </html>
  8. 8. Cascading Style Sheets Fogli di stile a cascata 2. CSS all'interno di un tag <style> (incorporati o internal style sheet) <html> <head> <title >Pagina di prova </title > <style type =" text / css "> h1 { color: blue; } </ style > </head> <body> <h1>Questo titolo deve essere blu </h1> <p>Contenuto della pagina di prova </p> </body> </html> <html> <head> <title >Pagina di prova </title > <style type =" text / css "> h1 { color: blue; } </ style > </head> <body> <h1>Questo titolo deve essere blu </h1> <p>Contenuto della pagina di prova </p> </body> </html>
  9. 9. Cascading Style Sheets Fogli di stile a cascata Gli stili esterni al documento possono essere richiamati: 1.dal tag <style> (esterni o external style sheet); 2.dal tag <link> (esterni o external style sheet).
  10. 10. Cascading Style Sheets Fogli di stile a cascata 3. CSS importato dal tag <style> (esterni o external style sheet) File .html File extfile.css <html> <head> <title >Pagina di prova </title > <style type =" text / css "> @import url ( extfile .css) </ style > </head> <body> <h1>Questo titolo deve essere blu </h1> <p>Contenuto della pagina di prova </p> </body> </html> h1 {color: blue; }
  11. 11. Cascading Style Sheets Fogli di stile a cascata 4. CSS indicato dal tag <link> (esterni o external style sheet) File .html File extfile.css <html> <head> <title >Pagina di prova </title > <link type =" text / css " rel =" stylesheet " href ="extfile.css"> </head> <body> <h1>Questo titolo deve essere blu </h1> <p>Contenuto della pagina di prova </p> </body> </html> h1 {color: blue; }
  12. 12. Cascading Style Sheets Fogli di stile a cascata VANTAGGI SVANTAGGI CSS IN LINEA • Agiscono su singole istanze all'interno della pagina, senza influenzare il resto della pagina. • Non separano stile da contenuto • Non dinamici come i CSS esterni CSS INCORPORATI • Trasportabilità (il file contiene sia contentuto che stili) • Dinamicità ridotta • Ridondanza CSS ESTERNI • Modificare lo stile di più file .html • Non appesantiscono i file .html • Caricamento delle pagine più veloce. Il css viene caricato la prima volta e poi solo richiamato. • Trasportabilità (ci vuole sempre anche il file .css)
  13. 13. Cascading Style Sheets Fogli di stile a cascata La sintassi della regola CSS è: selettore { proprietà1:valore1; proprietà2:valore2; ...} dove il selettore può essere costituito da: 1.un tag html h1 {color: green;} 1.un carattere jolly * (selettore universale) * {color: red;}
  14. 14. Cascading Style Sheets Fogli di stile a cascata Un selettore può avere diverse classi e questo permette ad uno stesso oggetto HTML di avere differenti stili, a seconda della classe a cui appartiene. Selettore.classe { proprietà1:valore1; proprietà2:valore2} <html> <head> <title >Pagina di prova </title > <style type =" text / css "> h1.title { color: blue; } h1.sutitle { color: red; } </ style > </head> <body> <h1 class="title">Questo titolo deve essere blu </h1> <h1 class=“subtitle">Questo titolo deve essere rosso</h1> </body> </html>
  15. 15. Cascading Style Sheets Fogli di stile a cascata E’ possibile creare un selettore di classe senza specificare a quale tag sarà applicato lo stile. Esempio <html> <head> <title >Pagina di prova </title > <style type =" text / css "> .testorosso { color: red; } </ style > </head> <body> <h1 class="testorosso">Questo titolo deve essere rosso </h1> <p class=“testorosso">Questo paragrafo deve avere il testo rosso</p> </body> </html>

×