• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Sistemi   lezione xv - cenni su css
 

Sistemi lezione xv - cenni su css

on

  • 1,001 views

 

Statistics

Views

Total Views
1,001
Views on SlideShare
624
Embed Views
377

Actions

Likes
0
Downloads
18
Comments
0

2 Embeds 377

http://s1stem1.wordpress.com 376
http://www.slideshare.net 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Sistemi   lezione xv - cenni su css Sistemi lezione xv - cenni su css Presentation Transcript

    • Sistemi Di Elaborazione Dell’informazione Dott. Antonio Calanducci Lezione XV: Cenni su CSS Corso di Laurea in Scienze della Comunicazione Anno accademico 2009/2010
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • wdwdwdwdwdw HTML: albero dei blocchi A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010 10
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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