Date post: | 01-May-2015 |
Category: |
Documents |
Upload: | elena-volpi |
View: | 218 times |
Download: | 0 times |
G. Mecca – [email protected] – Università della Basilicata G. Mecca – [email protected] – Università della Basilicata
Tecnologie di Sviluppo per il Web
Cascading Style Sheets (CSS):
Concetti Fondamentali
versione 2.0Questo lavoro è concesso in uso secondo i termini di una licenza Creative Commons
(vedi ultima pagina)
2G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Concetti Fondamentali
Idea Generale Sintassi Selettori Semantica
Ereditarietà e Cascata “Box Model” Lunghezze Compatibilità
CSS >> Sommario
3G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Idea Generale
Obiettivo di CSSspecificare caratteristiche di formattazione
per i riquadri corrispondenti agli elementi di una pagina XHTML
Caratteristiche di formattazionedimensioni, spaziatura, colorebordi, margini, allineamento, posizionetipo di carattere, dimensione, colore...
CSS >> Concetti Fondamentali >> Idea Generale
4G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Idea Generale
Struttura di un foglio di stileinsieme di regole per la presentazione dei
riquadri Cosa deve contenere una regola
un riferimento al riquadro o ai riquadri (“selettore”)
una serie di “dichiarazioni” di formato, ovverola “proprietà” da cambiareun “valore” per la proprietà
CSS >> Concetti Fondamentali >> Idea Generale
5G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Idea Generale
CSS >> Concetti Fondamentali >> Idea Generale
h2 {h2 { color: maroon;color: maroon; font-size: 14pt;font-size: 14pt;}}
img {img { border: none;border: none;}}
regola
selettore
dichiarazione
proprietà valore
6G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Classificazione delle Proprietà (CSS1) Font
proprietà dei fontes: font-family
Colorcaratteristiche dello
sfondoes: color
Textformato del testoes: text-align
Boxstabilisce margini e
spaziaturaes: margin-top
Classificationtipo di visualizzazioneformato delle listees: list-style-image
Totale: 50 proprietà122 in CSS2
CSS >> Concetti Fondamentali >> Idea Generale
7G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Idea Generale
Semanticale dichiarazioni vengono applicate ai riquadri
selezionatinel seguito: diremo indifferentemente
riquadri o elementi Ereditarietà
i valori delle proprietà dei riquadri esterni vengano ereditate dai riquadri interni
es: tipo di font
CSS >> Concetti Fondamentali >> Idea Generale
8G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Idea Generale
Nel seguito della lezionedettagli sulla sintassidettagli sulla semantica
In particolareselettoriereditarietà e cascatamodello dei riquadriunità di misuratipi di dispositivo
CSS >> Concetti Fondamentali >> Idea Generale
9G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Sintassi
Regola<selettore> { <lista di dichiarazioni> }
Dichiarazione<proprietà>: <valore>;
Esempioh2 { color: maroon;h2 { color: maroon; font-size: 14pt; } font-size: 14pt; }
img { border: none; }img { border: none; }
CSS >> Concetti Fondamentali >> Sintassi
>> primo.css
10G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Selettori
E’ il modo in cui viene indicato il riquadro Vari possibili modi
nome dell’elemento corrispondente:viene applicato ai riquadri di tutti gli elementi con quel nome; es: img { border: none; }img { border: none; }
riquadro singolo: attributo id di XHTMLsotto-classe di riquadri di elementi con un
certo nome: attributo class di XHTML
CSS >> Concetti Fondamentali >> Sintassi >> Selettori
11G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Selettori
Inoltreoltre ai riquadri degli elementi strutturali del
documento (h1, p, ul, table, a, img ecc.)il linguaggio XHTML consente di definire ulteriori
riquadri >> “elementi di raggruppamento” Elemento di raggruppamento
introduce un nuovo riquadro nel documento che raggruppa uno o più riquadri
per consentire di specificare una regola di stile per tutto il gruppo
CSS >> Concetti Fondamentali >> Sintassi >> Selettori
12G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Selettori
spanelemento in linearaggruppa uno o più elementi in linea testo,
img, a, ...) in un unico riquadro in linea div
elemento a livello di bloccoraggruppa uno o più elementi in linea o a
livello di blocco in un unico riquadro a livello di blocco
CSS >> Concetti Fondamentali >> Sintassi >> Selettori
13G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Selettori
Elementi singoliattributo “id” degli elementi HTMLselettore <nome>#<id>
Esempio: indirizzo in corsivo<p <p id=“indirizzo”id=“indirizzo”> … </p>> … </p>p#indirizzop#indirizzo { text-style: italic; { text-style: italic; font-size: 12pt; } font-size: 12pt; }
CSS >> Concetti Fondamentali >> Sintassi >> Selettori
14G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Selettori
Un ulteriore esempionome del dipartimento in rosso
Nel codice HTMLstringa D.I.F.A. - Università della
Basilicata Soluzione: elemento span
<span <span id=“dip”id=“dip”>D.I.F.A. - Università >D.I.F.A. - Università della Basilicata</span>della Basilicata</span>
span#dipspan#dip { color: maroon; } { color: maroon; }
CSS >> Concetti Fondamentali >> Sintassi >> Selettori
15G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Selettori
Classe di elementiattributo “class” degli elementi HTMLselettore <nome>.<classe>
Esempio: titolo e coda in bianco su rossotitolo: <div <div class=“barra”class=“barra”> </div>> </div>
piè di pagina: <div <div class=“barra”class=“barra”> </div>> </div>div.barradiv.barra { background-color: maroon; { background-color: maroon; color: white; color: white; text-align: center;} text-align: center;}
CSS >> Concetti Fondamentali >> Sintassi >> Selettori
>> secondo.css
16G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Semantica
Semantica delle regolele dichiarazioni vengono applicate ai riquadri
degli elementi che corrispondono al selettore Due meccanismi fondamentali
ereditarietà: un elemento può ereditare caratteristiche dai suoi antenati
cascata (“cascade”): la stessa proprietà di un elemento può essere definita più volte
CSS >> Concetti Fondamentali >> Semantica
17G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Ereditarietà
Ereditarietàalcune proprietà sono ereditate dai
predecessori (es: font)altre no (es: sfondo); vedi standard; in CSS2: proprietà “inherit”esempio: body {body { font-family: Arial;font-family: Arial; background-image:url(“icons/quadretti.jpg”); background-image:url(“icons/quadretti.jpg”);
}}
CSS >> Concetti Fondamentali >> Semantica >> Ereditarietà
18G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Cascata
Proprietà ridefinite: conflittivari fogli di stile (standard del browser, vari
fogli di stile dell’autore, foglio dell’utente)varie dichiarazioni nello stesso foglioes: foglio standard: p { font-size: 12pt; }p { font-size: 12pt; }es: foglio dell’autore: p { font-size: 9pt; }p { font-size: 9pt; }
Cascatale dichiarazioni hanno precedenze diversesi applicano “in cascata”
CSS >> Concetti Fondamentali >> Semantica >> Cascata
19G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Cascata
Algoritmo di risoluzione dei conflittitrova tutte i valori per la proprietà di un riquadrose più di una, pesa per origine (prima autore, poi
utente, poi standard)se più di una con lo stesso peso, pesa per specificità
(prima id, poi classe, poi nome)se più di una con la stessa specificità, pesa per
ordine di apparizione (prima le ultime)se nessuna, ereditarietà
CSS >> Concetti Fondamentali >> Semantica >> Cascata
20G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Esempio
Dichiarazioni per <p id=“indirizzo”>
CSS >> Concetti Fondamentali >> Semantica
bodyhead
title
#PCDATA
htmlxmlns=http://www.w3.org/
1999/xhtml
p
id=indirizzo
…
link link
rel=stylesheet
href=primo.css
rel=stylesheet
href=secondo.css
…
21G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Esempio
Dichiarazioni per <p id=“indirizzo”>dichiarazioni dello stile standard
es: color: black;dichiarazioni ereditate da <body>
es: font-family: Arial; dichiarazioni con selettore p; es: font-size: 9pt;dichiarazioni con selettore p#indirizzo
font-style: italic; font-size: 12pt; Conflitto sulla dimensione del font
prevale la proprietà con selettore più specifico
CSS >> Concetti Fondamentali >> Semantica
ATTENZIONE:importanza dellacorrettezzasintattica
>> terzo.css
22G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Modello dei Riquadri (“Box Model”) Elementi XHTML
ad ogni elemento corrisponde un riquadro Elementi a livello di blocco
heading, block, list: producono un’interruzione di linea
Elementi in lineainline: non producono interruzioni di linea
CSS >> Concetti Fondamentali >> Modello dei Riquadri
23G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Modello dei Riquadri (“Box Model”) Flusso di visualizzazione
disposizione dei riquadri nella finestra del br.riquadro contenuto nel riquadro del padre
Riquadro: articolato in vari spazicontenuto (“content”)riempimento (“padding”)bordo (“border”)margine (“margin”)
CSS >> Concetti Fondamentali >> Modello dei Riquadri
24G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
riempimento(padding)
Modello dei Riquadri (“Box Model”)
CSS >> Concetti Fondamentali >> Modello dei Riquadri
contenuto
bordo(border)
margine(margin)
top
bottom
left
righttop
bottom
left
righttop
bottom
left
right
25G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Modello dei Riquadri (“Box Model”) Proprietà relative al riquadro
margin-top, margin-bottom, margin-left, margin-right (lunghezze)
padding-top, padding-bottom, padding-left, padding-right (lunghezze)
border-top-width, border-bottom-width, border-left-width, border-right-width (lungh.)
border-color, border-stylewidth, height (solo per el. a livello di blocco)
CSS >> Concetti Fondamentali >> Modello dei Riquadri
26G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Modello dei Riquadri: Esempi
body {padding-left: 30pt;padding-right: 30pt;padding-top: 10pt;padding-bottom: 10pt;}
a {color: white;background-color: blue;padding-left: 5pt;padding-right: 5pt; }
a.linkImg {background-color: transparent;}
h2 {margin-top: 5pt;margin-bottom: 2pt;}
p {margin-top: 0pt;margin-bottom: 0pt; }
div.barra {padding-top: 10pt;padding-bottom: 10pt;border-color: yellow;border-style: solid;border-width: thick; }
CSS >> Concetti Fondamentali >> Modello dei Riquadri
>> quarto.css
27G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Alterazione del Flusso
Proprietà “float” e “clear” Float
sposta a destra o a sinistra un riquadrofuori dal flusso ordinario (“fluttuante”)gli altri riquadri scorrono attornol’elemento viene considerato a livello di
blocco anche se è in lineautilizzo tipico: immagini
CSS >> Concetti Fondamentali >> Modello dei Riquadri >> Alt. del Flusso
28G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Alterazione del Flusso
Esempio<img class=“aDestra” … /><img class=“aDestra” … />img.aDestra { float: right;img.aDestra { float: right;
margin-bottom: 10pt; margin-top: 10pt;}margin-bottom: 10pt; margin-top: 10pt;}
Clearimpedisce lo scorrimentoclear: left; clear: right; clear: both;div.barra {clear: both; width: 400pt; }div.barra {clear: both; width: 400pt; }
Possono sostituire le tabelle
CSS >> Concetti Fondamentali >> Modello dei Riquadri >> Alt. del Flusso
>> quinto.css
29G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Lunghezze
Vari modi per esprimere lunghezzeassolute; unità: in, cm, mm, pt (1 pt=1/72 in)relative; unità: em, px (pixel)percentuali; es: 90%parole chiave; es: small, x-small
In generaleevitare di utilizzare unità assoluteportabilità tra i dispositivi e flessibilità
CSS >> Concetti Fondamentali >> Lunghezze
30G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Lunghezze Relative
Unità suggeritaem: lunghezze relative alla dimensione dei
font em
1em = dimensione in pt. pari alla dimensione del font per il riquadro in questione
eccezione: font-size; relativo alla dimensione del font per il riquadro del padre
CSS >> Concetti Fondamentali >> Lunghezze
31G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Lunghezze Relative: Esempi
body {font-family: Arial;background-image:url("icons/quadr.jpg");font-size: 1em; padding-left: 2em;padding-right: 2em;padding-top: 1em;padding-bottom: 1em;}
h2 {color: maroon;font-size: 1.5em;margin-top: 0.5em;margin-bottom: 0.5em; }
a { background-color: blue;color: white;padding-left: 0.5em;padding-right: 0.5em; }
div.barra {color: white;background-color: maroon;text-align: center;padding-top: 0.5em;padding-bottom: 0.5em;border-color: navy;border-style: solid;border-width: 0.2em;clear: both; }
p {font-size: 0.9em;margin-top: 0;margin-bottom: 0; }
p#indirizzo {font-style: italic;font-size: 1.1em;}
...
CSS >> Concetti Fondamentali >> Lunghezze
>> sesto.css
32G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Compatibilità
Internet Explorer 5primo con compatibilità del 99% con CSS1
Versioni recentiInternet Explorer 6 e successiveMozilla 1.0 e successiviNetscape 6.2 e successiviOpera 6 e successiviottima compatibilità con CSS1alcune proprietà di CSS2
CSS >> Concetti Fondamentali >> Compatibilità
33G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
CSS >> Concetti Fondamentali >> Compatibilità
Compatibilitàfonte: http://www.westciv.com/style_master/academy/browser_support
34G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Compatibilità
Problemabrowser incapaci di visualizzare il foglio di stile CSS
Problema generalesviluppo indipendente dal browser
I Casobrowser che non supportano per nulla la graficaes: Lynx o browser per disabilisoluzione semplice: accertarsi che il materiale sia
“accessibile” anche in assenza di grafica (>>)
CSS >> Concetti Fondamentali >> Compatibilità
35G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Compatibilità
II Casobrowser con supporto parzialeNetscape Navigator 4 e Internet Explorer 4cercano di interpretare lo stile ma generano errori di
visualizzazionegli errori possono pregiudicare la visibilità
es: font bianco su sfondo biancosi tratta di un problema molto più serioanche se ormai meno rilevante (le versioni 4 vanno
sparendo)
CSS >> Concetti Fondamentali >> Compatibilità
36G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Compatibilità
In generaleè necessario verificare la visualizzazione
della pagina con browser diversiche includono le ultime versioni di Mozilla,
Internet Explorer e Opera oltre che Netscape 4 e Lynx
Obiettivoaccertarsi che il contenuto sia fruibileNON che la grafica sia la stessa
CSS >> Concetti Fondamentali >> Compatibilità
37G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Compatibilità
Un trucco per escludere i vecchi browser“nascondere” lo stile al browsercreare uno stile vuoto con una singola
istruzione @import per lo stile principaleeventualmente seguito stile secondario per i
vecchi browser
CSS >> Concetti Fondamentali >> Compatibilità
>> dummy.css
38G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Riassumendo
Idea Generale Sintassi Selettori Semantica
Ereditarietà e Cascata “Box Model” Lunghezze Compatibilità
CSS >> Sommario
39G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Ringraziamenti
Nel passaggio dalla versione 1.0 alla versione 1.2 di questo documento ho utilizzato alcuni utili suggerimenti di Paolo Merialdo ([email protected]), che ha utilizzato il materiale didattico nel suo corso di “Sistemi Distribuiti” a Roma Tre
CSS >> Ringraziamenti
40G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
CSS >> Concetti Fondamentali >> Compatibilità
Compatibilità
fonte: http://webreview.com
41G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Termini della Licenza
Termini della Licenza
This work is licensed under the Creative Commons Attribution-ShareAlike License. To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/1.0/ or send a letter to Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA.
Questo lavoro viene concesso in uso secondo i termini della licenza “Attribution-ShareAlike” di Creative Commons. Per ottenere una copia della licenza, è possibile visitare http://creativecommons.org/licenses/by-sa/1.0/ oppure inviare una lettera all’indirizzo Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA.