Sistemi lezione xv - cenni su css

993 views
917 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
993
On SlideShare
0
From Embeds
0
Number of Embeds
393
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×