Federico Parrella
10 dicembre 2010
Fogli di stileIntroduzione 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.
[email protected] introduzione
Cascading Style Sheet
introdotti a partire dal 1996 dal W3C,ei 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
[email protected] introduzione
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
[email protected] xhtMl
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 codicexhtMl 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
[email protected] xhtMl
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
[email protected] xhtMl
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
[email protected] xhtMl
ieri
oGGi
Modalità di sviluppo delle pagine web
8
JAVASCriPt
CSS
xhtMl Struttura
Presentazione
Comportamenti e interazione utente
JAVASCriPt
htMl Strutturae presentazione
Comportamenti e interazione utente
[email protected] xhtMl
CSS Zen Garden
“una dimostrazione di cosa si può realizzare per mezzo del design basato sui CSS”
9
[email protected] xhtMl 10
CSS Zen Gardenhttp://www.csszengarden.com/tr/italiano/
[email protected] xhtMl 11
CSS Zen Garden #145http://www.csszengarden.com/?cssfile=/145/145.css&page=0
[email protected] xhtMl 12
CSS Zen Garden #171http://www.csszengarden.com/?cssfile=/171/171.css&page=0
[email protected] xhtMl 13
CSS Zen Garden #178http://www.csszengarden.com/?cssfile=/178/178.css&page=0
[email protected] xhtMl 14
CSS Zen Garden #209http://www.csszengarden.com/?cssfile=/209/209.css&page=0
[email protected] xhtMl 15
CSS Zen Garden #213http://www.csszengarden.com/?cssfile=/213/213.css&page=0
[email protected] xhtMl
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
indicizzazioneI 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
[email protected] xhtMl
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
[email protected] 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.
18
[email protected] xhtMl
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>
Non corretto
<div>Paragrafo di testo</div>
Corretto
<p>Paragrafo di testo</p>
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
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
[email protected] xhtMl
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
[email protected] reGole di BASe
I CSS possono essere:
— incorporati nella pagina web— collegati ad una o più pagine di un sitoe dichiarati pr media diversi.
22
[email protected] reGole di BASe
esempio di stile incorporato nel codice di una pagina xhtMl all’interno del tag <head>etra 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>
23
1 Si può applicare il codice css all’interno del tag <head> in singole pagine xHTML o in pagine che necessitano interventi mirati.
[email protected] reGole di BASe
esempio di stile incorporato inlinenel 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>
24
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.
Sconsigliato!
[email protected] reGole di BASe
esempio di stile esternoe collegato nel codicedi una pagina html all’interno del tag <head>rtramite il tag specifico <link>
<link href="stile.css" rel="stylesheet" type="text/css" media="screen" />
25
1 In questo caso viene creato un nuovo 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.
2 È senza dubbio la scelta da preferire, 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.
[email protected] reGole di BASe
esempio di stile esterno collegato nel codicedi 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>
26
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.
Sconsigliato!
[email protected] reGole di BASe
Si possono specificare fogli di stile diversi per consentire una visualizzazione ottimizzata su media differenti. Ad esempio:
alle > tutti i dispositivi
aural > sintetizzatori vocali (utilizzati principalmente dai non vedenti)
braille > dispositivi braille a lettura tattile (utilizzati principalmente dai non vedenti)
embossed > stampanti braille
handheld > dispositivi palmari e smartphone
printr > stampanti e anteprima di stampa dei browser
projection > proiettori per presentazioni
screen > schermo di un pc desktop, laptop, etc.
tty > dispositivi con caratteri a larghezza fissa (telescriventi)
tv > 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
[email protected] reGole di BASe
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" />
28
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.
[email protected] SintASSi
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 }
selettore { proprietà1: valore; proprietà2: valore }
selettore { proprietà:valore; [...] }
30
Nota Non esistono regole per l’utilizzo degli spazi nella scrittura delle dichiarazionicss. Molti utenti preferiscono scrivere una regola per ogni linea di testo, così come l’ultimo punto e virgola (;) può essere omesso.
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.
[email protected] SintASSi
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
I nomi dei selettori devono contenere solo lettere, numeri, underscores (_), hyphens (-) e nessun carattere speciale (!"£$%&/ etc. ). Il primo carattere di un selettore non può essere un numero o un hyphen (-).Le classi e gli ID non possono contenere altri segni di punteggiara se non underscore (_) e 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,and my,name non sono validi.
[email protected] SintASSi
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.
32
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.
I nomi dei selettori devono contenere solo lettere, numeri, underscores (_), hyphens (-) e nessun carattere speciale (!"£$%&/ etc. ). Il primo carattere di un selettore non può essere un numero o un hyphen (-).Le classi e gli ID non possono contenere altri segni di punteggiara se non underscore (_) e 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,and my,name non sono validi.
[email protected] SintASSi 33
CSS h1 { color: orange; font-size: 24px}
Dichiarazione
Tag
xhtMl <h1>Titolo d’esempio</h1>
Tag di chiusuraTag di apertura
Sintassi di un selettore di tipo
selettore { proprietà: valore;}
dichiarazione
[email protected] SintASSi
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.
34
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 (.).
[email protected] SintASSi 35
Nota I nomi dei selettori possono contenere solo lettere, numeri, underscores (_), hyphens (-) e nessun carattere speciale (!"£$%&/ etc. ).
— Il primo carattere di un selettore non può essere un numero o un hyphen (-).
— Le classi e gli ID non possono contenere altri segni di interpunzione se non underscore (_) e 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>
CSS .warning { color: red; font-size: 1.2em}
Dichiarazione
Nome della classeCarattere identificativo
xhtMl <p class="warning">Mangiate frutta e verdura di stagione</p>
Tag di apertura
Nome della classe
Attributo del tag
Tag di chiusura
Sintassi di una classe
[email protected] SintASSi 36
CSS
.advice { color: green; }p.advice { font-size: 120%; }em.advice { color: greenyellow; }
xhtMl<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>
Utilizzo e riuso delle classi
[email protected] SintASSi
ID
utilizzati come attributo di un tag html, definiscono lo stile di un unico elementodi una pagina web.
37
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 (#).
[email protected] SintASSi 38
Nota I nomi dei selettori possono contenere solo lettere, numeri, underscores (_), hyphens (-) e nessun carattere speciale (!"£$%&/ etc. ).
— Il primo carattere di un selettore non può essere un numero o un hyphen (-).
— Le classi e gli ID non possono contenere altri segni di interpunzione se non underscore (_) e 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>
CSS #warning { color: red; font-size: 1.2em}
Dichiarazione
Nome della classeCarattere identificativo
xhtMl <p id="warning">Mangiate frutta e verdura di stagione</p>
Tag di apertura
Nome dell’id
Attributo del tag
Tag di chiusura
Sintassi di un id
[email protected] SintASSi
Gruppi di selettori
Quando più selettori condividono le stesse regole possono essere raggruppati, separati da una virgola.
39
h1 { color: purple }
h2 { color: purple }
h3 { color: purple }
h1,h2,h3 { color: purple }
>
[email protected] SintASSi
Esempio di gruppi di selettori
40
/* stato iniziale */
h1 { color: silver; background: white }
h2 { color: silver; background: gray }
h3 { color: white; background: gray }
h4 { color: silver; background: white }
strong { color: gray; background: white }
/* raggruppamento 1 */
h1, h2, h4 { color: silver }
h2, h3 { background: gray }
h1, h4, strong { background: white }
h3 { color: white }
strong {color: gray }
/* raggruppamento 2 */
h1, h4 { color: silver; background: white}
h2 { color: silver }
h3 { color: white }
h2, h3 { background: gray }
strong {color: gray; background: white }
>
>
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.
[email protected] SintASSi
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.
41
/* 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
>
[email protected] SintASSi
l’interpretazione delle regole in caso di conflitti segue la priorità:
e Gerarchia degli idr Gerarchia di classi e pseudoclassit Ultima dichiarazione: se le dichiarazioni hanno lo stesso livello di importanza e condividono le stesse proprietà “vince” l’ultima regola dichiarata
42
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.
[email protected] SintASSi 43
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
[email protected] ProPrietà 44
Proprietà CSS
[email protected] ProPrietà 45
Alcune proprietà, come widows o outline, sono state volutamente tralasciate.
displayvisibility
floatclear
positionz-indexoverflowcursor
leftrightwidthmin-widthmax-width
topbottomheightmin-heightmax-height
marginmargin-leftmargin-rightmargin-topmargin-bottom
borderborder-leftborder-left-colorborder-left-widthborder-left-styleborder-rightborder-right-colorborder-right-widthborder-right-styleborder-topborder-top-colorborder-top-widthborder-top-styleborder-bottomborder-bottom-colorborder-bottom-widthborder-bottom-style
paddingpadding-leftpadding-rightpadding-toppadding-bottom
backgroundbackground-colorbackground-imagebackground-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-style-position list-style-image
border-collapse table-layout
page-break-after page-break-before
Proprietà comuni nei Css
[email protected] ProPrietà 46
Proprietà e valori comuni nei Css / e
Proprietà Valore
display inline, none, block, inline-block, list-item, table-cell, table, table-row
i 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 elementodi 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).
[email protected] ProPrietà 47
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 elementodi 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).
[email protected] ProPrietà 48
Proprietà e valori comuni nei Css / t
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
i 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 elementodi 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).
[email protected] ProPrietà 49
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 elementodi 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).
[email protected] ProPrietà 50
Proprietà e valori di contenuto nei Css / r
Proprietà Valorei 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
i 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
La i prima della proprietà indica un elementodi 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).
[email protected] ProPrietà 51
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 elementodi 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).
[email protected] ProPrietà 52
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 elementodi 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).
[email protected] ProPrietà 53
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 elementodi 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).
[email protected] ProPrietà 54
Proprietà e valori specifici nei CssList 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. i border-collapse separate, collapse
table-layout auto, fixed
Page Applies only to blocks and tables. page-break-after auto, always, avoid
page-break-before auto, always, avoid
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
La i prima della proprietà indica un elementodi 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).
[email protected] linK 55
Link su HTML e CSSSito UrlW3C 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
[email protected] SoFtWAre Per i CSS
Software per i cssovvero quelli che utilizzo nel lavoro quotidiano
56
[email protected] SoFtWAre Per i CSS 57
TOPSTYLEhttp://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.
TopStyle Proeditor CSS per Windows
[email protected] SoFtWAre Per i CSS 58
CSSEDIThttp://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.
CSSEDITeditor CSS per Mac oS x
[email protected] SoFtWAre Per i CSS 59
FIREBUGhttp://getfirebug.com/https://addons.mozilla.org/it/firefox/addon/1843
WEB DEVELOPER TOOLBARhttp://chrispederick.com/work/web-developer/https://addons.mozilla.org/it/firefox/addon/60
Firebug / web Developer ToolbarEstensioni di Firefox (Win, Mac, Linux)
[email protected] SoFtWAre Per i CSS 60
XRAYhttp://www.westciv.com/xray/
XRAYBookmarklet javascript per qualsiasi browser moderno
[email protected] SoFtWAre Per i CSS 61
CSS VALIDATORhttp://jigsaw.w3.org/css-validator/
xHTML VALIDATORhttp://validator.w3.org/
Validatore CSSSito web del W3C
think more, design less.
Federico Parrella
www.parrella.itProFilo
Federico Parrella
User experience, user centered designand 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.
Top Related