Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Css - Appunti

3.683 Aufrufe

Veröffentlicht am

Cascading Style Sheets

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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>

×