Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sistemi lezione xv - cenni su css

1,035 views

Published on

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

Sistemi lezione xv - cenni su css

  1. 1. Sistemi Di Elaborazione Dell’informazione Dott. Antonio Calanducci Lezione XV: Cenni su CSS Corso di Laurea in Scienze della Comunicazione Anno accademico 2009/2010
  2. 2. wdwdwdwdwdw Fogli di stile (CSS) • Cascade Style Sheets (CSS) - servono per facilitare la creazione di pagine HTML con un aspetto uniforme - permettono di separare il contenuto del documento dalla sua presentazione - permettono di modificare il look & feel di un documento in modo efficiente - applicare lo stesso stile a più pagine - sorgente HTML più pulito - migliore compatibilità con più browser A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010 2
  3. 3. wdwdwdwdwdw CSS: blocchi • Ogni documento HTML può essere visto come un insieme di blocchi (contenitori) a cui assegnare stili diversi - i tag HTML definiscono i blocchi A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010 3
  4. 4. wdwdwdwdwdw CSS: <DIV> e <SPAN> • i tag <DIV> e <SPAN> permettono di delimitare blocchi - <DIV> definisce una divisione o sezione della pagina - <SPAN> definisce un elemento inline (sulla stessa linea) • vengono spesso usati con l’attributi ID e CLASS per associare un nome(ID) al blocco o una class A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010 4
  5. 5. wdwdwdwdwdw CSS: regole • Unfoglio di stile è un’insieme di regole stilistiche che definiscono il look & feel degli elementi • ogniregola è costituita da un elenco di proprietà, ciascuna formata da due parti: - proprietà:valore • le regole vengono associate ai tag HTML - tag { proprietà1:valore1; proprietà2:valore2; ... } A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010 5
  6. 6. wdwdwdwdwdw CSS: alcune proprietà per lo sfondo per il testo background-color font-style background-image font-weight font-size per i margini font-family margin-left text-align margin-right text-transform margin-top text-color margin-bottom text-decoration A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010 6
  7. 7. wdwdwdwdwdw CSS: esempi di regole body { color:black; background:yellow; } p { font-size:120%; font-style:italic; color:green; } h1 { margin-left:10%; margin-right:10%; } h2 { font-family: "Times New Roman", Arial; } A:link { color:red; text-decoration:none; } A:visited { color:blue; } A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010 7
  8. 8. wdwdwdwdwdw CSS: <STYLE> • Possiamo inserire le regole CSS in tre posizioni differenti 1. nell’header del documento (tra <HEAD></HEAD> 2. inline 3. in un file .CSS separato 1. usando il tag <STYLE> in questo modo (dentro <HEAD>): <STYLE TYPE=”text css”> <!-- regole CSS --> </STYLE> A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010 8
  9. 9. wdwdwdwdwdw 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 BGCOLOR="#ffffff"> <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> A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010 9
  10. 10. wdwdwdwdwdw HTML: albero dei blocchi A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010 10
  11. 11. wdwdwdwdwdw HTML: ereditarietà degli stili se si assegna uno stile a tutti i paragrafi anche gli elementi in essi contenuti erediteranno (a cascata) lo stesso stile (a meno di nuove definizioni più interne) A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010 11
  12. 12. wdwdwdwdwdw CSS: inline • <STYLE>può essere usato anche come attributo dei tag HTML dentro il <BODY> • Es: <H1 STYLE="color:red; text-transform:capitalize;"> Prova CSS per H1 </H1> • NB: qui non servono le parentesi graffe, ma si usano i doppi apici A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010 12
  13. 13. wdwdwdwdwdw CSS: file esterno • Ilmetodo migliore spesso è quello di scrivere le regole di stile in un file esterno - può essere così condiviso da file HTML diversi - file in formato testuale, con estensione .CSS - es: <stili.css> - per indicare al doc HTML di usare gli stili definiti in file.css si usa il tag LINK nella sezione HEAD: - <HEAD> - <LINK REL=”stylesheet” TYPE=”text/css” HREF=”stili.css”> - </HEAD> A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010 13
  14. 14. wdwdwdwdwdw Regole a cascata • Un file HTML può importare più stili esterni - se per lo stesso tag sono presenti più stili in file diversi, vengono applicate delle regole “a cascata” - è difficile prevedere a priori come il browser risolverà i conflitti tra stili diversi - in ogni caso, hanno la priorità le regole definite all’interno del documento A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010 14
  15. 15. wdwdwdwdwdw CSS: classi • permettedi definire un’insieme di proprietà stilistiche da poter assegnare a tag diversi <HEAD> <STYLE TYPE="text/css"> H1 { font-style:italic; } .hot { color:red; text-decoration:underline; } </STYLE> </HEAD> il Class selector (selettore), definito tra le • Utilizzando regole è possibile associare lo stile ad uno o più tag e blocchi A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010 15
  16. 16. wdwdwdwdwdw Classi: esempio <HEAD> <STYLE TYPE="text/css"> H1 { font-style:italic; } .hot { color:red; text- decoration:underline; } </STYLE> </HEAD> <BODY> <H1> Primo titolo </H1> <H1 CLASS="hot"> Titolo da evidenziare </H1> </BODY> </HTML> A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010 16
  17. 17. wdwdwdwdwdw CSS: identificatori • permettono di definire delle regole che si applicano ad un solo elemento in un documento • attributo ID per dare un nome ad un blocco <HTML> <HEAD> <STYLE TYPE="text/css"> P { color:blue; } #speciale { color:red; text- transform:uppercase; } </STYLE> </HEAD> <BODY> <I ID="speciale">prende caratteristiche definite nel selettore</I> </BODY> A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010 17
  18. 18. wdwdwdwdwdw Riferimenti • CSS - http://css.html.it/ - http://www.w3schools.com/css/css_reference.asp A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010 18

×