Fogli di stile - Introduzione ai CSS per il web · CSS introduzione [email protected] Cascading Style Sheet introdotti a partire dal 1996 dal W3C,e i fogli di stile sono utilizzati

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

xhtMl Presupposti per lavorare con i CSS

4


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


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


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


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


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/


CSS Zen Garden #145http://www.csszengarden.com/?cssfile=/145/145.css&page=0










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


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


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


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


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

CSSregole di base

21


I CSS possono essere:

— incorporati nella pagina web— collegati ad una o più pagine di un sitoe dichiarati pr media diversi.

22


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.


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!


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.


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!


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


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

Sintassi CSS

29


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.


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.


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


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 (.).


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


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


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 (#).


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


Gruppi di selettori

Quando più selettori condividono le stesse regole possono essere raggruppati, separati da una virgola.

39

h1 { color: purple }



h1,h2,h3 { color: purple }

>


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.


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

>


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.


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


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


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).


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




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




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




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




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




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




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




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



[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


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


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)


XRAYhttp://www.westciv.com/xray/

XRAYBookmarklet javascript per qualsiasi browser moderno


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.

Fogli di stile - Introduzione ai CSS per il web · CSS introduzione [email protected] Cascading Style Sheet introdotti a partire dal 1996 dal W3C,e i fogli di stile sono utilizzati

Documents