Una veloce corso sul linguaggio per la formattazione di pagine web con CSS
----------------------------
A quick course on language to format web pages with CSS
Questo documento rappresenta parte delle slide del corso erogato dalla Web Agency ElaMedia Group. Per maggiori informazioni: http://www.elamedia.it/corso-html-roma.html
COSA SONO E COME FUNZIONANO I CSS
Rielaborazione delle slide utilizzate nei miei vecchi seminari sui CSS.
Licenza Creative Commons < http://creativecommons.org/licenses/by-nc-nd/3.0/ >
Introduzione ai CSS by Gianluca Troiani is licensed under a Creative Commons Attribuzione - Non commerciale - Non opere derivate 3.0 Unported License.
Based on a work at www.constile.org.
Permissions beyond the scope of this license may be available at http://www.constile.org/res/introcss.html.
OOCSS con SASS Intro. Un breve tutorial della metodologia Object Oriented CSS con l'uso di SASS per migliorare lo sviluppo di siti web su grande scala.
Appunti sui CSS per corso di formazione frontale sul corretto utilizzo dei fogli di stile nelle pagine web.
*Materiale coperto da licenza CC BY-NC-SA 4.0
Una veloce corso sul linguaggio per la formattazione di pagine web con CSS
----------------------------
A quick course on language to format web pages with CSS
Questo documento rappresenta parte delle slide del corso erogato dalla Web Agency ElaMedia Group. Per maggiori informazioni: http://www.elamedia.it/corso-html-roma.html
COSA SONO E COME FUNZIONANO I CSS
Rielaborazione delle slide utilizzate nei miei vecchi seminari sui CSS.
Licenza Creative Commons < http://creativecommons.org/licenses/by-nc-nd/3.0/ >
Introduzione ai CSS by Gianluca Troiani is licensed under a Creative Commons Attribuzione - Non commerciale - Non opere derivate 3.0 Unported License.
Based on a work at www.constile.org.
Permissions beyond the scope of this license may be available at http://www.constile.org/res/introcss.html.
OOCSS con SASS Intro. Un breve tutorial della metodologia Object Oriented CSS con l'uso di SASS per migliorare lo sviluppo di siti web su grande scala.
Appunti sui CSS per corso di formazione frontale sul corretto utilizzo dei fogli di stile nelle pagine web.
*Materiale coperto da licenza CC BY-NC-SA 4.0
In this lesson we give an overview of the iOS and Android native platforms and how to setup a development environment for both iOS and Android development
Presentazione Corso LAP2: Sviluppo di app mobili native multipiattaformaUniversity of Catania
Presentazione del Corso "Laboratorio Avanzato di Programmazione II: Sviluppo di applicazioni mobili native multipiattaforma" - Anno Accademico 2015/2016 - Corso di Laurea in Informatica - Dipartimento di Matematica e Informatica - Università di Catania - Prof. Antonio S. Calanducci
Sistemi lezione x - introduzione al web 2.0 - flickr
Sistemi lezione xv - cenni su css
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. 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. 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. 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. 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. 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. 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. 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. 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
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. 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. 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. 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. 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. 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. 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. 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