G. Mecca – [email protected] – Università della Basilicata Tecnologie di Sviluppo per il Web...

G. Mecca – [email protected] – Università della Basilicata G. Mecca – [email protected] – Università della Basilicata

Tecnologie di Sviluppo per il Web

Cascading Style Sheets (CSS):

Dettagli e Approfondimenti

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

Dettagli e Approfondimenti

SintassiCommentiRaggruppamentiSelettoriErrori

Tipi di datoColoriLunghezze

Tipi di Dispositivo

Semantica!importantCascata

Il Modulo style Utilizzo degli

Standard Appendice

Elenco delle Proprietà di CSS Livello 1

CSS >> Sommario


Idea Generale

CSS (“Cascading Style Sheets”)tecnologia per associare caratteristiche di

presentazione ad un documento HTML/XML In particolare

consente di specificare le caratteristiche dei riquadri associati agli elementi del docum.

Sintatticamenteinsieme di regole: selettore, dichiarazionidichiarazione: proprietà e valore

CSS >> Dettagli e Approfondimenti >> Idea Generale


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


Idea Generale

Modello dei riquadriad ogni elemento è associato un riquadroelementi a livello di blocco ed elementi in

linea Struttura del riquadro

contenutoriempimentobordomargine



riempimento(padding)

Modello dei Riquadri (“Box Model”)


contenuto

bordo(border)

margine(margin)

top

bottom

left

righttop

bottom

left

righttop

bottom

left

right


Sintassi

Foglio di stileregolecommentiregole chiocciola

Commenti/* questo è un commento */

Regole chiocciola@import, @media (>>)

CSS >> Dettagli e Approfondimenti >> Sintassi


Sintassi

Regole<selettore> {<lista dichiarazioni>}

Dichiarazione<proprietà>: <valore>;es: div {color: white; font-size: 12pt;}

Raggruppamentisintassi compatta per più regolediv, p {color: white; font-size: 12pt;}



Sintassi

Selettori semplici<nome elemento> es: div<nome elemento>#<id> es: div#footer<nome elemento>.<classe> es: div.blocco* tutti gli elementi

Altri selettoripseudo-classi selettori contestuali



Sintassi

Pseudoclassiclassificano dinamicamente gli elementi in

base alle azioni dell’utente sull’interfaccialink, visited: collegamenti non visitati, visitatihover: collegamenti sorvolati dal mouseactive, focus

Sintassi<nome>:<pseudo classe>es: a:hover {color: red;}


>> sito Sviluppo Web


Sintassi

Selettori contestualiselezionano un elemento anche sulla base

della sua posizione nell’InfoSet E’ costituito di due parti

un selettore ordinario (nome, id, classe,...)un “contesto” che definisce la posizione

nell’InfoSet Contesto

lista di selettori semplici



Sintassi

Selettore constestuale<contesto> <selettore semplice>

Esempidiv p.indirizzo a:hover{color: red;}div.footer img {border: none;}

Attenzionedifferenza con i raggruppamenti in questo caso non c’è la virgola



Sintassi

Semantica del selettore contestualecorrisponde ai riquadri degli elementi con le seguenti

caratteristiche:l’elemento corrisponde al selettore finalenell’InfoSet c’è un antenato per ciascuno dei selettori

del contesto (riquadri che contengono il riquadro dell’elemento)

Esempiodiv p.indirizzo a:hover{color: red;}

nell’InfoSet: div, p.indirizzo, a



Sintassi

Esempi di Selettoriem {color: red;}em {color: red;}p em {color: red;}p em {color: red;}p, em {color: red};p, em {color: red};div.blocco em {color: red;}div.blocco em {color: red;}a#email {color: red;}a#email {color: red;}div.blocco a#email {color: red;}div.blocco a#email {color: red;}div.blocco a:hover {color: blue;}div.blocco a:hover {color: blue;}div.blocco a#email:hover {color: blue;}div.blocco a#email:hover {color: blue;}div span a#email:hover {color: blue;}div span a#email:hover {color: blue;}



Errori Sintattici

Comportamento del browser su errorifilosofia: ignorare le parti ignotedichiarazioni con proprietà o valori non legaliregole chiocciola sconosciuteregole con errori sintattici (es: ; mancante)

