CSS - Federico Parrella

Federico Parrella
10 dicembre 2010
Fogli di stile
Introduzione ai CSS per il web
© Dicembre 2010 Federico Parrella
Questo è un documento didattico ad uso interno.
Non può essere ridistribuito in tutto o in parte, né può essere riprodotto in nessuna forma senza il preventivo assenso di Federico Parrella
che ne detiene la proprietà intellettuale. Non può essere utilizzato per fini commerciali, né trasformato o alterato per creare un altro documento.
CSS
introduzione
[email protected]
Cascading Style Sheet
Introdotti a partire dal 1996 dal W3C,e
i fogli di stile sono utilizzati per aggiungere
stile (tipografia, colore, spaziature, etc.)
alle pagine web.
1 Il W3C è il consorzio nato nell’ottobre
del 1994 con lo scopo di definire protocolli
comuni per il World Wide web.
Comprende oltre 500 membri internazionali
che contribuiscono a definire gli standard,
le specifiche, le linee guida, le applicazioni
ed i programmi di supporto per ottimizzare
al pieno le potenzialità del web.
2
CSS
introduzione
[email protected]
I css consentono di dividere i contenuti delle
pagine web descritti nel codice (x)htmle,
dalla loro veste grafica attraverso delle regole
di stile.
1 Acronimo di HyperText Markup Language,
è un linguaggio usato per descrivere la
struttura dei documenti ipertestuali disponibili
su Internet. Tutti i siti web sono scritti in
HTML, codice che viene letto ed elaborato dal
browser, il quale genera la pagina che viene
visualizzata sullo schermo del computer.
L’HTML non è un linguaggio di programmazione,
ma un linguaggio di markup, ossia
descrive il contenuto, testuale e non,
di una pagina web. (Wikipedia).
3
CSS
xhtml
xHTML
Presupposti per lavorare con i CSS
[email protected]
4
CSS
xhtml
[email protected]
Semantic Markup
Il corretto utilizzo dei fogli di stile prevede
una conoscenza adeguata della struttura
di un documento xHTML.
Contrariamente a quanto sviluppato
per il web negli anni precedenti,e il codice
xHTML non deve contenere elementi
descrittivi per la presentazione grafica.
1 Ancora oggi si utilizzano
HTML 4 e precedenti in molti siti
web, per scarsa conoscenza degli
standard e pigrizia progettuale.
L’HTML “base” si utilizza nella composizione
di rich email (principalmente newsletter
promozionali) per via della bassa
compatibilità dei client email nel rendering
xHTML e css. A questo scopo sono utili i
Tips & Resourcer di Campaign Monitor:
http://www.campaignmonitor.com/resources/
5
CSS
xhtml
[email protected]
L’xHTML è un linguaggio di marcatura che
consente di aggiungere strutture e significati
semantici al contenuto delle pagine web.
Per farlo si avvale di marcatori HTML,
come titoli <h1>…</h6>, paragrafi <p>,
elenchi <ul><li>, link ipertestuali <a href>, etc.
6
CSS
xhtml
[email protected]
L’xHTML descrive gli elementi di una pagina
web (un collegamento ad un sito, una lista di
elementi, un paragrafo di testo, etc).e
Non descrive le informazioni grafiche:
un elenco puntato con il fondo celeste,
un titolo dal font graziato corpo 24px, una
colonna larga con il bordo viola, etc.
(Questo è il lavoro dei fogli stile)
1 Ad oggi solo alcuni siti hanno una
struttura realmente semantica. L’attuale
versione CSS 2.1 necessita di codice aggiuntivo
per l’impaginazione a griglia, l’uso di sfondi
multipli, la scelta di font incorporati, etc.
I CSS 3 superano i limiti attuali dando
flessibilità ai progettisti, ma sono supportati,
in parte, solo da Firefox e Safari.
7
CSS
xhtml
[email protected]
Modalità di sviluppo delle pagine web
OGGI
IERI
XHTML
HTML
Struttura
e presentazione
CSS
JAVASCRIPT
Struttura
Presentazione
Comportamenti
e interazione utente
JAVASCRIPT
Comportamenti
e interazione utente
8
CSS
xhtml
[email protected]
CSS Zen Garden
“Una dimostrazione di cosa si può realizzare
per mezzo del design basato sui CSS”
9
CSS
xhtml
CSS Zen Garden
http://www.csszengarden.com/tr/italiano/
[email protected]
10
CSS
xhtml
CSS Zen Garden #145
http://www.csszengarden.com/?cssfile=/145/145.css&page=0
[email protected]
11
CSS
xhtml
CSS Zen Garden #171
http://www.csszengarden.com/?cssfile=/171/171.css&page=0
[email protected]
12
CSS
xhtml
CSS Zen Garden #178
http://www.csszengarden.com/?cssfile=/178/178.css&page=0
[email protected]
13
CSS
xhtml
CSS Zen Garden #209
http://www.csszengarden.com/?cssfile=/209/209.css&page=0
[email protected]
14
CSS
xhtml
CSS Zen Garden #213
http://www.csszengarden.com/?cssfile=/213/213.css&page=0
[email protected]
15
CSS
xhtml
[email protected]
Adottare un approccio semantico per il codice
delle pagine web ha molti vantaggi:
Usabilità
La pagina web visualizzata senza codice css o javascript rimane in
ogni caso navigabile e fruibile.e
Accessibilità
Browser per non vedenti, ad esempio, leggeranno la pagina con
l’enfasi data dalla marcatura.r
Indicizzazione
I motori di ricerca sapranno attribuire il significato e il giusto peso
ad ogni elemento della pagina.t
1 Provate a disabilitare i fogli di stile di
un sito. Riuscite ancora a capire la tipologia
e gerarchia dei contenuti in pagina?
2 Esistono alcune regole per aiutare la
scansione di pagine web per non vedenti,
ipovedenti e disabili in genere.
Molte partono da un codice semantico.
http://www.pubbliaccesso.gov.it/
3 Le tecniche attuali SEO (Search engine
optimization) si basano, tra l'altro, sul markup
delle pagine e sull'ottimizzazione dei contenuti.
16
CSS
xhtml
[email protected]
Elementi HTML maggiormente utilizzati
per realizzare strutture semantiche
Elemento
Proprietà
address
Consente di contrassegnare gli indirizzi
dl, dt, dt
Indica un elenco di definizione, termine e descrizione di definizione
ol li, ul li
Indica una lista ad elenco ordinata o non ordinata
blockquote
Definisce un blocco di testo come citazione
q
Definisce una citazione in linea con il testo
label
Etichetta per i moduli
th
Contrassegna le intestazioni delle colonne e le righe all'interno delle tabelle
thead
Contrassegna l’intestazione di una tabella
tfoot
Contrassegna il piè di pagina di una tabella
fieldset
Gruppi di elementi per un modulo
button
Pulsanti per un modulo
cite
Specifica le citazioni o riferimenti ad altre fonti
abbr
Specifica la forma abbreviata per parole o frasi
acronym
Indica gli acronimi
17
CSS
xhtml
Utilizzo di tag non strutturati
Sebbene i marcatori <div> e <span>e siano
molto potenti se utilizzati in combinazione
con i CSS, questi ultimi non hanno alcun
valore semantico.
1 DIV e SPAN sono i marcatori xHTML
maggiormente utilizzati nelle pagine web
non completamente semantiche.
[email protected]
18
CSS
xhtml
[email protected]
Generalmente i <div> (elementi block)e
vengono utilizzati per assemblare i contenuti
della pagina per settori, creando delle “zone”
di impaginazione.
Corretto
<div id="contenitore">
<div id="testata"> [...] </div>
</div>
Corretto
Non corretto
<div>Paragrafo di testo</div>
1 Un elemento BLOCK in una pagina xHTML
è un elemento che forma un blocco separato:
— Forma un blocco e si dispone “a capo”
— Assume la massima larghezza possibile
in rapporto alle misure del suo contenitore
— Modifica l’altezza
<p>Paragrafo di testo</p>
in rapporto al suo contenuto
— Può contenere altri elementi di tipo block
e/o inline (es: un <p> dentro un <div>)
— Con l’ausilio dei css si può attribuire
all’elemento block una dimensione fissa
o variabile (in larghezza e/o in altezza)
— Esempi di elementi HTML di block:
<div>, <h1>…<h6>, <p>, <ul>, <ol>,
<dl>, <table>, <blockquote>, <form>
19
CSS
xhtml
[email protected]
Il tag <span> (elemento inline)e
è un marcatore ignorato dai motori di ricerca
che viene (mal) utilizzato per differenziare
alcuni elementi all’interno di un contenuto.
Non corretto
<h1>Un titolo con un <span>enfasi particolare</span></h1>
Corretto
<h1>Un titolo con un <em>enfasi particolare</em></h1>
1 Un elemento INLINE in una pagina
xHTML è un elemento che rimane in
linea con il resto del contenuto:
— Prende larghezza e altezza
in rapporto al suo contenuto
— Può contenere elementi di tipo inline (es:
un <img> dentro un <a>) e non di tipo block
— Con l’ausilio dei css non gli si
possono attribuire misure fisse
— Esempio di elementi HTML
inline: <span>, <a>, <strong>, <em>,
<img>, <abbr>, <acronym>
20
CSS
Regole di base
CSS
Regole di base
[email protected]
21
CSS
Regole di base
I CSS possono essere:
— incorporati nella pagina web
— collegati ad una o più pagine di un sito
e dichiarati pr media diversi.
[email protected]
22
CSS
Regole di base
[email protected]
Esempio di stile incorporato nel codice di
una pagina xHTML all’interno del tag <head>e
tra i tag specifici <style> e </style>
<html>
<head>
[...]
<style type="text/css" media="screen">
h1 { font-size:24px; color: red }
.box { display: block; color: red }
</style>
[...]
</head>
1 Si può applicare il codice css all’interno
del tag <head> in singole pagine xHTML o in
pagine che necessitano interventi mirati.
23
CSS
Regole di base
[email protected]
Sconsigliato!
Esempio di stile incorporato inline
nel codice di una pagina xHTML nel tag
<body>e
[...]
</head>
<body>
<div id="container">
<h1 style="margin:5px; color: #f00">Il mio nuovo sito</h1>
[...]
</div>
[...]
</body>
</html>
1 Questo approccio è sconsigliato.
In questo modo gli aspetti visuali
degli elementi della pagina sono
dichiarati nella struttura xHTML.
Difficilmente si può forzare una
regola dichiarata inline.
Gli svantaggi sono enormi, specie se il vostro
layout è destinato a supporti e media diversi.
24
CSS
Regole di base
[email protected]
Esempio di stile esternoe collegato nel codice
di una pagina html all’interno del tag <head>r
tramite il tag specifico <link>
<link href="stile.css" rel="stylesheet" type="text/css" media="screen" />
1 In questo caso viene creato un nuovo
2 È senza dubbio la scelta da preferire,
documento con estensione .css che contiente
tutte le regole di stile. Questo file viene
collegato ad ogni pagina xHTML del sito
cosicché tutte sfruttino le stesse regole.
dati i vantaggi in termini di centralità,
controllo ed uniformità dell’aspetto visuale
del sito, sia in fase di progettazione che
in fase di manutenzione evolutiva.
25
CSS
Regole di base
[email protected]
Sconsigliato!
Esempio di stile esterno collegato nel codice
di una pagina xHTML all’interno del tag <head>
tra i tag specifici <style> e </style>
<html>
<head>
[...]
<style type="text/css" media="screen">
@import url(stile.css);
</style>
[...]
</head>
Nota Per questioni di performance nel
caricamento delle pagine web, specialmente su
IE per Windows, è preferibile richiamare un css
esterno con il metodo <link> anziché @import.
26
CSS
Regole di base
[email protected]
Si possono specificare fogli di stile diversi
per consentire una visualizzazione ottimizzata
su media differenti. Ad esempio:
alle > aural
>
braille > embossed > handheld >
printr
>
projection > screen > tty > tv > tutti i dispositivi
sintetizzatori vocali (utilizzati principalmente dai non vedenti)
dispositivi braille a lettura tattile (utilizzati principalmente dai non vedenti)
stampanti braille
dispositivi palmari e smartphone
stampanti e anteprima di stampa dei browser
proiettori per presentazioni
schermo di un pc desktop, laptop, etc.
dispositivi con caratteri a larghezza fissa (telescriventi)
televisori
Nota La tipologia di media contrassegnata
con il colore è quella maggiormente utilizzata
dai siti web, anche perché sono quelli
maggiormente supportati dai browser moderni.
1 All è il valore di default dell’attributo media
2 Nella stampa di un documento xHTML,
grazie all’uso dei css, si possono ottimizzare
corpi e colori dei caratteri, nascondere
elementi non necessari in stampa, etc.
27
CSS
Regole di base
[email protected]
Esempio di chiamata ad un foglio di stile
esterno e di un foglio di stile aggiuntivo
ottimizzato per la stampa in una pagina
xHTML all’interno del tag <head> tramite il tag
specifico <link>
<link href="stile.css" rel="stylesheet" type="text/css" media="all" />
<link href="stampa.css" rel="stylesheet" type="text/css" media="print" />
1 In questo esempio vengono chiamati,
in ordine, due fogli di stile esterni. Il
primo è valido per tutti i supporti, mentre
il secondo solo per la stampa.
In quest'ultimo, genericamente, vengono
nascosti alcuni elementi non necessari
in pagina (menu di navigazione, banner,
contenuti specifici, etc), ottimizzati i colori
in funzione delle stampanti ed adattato
il contenuto ad un formato A4.
È fondamentale l'ordine di chiamata degli
stili (prima lo stile generico, poi quello per la
stampa). Approfondiremo più avanti il motivo.
28
CSS
Sintassi
Sintassi CSS
[email protected]
29
CSS
Sintassi
[email protected]
La sintassi CSS è di facile comprensione,
si basa su una serie di dichiarazionie e regole.
Ad esempio:
h1 {
font-size: 24px;
color: red
}
h2 { font-size:20px;color:red }
Nota Non esistono regole per l’utilizzo
degli spazi nella scrittura delle dichiarazioni
css. Molti utenti preferiscono scrivere una
regola per ogni linea di testo, così come l’ultimo
punto e virgola (;) può essere omesso.
selettore {
proprietà1: valore;
proprietà2: valore
}
selettore { proprietà:valore; [...] }
Lo stile di scrittura dei selettori è case
sensitive, ovvero sensibile alle maiuscole
e minuscole. Proprietà e valori sono case
insesitive e devono essere scritti in minuscolo,
pertanto si consiglia di non utilizzare mai
il maiuscolo, neanche nei selettori.
1 Trovate le più comuni dichiarazioni
in appendice a questo documento.
30
CSS
Sintassi
[email protected]
Selettori
Tramite i selettori si possono dichiarare regole
di stile per:
— ridefinire i marcatori html
— aggiungere classi generiche
— utilizzare id specifici
— richiamare pseudo elementi e pseudo classi
— ridefinire tutti gli elementi di un insieme
31
CSS
Sintassi
[email protected]
Ridefinizione di marcatori html
Ogni tag ha delle impostazioni di stile
predefinite determinate dal browser utilizzato
dall’utente.e
Si possono ridefinire le regole per ogni
marcatore html tramite un selettore di tipo.
Notate delle differenze se provate a visualizzare
le vostre pagine web prima con Microsoft
Internet Explorer 6 e poi con Firefox 3?
Con Pc o Mac? La logica di
interpretazione del codice xHTML varia
a seconda del browser in uso.
32
CSS
Sintassi
[email protected]
Sintassi di un selettore di tipo
Tag di apertura
XHTML
Tag di chiusura
<h1>Titolo d’esempio</h1>
Dichiarazione
CSS
h1 { color: orange; font-size: 24px}
Tag
dichiarazione
selettore { proprietà: valore;}
33
CSS
Sintassi
[email protected]
Classi
Utilizzate come attributo di un tag html
applicano uno stile ad un sottoinsieme
di elementi di una pagina web con
caratteristiche e funzionalità comuni.
Caratteristica primaria delle classi è
la loro applicabilità multipla e la loro
flessibilità, per questo sono tra i selettori
più utilizzati all’interno delle pagine web.
I nomi delle classi sono sempre
preceduti da un period (.).
34
CSS
Sintassi
[email protected]
Sintassi di una classe
Tag di apertura
XHTML
Tag di chiusura
<p class="warning">Mangiate frutta e verdura di stagione</p>
Nome della classe
Attributo del tag
Dichiarazione
CSS
.warning { color: red; font-size: 1.2em}
Nome della classe
Carattere identificativo
Nota I nomi dei selettori possono contenere
solo lettere, numeri, underscores (_), hyphens
(-) e nessun carattere speciale (!"£$%&/ etc. ).
— Le classi e gli ID non possono
contenere altri segni di interpunzione
se non underscore (_) e hyphen (-).
— Il primo carattere di un selettore non
può essere un numero o un hyphen (-).
Ad esempio, mio_nome2-1 è un nome
valido per una classe o un ID, ma i nomi
1,1mio_nome, -mio_nome, my:name,
my.name e my,name non sono validi.
— un tag html può condividere più classi,
sommando le regole di stile. Ad esempio:
<p class="warning high code">[...]</p>
35
CSS
Sintassi
[email protected]
Utilizzo e riuso delle classi
XHTML
CSS
<p class="advice">Salute: basta cambiare alcune abitudini.</p>
<p>Comprare <em class="advice">frutta e verdura di stagione</em>:
i prodotti fuori stagione sono nel supermercato perché hanno
fatto un lungo viaggio in nave, in macchina o in aereo, oppure
sono cresciuti in serra grazie…</p>
.advice { color: green; }
p.advice { font-size: 120%; }
em.advice { color: greenyellow; }
36
CSS
Sintassi
[email protected]
ID
Utilizzati come attributo di un tag html,
definiscono lo stile di un unico elemento
di una pagina web.
Gli ID devono essere utilizzati una sola
volta all'interno di un documento XHTML.
Vengono utilizzati principalmente per
identificare ampie zone di impaginazione
(testata, corpo, piè di pagina, etc.).
I nomi degli ID sono sempre
preceduti da un hash (#).
37
CSS
Sintassi
[email protected]
Sintassi di un id
Tag di apertura
XHTML
Tag di chiusura
<p id="warning">Mangiate frutta e verdura di stagione</p>
Nome dell’id
Attributo del tag
Dichiarazione
CSS
#warning { color: red; font-size: 1.2em}
Nome della classe
Carattere identificativo
Nota I nomi dei selettori possono contenere
solo lettere, numeri, underscores (_), hyphens
(-) e nessun carattere speciale (!"£$%&/ etc. ).
— Le classi e gli ID non possono
contenere altri segni di interpunzione
se non underscore (_) e hyphen (-).
— Il primo carattere di un selettore non
può essere un numero o un hyphen (-).
Ad esempio, mio_nome2-1 è un nome
valido per una classe o un ID, ma i nomi
1,1mio_nome, -mio_nome, my:name,
my.name e my,name non sono validi.
— un tag html può condividere classi e id,
sommando le regole di stile. Ad esempio:
<p id="warning" class="high">[...]</p>
38
CSS
Sintassi
[email protected]
Gruppi di selettori
Quando più selettori condividono le stesse
regole possono essere raggruppati, separati
da una virgola.
h1 { color: purple }
h2 { color: purple }
h3 { color: purple }
>
h1,h2,h3 { color: purple }
39
CSS
Sintassi
[email protected]
Esempio di gruppi di selettori
/* stato iniziale */
/* raggruppamento 1 */
h1 { color: silver; background: white }
h1, h2, h4 { color: silver }
h2 { color: silver; background: gray }
h2, h3 { background: gray }
h3 { color: white; background: gray }
>
h1, h4, strong { background: white }
h4 { color: silver; background: white }
h3 { color: white }
strong { color: gray; background: white }
strong {color: gray }
/* raggruppamento 2 */
h1, h4 { color: silver; background: white}
>
h2 { color: silver }
h3 { color: white }
h2, h3 { background: gray }
In questo caso la logica è complessa
e di lettura non immediata. Meglio
aggiungere delle classi specifiche per ogni
elemento o per un gruppo di elementi.
strong {color: gray; background: white }
40
CSS
Sintassi
[email protected]
Regole di stile “a cascata”
Quando più regole di stile si riferiscono
allo stesso oggetto, anche con selettori diversi,
le dichiarazioni si “sommano” creando spesso
dei conflitti.
/* dichiarazioni dello stesso elemento */
h1 { color: silver; background: white; margin: 10px;}
h1 { color: black; background: purple }
/* risultato */
>
Un tag h1 di colore nero,
sfondo viola con un margine
su tutti i lati di 10px
41
CSS
Sintassi
[email protected]
L’interpretazione delle regole in caso
di conflitti segue la priorità:
eGerarchia degli id
rGerarchia di classi e pseudoclassi
tUltima dichiarazione: se le dichiarazioni
hanno lo stesso livello di importanza
e condividono le stesse proprietà “vince”
l’ultima regola dichiarata
I fogli di stile a cascata prendono in esame
anche il foglio di stile che un utente, tramite
il suo browser, può avere personalizzato per
sovrascrivere le regole dei siti che naviga.
42
CSS
Sintassi
[email protected]
Selettori
* {}
Seleziona tutti gli elementi
p {}
Seleziona tutti gli elementi <p>
*.c {}
Seleziona tutti gli elementi che hanno la classe="c"
p.c {}
Seleziona tutti gli elementi <p> che hanno la classe="c"
#main {}
Seleziona l’unico elemento con attributo id="main"
a:link {}
Seleziona tutti i link non visitati
a:visited {}
Seleziona tutti i link visitati
a:hover {}
Seleziona tutti i link nello stato “al passaggio del mouse”
a:active {}
Seleziona tutti i link nello stato “al click del mouse”
a:focus {}
Seleziona tutti i link nello stato “focus”
p:first-letter {}
Seleziona la prima lettera di tutti gli elementi <p>
p:first-line {}
Seleziona la prima linea di tutti gli elementi <p>
p:first-child {}
Seleziona il primo elemento trovato di tutti gli elementi <p>
#n *.c :first-line {}
Esempio di selettore discendente
#n>*.c > :first-line {}
Esempio di selettore figlio
#n+*.c + :first-line {}
Esempio di selettore fratello
#n,*.c , :first-line {}
Applica un selettore indipendente per ogni dichiarazione separata da (,)
*[title] {}
Seleziona tutti gli elementi che contengono l’attributo title
*[title~="WORD"] {}
Seleziona tutti gli elementi che contengono nell’attributo title la parola "WORD"
*[title="VALORE_TITLE"] {}
Seleziona tutti gli elementi che contengono nell’attributo title la dicitura esatta
43
CSS
proprietà
Proprietà CSS
[email protected]
44
CSS
proprietà
[email protected]
Proprietà comuni nei Css
display
visibility
float
clear
position
z-index
overflow
cursor
left
right
width
min-width
max-width
top
bottom
height
min-height
max-height
margin
margin-left
margin-right
margin-top
margin-bottom
border
border-left
border-left-color
border-left-width
border-left-style
border-right
border-right-color
border-right-width
border-right-style
border-top
border-top-color
border-top-width
border-top-style
border-bottom
border-bottom-color
border-bottom-width
border-bottom-style
Alcune proprietà, come widows o outline,
sono state volutamente tralasciate.
padding
padding-left
padding-right
padding-top
padding-bottom
background
background-color
background-image
background-repeat
background-attachment
background-position
text-indent
text-align
color
font
font-family
font-size
font-style
font-variant
font-weight
text-decoration
text-transform
vertical-align
line-height
white-space
word-spacing
letter-spacing
direction
unicode-bidi
list-style
list-style-type
list-styleposition
list-style-image
border-collapse
table-layout
page-break-after
page-break-before
45
CSS
proprietà
[email protected]
Proprietà e valori comuni nei Css / e
i
Proprietà
Valore
display
inline, none, block, inline-block, list-item, table-cell, table, table-row
visibility
visible, hidden
background-color
transparent, COLOR
background-image
none, url("file.jpg")
background-repeat
repeat, repeat-x, repeat-y, no-repeat
background-attachment
scroll, fixed
background-position
0% 0%, H%V%, HV, lefttop, leftcenter, leftbottom, right top, right center, right bottom,
center top, center center, center bottom
border
WIDTH STYLE COLOR
border-width
medium, LENGTH, thin, thick
border-style
none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
border-color
black, COLOR
La i prima della proprietà indica un elemento
di tipo ereditato.
Il valore in corsivo indica il valore predefinito.
LENGTH rappresenta tutte le proprietà
di dimensione: 0, auto, none e tutte le unità
di misura (%, px, em, ex, pt, in, cm, mm, pc).
46
CSS
proprietà
[email protected]
Proprietà e valori comuni nei Css / r
Proprietà
Valore
border-left
WIDTH STYLE COLOR
border-left-width
same as border-width
border-left-style
same as border-style
border-left-color
same as border-color
border-right
WIDTH STYLE COLOR
border-right-width
same as border-width
border-right-style
same as border-style
border-right-color
same as border-color
border-top
WIDTH STYLE COLOR
border-top-width
same as border-width
border-top-style
same as border-style
border-top-color
same as border-color
La i prima della proprietà indica un elemento
di tipo ereditato.
Il valore in corsivo indica il valore predefinito.
LENGTH rappresenta tutte le proprietà
di dimensione: 0, auto, none e tutte le unità
di misura (%, px, em, ex, pt, in, cm, mm, pc).
47
CSS
proprietà
[email protected]
Proprietà e valori comuni nei Css / t
i
Proprietà
Valore
border-bottom
WIDTH STYLE COLOR
border-bottom-width
same as border-width
border-bottom-style
same as border-style
border-bottom-color
same as border-color
cursor
auto, default, pointer, help, wait, progress, move, crosshair, text, n-resize, s-resize,
e-resize, w-resize
La i prima della proprietà indica un elemento
di tipo ereditato.
Il valore in corsivo indica il valore predefinito.
LENGTH rappresenta tutte le proprietà
di dimensione: 0, auto, none e tutte le unità
di misura (%, px, em, ex, pt, in, cm, mm, pc).
48
CSS
proprietà
[email protected]
Proprietà e valori di contenuto nei Css / e
Proprietà
Valore
padding
0, LENGTH
padding-left
0, LENGTH
padding-right
0, LENGTH
padding-top
0, LENGTH
padding-bottom
0, LENGTH
i
font
caption, icon, menu, message-box, small-caption, status-bar
i
font-family
serif, FONTLIST, sans-serif, monospace, fantasy, cursive
i
font-size
medium, LENGTH, %ParentElementFontSize, xx-small, x-small, smaller, small, large, larger,
x-large, xx-large
i
font-style
normal, italic, oblique
i
font-variant
normal, small-caps
i
font-weight
normal, lighter, bold, bolder, 100, 200, 300, 400, 500, 600, 700, 800, 900
i
text-decoration
none, underline, line-through, overline
i
text-transform
none, lowercase, uppercase, capitalize
La i prima della proprietà indica un elemento
di tipo ereditato.
Il valore in corsivo indica il valore predefinito.
LENGTH rappresenta tutte le proprietà
di dimensione: 0, auto, none e tutte le unità
di misura (%, px, em, ex, pt, in, cm, mm, pc).
49
CSS
proprietà
[email protected]
Proprietà e valori di contenuto nei Css / r
Proprietà
Valore
i
direction
ltr, rtl
i
unicode-bidi
normal, bidi-override, embed
i
line-height
normal, LENGTH, %FontSize, MULTIPLIER
i
letter-spacing
normal, LENGTH
i
word-spacing
normal, LENGTH
i
white-space
normal, pre, nowrap
color
#rrggbb, #rgb, rgb(RED, GREEN, BLUE), rgb(RED%, GREEN%, BLUE%)
black, gray, silver, white, red, maroon, purple, fuchsia, lime, green, olive, yellow,
blue, navy, teal, aqua, violet, fuschia, red, maroon, black, wheat, gold, orange, tomato,
firebrick, lightyellow, yellow, yellowgreen, olive, darkolivegreen, palegreen, lime,
seagreen, green, darkgreen, lightcyan, cyan, turquoise, teal, midnightblue, lightskyblue,
deepskyblue, royalblue, blue, darkblue, whitesmoke, lightgrey, silver, gray, dimgray,
darkslategray
i
La i prima della proprietà indica un elemento
di tipo ereditato.
Il valore in corsivo indica il valore predefinito.
LENGTH rappresenta tutte le proprietà
di dimensione: 0, auto, none e tutte le unità
di misura (%, px, em, ex, pt, in, cm, mm, pc).
50
CSS
proprietà
[email protected]
Proprietà e valori di layout nei Css / e
Float
Applies to all except cells and rows.
float
none, left, right
Clear
Applies to all except inlines, inline-blocks, cells, & rows.
clear
none, left, right, both
Positioned
Applies to all except cells and rows.
position
static, relative; absolute, fixed
left
auto, LENGTH, %WidthOfContainingBlock
right
auto, LENGTH, %WidthOfContainingBlock
top
auto, LENGTH, %HeightOfContainingBlock
bottom
auto, LENGTH, %HeightOfContainingBlock
z-index
auto, INTEGER
La i prima della proprietà indica un elemento
di tipo ereditato.
Il valore in corsivo indica il valore predefinito.
LENGTH rappresenta tutte le proprietà
di dimensione: 0, auto, none e tutte le unità
di misura (%, px, em, ex, pt, in, cm, mm, pc).
51
CSS
proprietà
[email protected]
Proprietà e valori di layout nei Css / r
Horizontal Margin
Applies to all except cells and rows.
margin
0, LENGTH, %WidthOfContainingBlock, auto
margin-left
0, LENGTH, %WidthOfContainingBlock, auto
margin-right
0, LENGTH, %WidthOfContainingBlock, auto
Vertical Margin
Applies to all except inlines, cells, and rows.
margin
0, LENGTH, %WidthOfContainingBlock, auto
margin-top
0, LENGTH, %WidthOfContainingBlock, auto
margin-bottom
0, LENGTH, %WidthOfContainingBlock, auto
La i prima della proprietà indica un elemento
di tipo ereditato.
Il valore in corsivo indica il valore predefinito.
LENGTH rappresenta tutte le proprietà
di dimensione: 0, auto, none e tutte le unità
di misura (%, px, em, ex, pt, in, cm, mm, pc).
52
CSS
proprietà
[email protected]
Proprietà e valori di layout nei Css / t
Width
Applies to all except inlines and rows.
width
auto, LENGTH, %WidthOfContainingBlock
min-width
0, LENGTH, %WidthOfContainingBlock
max-width
none, LENGTH, %WidthOfContainingBlock
Height
Applies to all except inlines and tables.
height
auto, LENGTH, %HeightOfContainingBlock
min-height
0, LENGTH, %HeightOfContainingBlock
max-height
none, LENGTH, %HeightOfContainingBlock
Content Layout
Applies to all except inlines, tables, and rows.
i
text-indent
0, LENGTH, %WidthOfContainingBlock
i
text-align
left, center, right, justify
overflow
visible, hidden, auto, scroll
La i prima della proprietà indica un elemento
di tipo ereditato.
Il valore in corsivo indica il valore predefinito.
LENGTH rappresenta tutte le proprietà
di dimensione: 0, auto, none e tutte le unità
di misura (%, px, em, ex, pt, in, cm, mm, pc).
53
CSS
proprietà
[email protected]
Proprietà e valori specifici nei Css
List
Applies only to lists.
i
list-style
TYPE POSITION IMAGE
i
list-style-type
disc, circle, square, none, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman
i
list-style-position
outside, inside
i
list-style-image
none, url("file.jpg")
Table
Applies only to tables.
border-collapse
separate, collapse
table-layout
auto, fixed
Cell
Applies only to cells.
vertical-align
baseline, bottom, middle, top
Inline
Applies only to inlines and inline-blocks.
vertical-align
baseline, LENGTH, %LineHeight, text-bottom, text-top, middle, top, bottom
Page
Applies only to blocks and tables.
page-break-after
auto, always, avoid
page-break-before
auto, always, avoid
i
La i prima della proprietà indica un elemento
di tipo ereditato.
Il valore in corsivo indica il valore predefinito.
LENGTH rappresenta tutte le proprietà
di dimensione: 0, auto, none e tutte le unità
di misura (%, px, em, ex, pt, in, cm, mm, pc).
54
CSS
LINK
[email protected]
Link su HTML e CSS
Sito
Url
W3C Homepage for CSS
www.w3.org/Style/CSS
W3C CSS 2.1 Specification
www.w3.org/TR/CSS21
W3C XHTML 1.0 Specification
www.w3.org/TR/xhtml1
Mozilla Developer Center
developer.mozilla.org/en/docs
Web Design Information
www.welie.com/patterns
microformats.org
www.alistapart.com
www.simplebits.com/notebook
www.positioniseverything.net
meyerweb.com/eric/css
Web Design Tutorials
www.w3schools.com
www.westciv.com/style_master/house
Tools
developer.yahoo.com
dean.edwards.name/my/cssQuery
addons.mozilla.org/firefox/60
addons.mozilla.org/firefox/179
CSS Mailing Lists
css-discuss.org
babblelist.com
55
CSS
Software per i css
Software per i css
Ovvero quelli che utilizzo nel lavoro quotidiano
[email protected]
56
CSS
Software per i css
[email protected]
TopStyle Pro
Editor CSS per Windows
TOPSTYLE
http://www.newsgator.com/
individuals/topstyle/default.aspx
Per Win segnalo anche:
Adobe DREAMWEAVER, editor WYSIWYG
per il web dalle molte funzionalità.
STYLE MASTER, editor css in grado di
agire sull’anteprima delle pagine web.
57
CSS
Software per i css
[email protected]
CSSEDIT
Editor CSS per Mac OS X
CSSEDIT
http://macrabbit.com/cssedit/
Per Mac OS X segnalo anche:
Adobe DREAMWEAVER, editor WYSIWYG
per il web dalle molte funzionalità.
Panic CODA, un software che integra in
un’unica finestra un editor per linguaggi
web, un editor css, svn, ftp, etc.
58
CSS
Software per i css
[email protected]
Firebug / web Developer Toolbar
Estensioni di Firefox (Win, Mac, Linux)
FIREBUG
http://getfirebug.com/
https://addons.mozilla.org/it/firefox/addon/1843
WEB DEVELOPER TOOLBAR
http://chrispederick.com/work/web-developer/
https://addons.mozilla.org/it/firefox/addon/60
59
CSS
Software per i css
XRAY
Bookmarklet javascript per qualsiasi browser moderno
XRAY
http://www.westciv.com/xray/
[email protected]
60
CSS
Software per i css
[email protected]
Validatore CSS
Sito web del W3C
CSS VALIDATOR
http://jigsaw.w3.org/css-validator/
xHTML VALIDATOR
http://validator.w3.org/
61
Think more, design less.
Federico Parrella
Profilo
www.parrella.it
Federico Parrella
User experience, user centered design
and corporate identity. Online media consultant.
Progettista grafico e docente di multimedia design che vive e lavora a Roma. Diplomatosi all’ISIA di Urbino, si occupa
di integrazione di media diversi nell’ambito del design della comunicazione, ed in particolare di user experience, user
centered design e di corporate identity.
Ha lavorato per clienti quali l’Università di Urbino, il Comune di Roma, Sat 2000, il Gruppo Iccrea (BCC) e il Ministero
dell’Università e Ricerca.
Dal 2004 è art director e project leader di Elemedia (Gruppo Editoriale L’Espresso) dove si occupa di UI design, semantic
xHTML, CSS e Javascript, mobile ed iPhone design, Wordpress development e project management.
Dal 2003 al 2008 è stato docente di Multimedia Design presso l’ISIA di Urbino con la quale tuttora collabora. Ha svolto
seminari sul web design e sulla progettazione grafica presso l’ISA di Fabriano, l’ISIA di Roma e la Facoltà di Scienze della
Comunicazione dell’Università degli Studi di Roma “La Sapienza”.
Il suo studio di Roma, con Cecilia Ceradini, si occupa di consulenza, formazione e progettazione per il design della
comunicazione.