Federico Parrella. 10 dicembre 2010

Transcript

1 Federico Parrella 10 dicembre 2010

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

3 CSS introduzione 2 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.

4 CSS introduzione 3 I css consentono di dividere i contenuti delle pagine web descritti nel codice (x)html e, 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).

5 CSS xhtml 4 xhtml Presupposti per lavorare con i CSS

6 CSS xhtml 5 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 (principalmente newsletter promozionali) per via della bassa compatibilità dei client nel rendering xhtml e css. A questo scopo sono utili i Tips & Resourcer di Campaign Monitor:

7 CSS xhtml 6 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.

8 CSS xhtml 7 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.

9 CSS xhtml 8 Modalità di sviluppo delle pagine web OGGI IERI XHTML Struttura HTML Struttura e presentazione CSS Presentazione JAVASCriPT Comportamenti e interazione utente JAVASCriPT Comportamenti e interazione utente

10 CSS xhtml 9 CSS Zen Garden Una dimostrazione di cosa si può realizzare per mezzo del design basato sui CSS

11 CSS xhtml 10 CSS Zen Garden

12 CSS xhtml 11 CSS Zen Garden #145

17 CSS xhtml 16 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. 3 Le tecniche attuali SEO (Search engine optimization) si basano, tra l'altro, sul markup delle pagine e sull'ottimizzazione dei contenuti.

18 CSS xhtml 17 Elementi html maggiormente utilizzati per realizzare strutture semantiche Elemento address dl, dt, dt ol li, ul li blockquote q label th thead tfoot fieldset button cite abbr acronym Proprietà Consente di contrassegnare gli indirizzi Indica un elenco di definizione, termine e descrizione di definizione Indica una lista ad elenco ordinata o non ordinata Definisce un blocco di testo come citazione Definisce una citazione in linea con il testo Etichetta per i moduli Contrassegna le intestazioni delle colonne e le righe all'interno delle tabelle Contrassegna l intestazione di una tabella Contrassegna il piè di pagina di una tabella Gruppi di elementi per un modulo Pulsanti per un modulo Specifica le citazioni o riferimenti ad altre fonti Specifica la forma abbreviata per parole o frasi Indica gli acronimi

19 CSS xhtml 18 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.

20 CSS xhtml 19 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>

21 CSS xhtml 20 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>

22 CSS Regole di BASe 21 CSS Regole di base

23 CSS Regole di BASe 22 I CSS possono essere: incorporati nella pagina web collegati ad una o più pagine di un sito e dichiarati pr media diversi.

24 CSS Regole di BASe 23 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.

25 CSS Regole di BASe 24 Esempio di stile incorporato inline nel codice di una pagina xhtml nel tag <body> e Sconsigliato! [...] </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.

26 CSS Regole di BASe 25 Esempio di stile esterno e 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 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.

27 CSS Regole di BASe 26 Esempio di stile esterno collegato nel codice di una pagina xhtml all interno del tag <head> tra i tag specifici <style> e </style> Sconsigliato! <html> <head> [...] <style type="text/css" 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>

28 CSS Regole di BASe 27 Si possono specificare fogli di stile diversi per consentire una visualizzazione ottimizzata su media differenti. Ad esempio: all e > 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 print r > 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.

29 CSS Regole di BASe 28 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.

30 CSS SintASSi 29 Sintassi CSS

31 CSS SintASSi 30 La sintassi CSS è di facile comprensione, si basa su una serie di dichiarazioni e e regole. Ad esempio: h1 { font-size: 24px; color: red } selettore { proprietà1: valore; proprietà2: valore } h2 { font-size:20px;color:red } selettore { proprietà:valore; [...] } 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. 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.

32 CSS SintASSi 31 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

33 CSS SintASSi 32 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.

34 CSS SintASSi 33 Sintassi di un selettore di tipo Tag di apertura Tag di chiusura XHTML <h1>titolo d esempio</h1> Dichiarazione CSS h1 { color: orange; font-size: 24px} Tag dichiarazione selettore { proprietà: valore;}

35 CSS SintASSi 34 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 (.).

36 CSS SintASSi 35 Sintassi di una classe Tag di apertura Tag di chiusura XHTML <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. ). 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>

37 CSS SintASSi 36 Utilizzo e riuso delle classi 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> CSS.advice { color: green; } p.advice { font-size: 120%; } em.advice { color: greenyellow; }

38 CSS SintASSi 37 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 (#).

39 CSS SintASSi 38 Sintassi di un id Tag di apertura Tag di chiusura XHTML <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. ). 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>

40 CSS SintASSi 39 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 }

41 CSS SintASSi 40 Esempio di gruppi di selettori /* 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 } 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. > /* raggruppamento 2 */ h1, h4 { color: silver; background: white} h2 { color: silver } h3 { color: white } h2, h3 { background: gray } strong {color: gray; background: white }

42 CSS SintASSi 41 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

43 CSS SintASSi 42 L interpretazione delle regole in caso di conflitti segue la priorità: e Gerarchia degli id r Gerarchia di classi e pseudoclassi t Ultima 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.