Attenzionequesto a volte causa disorientamento

Notanon esiste modo di distinguere un foglio di stile

CSS1 da uno CSS2



Tipi di Dato

Lunghezzeassoluterelative

Lunghezze principalirelative: em (dimensione pari alla dimensione del

font nel riquadro; eccezione: font-size)assolute: pt (punti)

Moltissime altre lunghezzemeno importanti

CSS >> Dettagli e Approfondimenti >> Tipi di Dato


Tipi di Dato

Lunghezze assoluteptin, cm, mmpc (1 pica = 12 pt)parole chiave: xx-small, x-small, small,

medium, large, x-large, xx-large; ogni browser ha una dimensione assegnata a ciascuna parola chiave

es: body { font-size: x-small; }



Tipi di Dato

Lunghezze relativeem, px, exex (lungh. pari alla dimensione della lettera

“x” nel font dell’elemento; eccez.: font-size) Percentuali

riferimenti variabili al variare della proprietà Parole chiave

larger, smaller es: strong { font-size: larger; }



Tipi di Dato

Coloricolori RGBcolori standard di HTML

Colori RGB#<rr><gg><bb> es: #FFA012<rr>: codifica esadecimale del livello di rosso<gg>: codifica esadec. del livello di verde<bb>: codifica esadecimale del livello di blu



Tipi di Dato

Colori standard di HTML



Tipi di Dato

URIsintassi particolare: url(“<uri reference>”)esempio: @import url(“stili/altro.css”)esempio: body {background-image: url(“icons/sfondo.gif”)

le virgolette sono opzionali (comportamento variabile dei browser)



Tipi di Dispositivo (“Media Types”)

CSS2 introduce il concetto di “media”è possibile specificare il dispositivo di riferimento per

un gruppo di regoleil browser applica o meno le regole sulla base del

tipo di dispositivo usato in quel momento Tipi di Media

screen, handheld, tty, tvprint, projectionbraille, embossed, auralall

CSS >> Dettagli a Approfondimenti >> Tipi di Media



Specifica del tipo di dispositivoattributo “media” dell’elemento link<link rel=“stylesheet” type=“text/css” href=“primo.css” media=“screen” />

<link rel=“stylesheet” type=“text/css” href=“secondo.css” media=“all” />

Regole “chiocciola” (“at-rules”)@import@media

CSS >> Dettagli e Approfondimenti >> Tipi di Media



@importinclude le regole di un foglio in un altroes: in “secondo.css” @import url(“primo.css”);deve essere la prima dichiarazione del foglioè possibile specificare il tipo di mediaes: @import url(“primo.css”) handheld;

@mediaspecifica il dispos. per cui vale un blocco di regolees: @media print { body {font-size: 10pt;}... }

CSS >> Dettagli e Approfondimenti >> Tipi di Media


Semantica

In generalevari fogli di stile per un documento (standard,

autore, utente)vari valori per una proprietà dell’elemento

Semanticadue meccanismi fondamentaliereditarietà dei valori delle proprietà dagli

antenati nell’infosetcascata (ordine di applicazione dei valori)

CSS >> Dettagli e Approfondimenti >> Semantica


Semantica

Qualificatore di priorità delle dichiarazioni!importantes: p { font-size: 1.5em !important }

Altera la priorità nella cascatadichiarazioni importanti prima delle normalidichiarazioni importanti dell’utente prima

delle dichiarazioni dell’autore (importanti e non – CSS2)



Semantica

Algoritmoscelta del valore per una proprietà di un riquadro

I passotrova tutti i valori possibili per la proprietàtutte le dichiarazioni per la proprietà in questione che

si applicano al riquadro per il dispositivo utilizzato II passo

ordina rispetto all’origine utente importanti, autore importanti, autore, utente,

standard



Semantica

III passoordina rispetto alla specificitàprima selettori più specifici, poi meno

specifici (id prima di classe prima di nome...)regola numerica complessa

IV passoordina per ordine di comparizione nello stileprevalgono le dichiarazioni che compaiono

per ultime



Il Modulo style di XHTML

Notain XHTML Basic il foglio di stile è esterno al

documento XHTML viene collegato con l’elemento link

In XHTML 1.0 Strictè possibile immergere parte delle regole

CSS direttamente nel documento XHTMLmodulo style e relativo attributo

CSS >> Dettagli e Approfondimenti >> Il Modulo style



Attenzionestiamo uscendo al di fuori di XHTML Basicper usare queste funzionalità è necessario

cambiare il DTD (XTHML 1.0 Strict) Inoltre

metodologicamente è sconsigliabile mischiare nello stesso documento codice HTML e codice CSS

ne parliamo solo per completezza




Modulo styleun unico elemento: styleserve a specificare una serie di regole CSSsi aggiunge al modello di contenuto di headnota: le regole sono interne al documento e

non riutilizzabili in altri documenti


elemento attributo modello di contenuto

style type, media, title …

#PCDATA


Esempio

<html xmlns=“http://www.w3.org/1999/xhtml”><html xmlns=“http://www.w3.org/1999/xhtml”> <head><head> <title>Pagina di Esempio</title><title>Pagina di Esempio</title>

<style type=“text/css” title=“stile interno”><style type=“text/css” title=“stile interno”> h1 {h1 { color: blue;color: blue; font-family: Arial;font-family: Arial; }} img {img { border-style: none;border-style: none; }}

</style></style></head></head>......



Il Modulo di Attributo di Stile

Una ulteriore possibilitàXHTML 1.0 contiene un ulteriore modulo

Attributo styleattributo che si aggiunge a tutti gli elementi del corpo

(body ed elementi di flusso)consente di specificare ulteriori regole CSS

specifiche per l’elemento Esempio

<h1 style=“color:blue; font-family:Arial”>Titolo</h1><h1 style=“color:blue; font-family:Arial”>Titolo</h1>


>> esempioRiquadri.html


Utilizzo degli Standard

Per trovare una proprietà di interesseper prima cosa verificare il documento

contenente lo standard di CSS livello 1si tratta di un elenco di proprietà, dei possibili

valori, e dei riquadri a cui si applicano Se non è prevista da CSS 1

consultare lo standard relativo a CSS 2molte più proprietà, ma meno supportato

CSS >> Dettagli e Approfondimenti >> Utilizzo degli Standard


Utilizzo degli Standard

Attenzioneè una tecnologia molto potentesi riescono ad ottenere ottimi effetti grafici

Esempiombreggiature ed effetti di “spessore”sostituzione completa delle tabelleattenzione all compatibilità con i vecchi browser

Siti con esempi di stili in lineaes: http://www.glish.com/css/

CSS >> Dettagli e Approfondimenti >> Utilizzo degli Standard

>> esempioCSS-finale.html>> esempioCSS-treColonne.html


Riassumendo

SintassiCommentiRaggruppamentiSelettoriErrori

Tipi di datoColoriLunghezze

Tipi di Dispositivo

Semantica!importantCascata

Il Modulo style Utilizzo degli

Standard Appendice

Elenco delle Proprietà di CSS Livello 1

CSS >> Sommario


Elenco delle Proprietà di CSS Livello 1 Font

'font-family''font-style''font-variant''font-weight''font-size''font'

Colori e Sfondo'color''background-color''background-image''background-repeat''background-

attachment''background-position‘'background'

CSS >> Dettagli e Approfondimenti >> Appendice


Elenco delle Proprietà di CSS Livello 1 Testo

'word-spacing''letter-spacing''text-decoration''vertical-align''text-transform''text-align''text-indent''line-height'

Varie'display''white-space''list-style-type''list-style-image''list-style-position''list-style'



Elenco delle Proprietà di CSS Livello 1 Riquadri

'width‘, 'height' 'float‘, 'clear' 'margin-top' 'margin-right' 'margin-bottom' 'margin-left' 'margin' 'padding-top' 'padding-right' 'padding-bottom' 'padding-left' 'padding'

'border-top-width' 'border-right-width' 'border-bottom-width' 'border-left-width' 'border-width' 'border-color' 'border-style' 'border-top' 'border-right' 'border-bottom' 'border-left' 'border'



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.

G. Mecca – [email protected] – Università della Basilicata Tecnologie di Sviluppo per il Web...

Documents

Transcript of G. Mecca – [email protected] – Università della Basilicata Tecnologie di Sviluppo per il Web...