44 CSS SintASSi 43 Selettori * {} Seleziona tutti gli elementi p {} *.c {} p.c {} #main {} a:link {} a:visited {} a:hover {} a:active {} a:focus {} p:first-letter {} p:first-line {} p:first-child {} Seleziona tutti gli elementi <p> Seleziona tutti gli elementi che hanno la classe="c" Seleziona tutti gli elementi <p> che hanno la classe="c" Seleziona l unico elemento con attributo id="main" Seleziona tutti i link non visitati Seleziona tutti i link visitati Seleziona tutti i link nello stato al passaggio del mouse Seleziona tutti i link nello stato al click del mouse Seleziona tutti i link nello stato focus Seleziona la prima lettera di tutti gli elementi <p> Seleziona la prima linea di tutti gli elementi <p> Seleziona il primo elemento trovato di tutti gli elementi <p> #n *.c :first-line {} Esempio di selettore discendente #n>*.c > :first-line {} #n+*.c + :first-line {} Esempio di selettore figlio Esempio di selettore fratello #n,*.c, :first-line {} Applica un selettore indipendente per ogni dichiarazione separata da (,) *[title] {} *[title~="word"] {} *[title="valore_title"] {} Seleziona tutti gli elementi che contengono l attributo title Seleziona tutti gli elementi che contengono nell attributo title la parola "WORD" Seleziona tutti gli elementi che contengono nell attributo title la dicitura esatta

45 CSS proprietà 44 Proprietà CSS

46 CSS proprietà 45 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 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 Alcune proprietà, come widows o outline, sono state volutamente tralasciate.

47 CSS proprietà 46 Proprietà e valori comuni nei Css / e Proprietà display Valore inline, none, block, inline-block, list-item, table-cell, table, table-row i visibility visible, hidden background-color background-image background-repeat background-attachment background-position border border-width border-style border-color transparent, COLOR none, url("file.jpg") repeat, repeat-x, repeat-y, no-repeat scroll, fixed 0% 0%, H%V%, HV, lefttop, leftcenter, leftbottom, right top, right center, right bottom, center top, center center, center bottom WIDTH STYLE COLOR medium, LENGTH, thin, thick none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset 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).

48 CSS proprietà 47 Proprietà e valori comuni nei Css / r Proprietà border-left border-left-width border-left-style border-left-color border-right border-right-width border-right-style border-right-color border-top border-top-width border-top-style border-top-color Valore WIDTH STYLE COLOR same as border-width same as border-style same as border-color WIDTH STYLE COLOR same as border-width same as border-style same as border-color WIDTH STYLE COLOR same as border-width same as border-style 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).

49 CSS proprietà 48 Proprietà e valori comuni nei Css / t Proprietà border-bottom border-bottom-width border-bottom-style border-bottom-color Valore WIDTH STYLE COLOR same as border-width same as border-style 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 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à 49 Proprietà e valori di contenuto nei Css / e Proprietà padding padding-left padding-right padding-top padding-bottom Valore 0, LENGTH 0, LENGTH 0, LENGTH 0, LENGTH 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 i font-style normal, italic, oblique i font-variant normal, small-caps medium, LENGTH, %ParentElementFontSize, xx-small, x-small, smaller, small, large, larger, x-large, xx-large 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).

51 CSS proprietà 50 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 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 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à 51 Proprietà e valori di layout nei Css / e Float float Applies to all except cells and rows. none, left, right Clear clear Applies to all except inlines, inline-blocks, cells, & rows. none, left, right, both Positioned position left right top bottom z-index Applies to all except cells and rows. static, relative; absolute, fixed auto, LENGTH, %WidthOfContainingBlock auto, LENGTH, %WidthOfContainingBlock auto, LENGTH, %HeightOfContainingBlock auto, LENGTH, %HeightOfContainingBlock 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).

53 CSS proprietà 52 Proprietà e valori di layout nei Css / r Horizontal Margin margin margin-left margin-right Applies to all except cells and rows. 0, LENGTH, %WidthOfContainingBlock, auto 0, LENGTH, %WidthOfContainingBlock, auto 0, LENGTH, %WidthOfContainingBlock, auto Vertical Margin margin margin-top margin-bottom Applies to all except inlines, cells, and rows. 0, LENGTH, %WidthOfContainingBlock, auto 0, LENGTH, %WidthOfContainingBlock, auto 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).

54 CSS proprietà 53 Proprietà e valori di layout nei Css / t Width width min-width max-width Applies to all except inlines and rows. auto, LENGTH, %WidthOfContainingBlock 0, LENGTH, %WidthOfContainingBlock none, LENGTH, %WidthOfContainingBlock Height height min-height max-height Applies to all except inlines and tables. auto, LENGTH, %HeightOfContainingBlock 0, LENGTH, %HeightOfContainingBlock 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).

55 CSS proprietà 54 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. i border-collapse separate, collapse table-layout auto, fixed Cell vertical-align Inline vertical-align Page page-break-after page-break-before Applies only to cells. baseline, bottom, middle, top Applies only to inlines and inline-blocks. baseline, LENGTH, %LineHeight, text-bottom, text-top, middle, top, bottom Applies only to blocks and tables. auto, always, avoid auto, always, avoid 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).

56 CSS LINK 55 Link su HTML e CSS Sito W3C Homepage for CSS W3C CSS 2.1 Specification W3C XHTML 1.0 Specification Mozilla Developer Center Web Design Information Web Design Tutorials Tools CSS Mailing Lists Url developer.mozilla.org/en/docs microformats.org meyerweb.com/eric/css developer.yahoo.com dean.edwards.name/my/cssquery addons.mozilla.org/firefox/60 addons.mozilla.org/firefox/179 css-discuss.org babblelist.com

Vedere altro