Linguaggio CSS
Transcript
Linguaggio CSS
Linguaggio CSS Linguaggio CSS 1 Linguaggio CSS 2 Introduzione Cosa è il linguaggio CSS? • CSS sta per Cascading Style Sheets, cioè Fogli di Stile a Cascata • Gli stili definiscono come visualizzare gli elementi HTML • Gli stili sono normalmente memorizzati nei fogli di stile • Gli stili sono stati aggiunti all'HTML 4.0 per risolvere un problema • I fogli di stili esterni possono risparmiare un sacco di lavoro • I fogli di stile esterni sono memorizzati nei file CSS • Definizione multiple di uno stile confluiscono a cascata in uno solo Gli stili risolvono un grosso problema L'HTML originale non è stato pensato per contenere tag di formattazione di un documento, ma per definirne il contenuto, come: <p>This is a paragraph.</p> <h1>This is a heading</h1> Quando gli elementi come <font> e <color> furono aggiunti nelle specifiche HTML 3.2 è cominciato un incubo per gli web developer. Lo sviluppo di siti grandi, dove font e colori dovevano essere modificati in ogni singolo punto di ogni singola pagina divennero un lungo, faticoso e spesso inutile lavoro. Per risolvere questo problema, il consorzio W3C, reponsabile per la standardizzazione dell'HTML, creò il linguaggio CSS in aggiunta all'HTML 4.0. Dall'HTML 4.0, le informazioni di formattazione possono essere rimosse dai documenti HTML e memorizzati in un file CSS separato. Tutti i browser supportano i CSS oggi. Gli stili possono essere specificati in vari modi: • all'interno di un documento HTML • all'interno della sezione head di un documento HTML • in un file .css separato Linguaggio CSS Inoltre è possibile far riferimento a multipli file css dentro lo stesso file HTML. Ma quale stile sarà utilizzato quando ne viene specificato più di uno per lo stesso documento HTML? In generale si dice che tutti gli stili convergono “a cascata” in un unico foglio di stile “virtuale” secondo la seguente priorità crescente: 1. Browser default 2. Fogli di stile esterni 3. Fogli di stile interni (nella sezione HEAD) 4. stili inline (negli elementi HTML) Quindi gli stili inline hanno la massima priorità rispetto a tutti gli altri, i fogli interni rispetto a quelli esterni e alle impostazioni di default del browser e così via. Attenzione però, se il link al foglio di stile esterno si trova dopo il foglio interno, questo avrà la priorità nonostante la regola generale. 3 Linguaggio CSS 4 Sintassi CSS La sintassi CSS è fatta di tre parti: un selettore, una proprietà ed un valore: Selector { property1:value1; property2:value2 } Il selettore è normalmente l'elemento HTML che vuoi definire, la proprietà è l'attributo che si vuole cambiare e ovviamente ogni proprietà assume un valore. Proprietà e valori sono separati dai due punti e circondate dalle parentesi graffe. Si possono inoltre raggruppare i selettori, separandoli con una virgola: h1,h2,h3,h4,h5,h6 { color:green } Il selettore class Con il selettore class si possono definire stile differenti per lo stesso tipo di elemento HTML. Immagina di avere due paragrafi nel tuo documento: uno allineato a destra e uno al centro: p.right {text-align:right} p.center {text-align:center} Così devi utilizzare l'attributo class nel tuo documento HTML: <p class="right">This paragraph will be right-aligned.</p> <p class="center">This paragraph will be center-aligned.</p> Per applicare più di una classe ad un elemento scrivi: <p class="center bold">This is a paragraph.</p> E il paragrafo sopra sarà formattato secondo la classe "center" e la classe "bold". Si può inoltre omettere il nome del selettore per definire uno stile da usare in tutti gli elementi HTML che utilizzano una certa classe. .center {text-align:center} Linguaggio CSS 5 E nel documento HTML <h1 class="center">This heading will be center-aligned</h1> <p class="center">This paragraph will also be center-aligned.</p> Non iniziare un nome di classe con un numero! Questa brutta pratica è supportata solo da Internet Explorer. Aggiungere stili agli elementi con attributi particolari Si possono applicare stili solo a quegli elementi HTML che presentano particolari attributi. Nell'esempio sotto verranno colorati con sfondo blue tutti gli elementi che contengono un attributo type con valore “text”: input[type="text"] {background-color:blue} Il selettore id Si possono definire stili per gli elementi HTML anche con il selettore id, che è definito tramite un #. La regola di stile viene intercettata da tutti gli elementi che hanno lo stesso valore di id del valore accanto a #: #green {color:green} Analogamente possiamo limitare il raggio del selettore id, restringendo il campo ad un solo elemento HTML: p#para1 { text-align:center; color:red } Ancora, non iniziare un nome di id con un numero! Questo è supportato solo da Internet Explorer. Commenti CSS I commenti vengono solitamente utilizzati per spiegare il codice e possono aiutare ad editare di nuovo il codice in un secondo momento. I commenti sono ignorati dai browser. I commenti CSS iniziano con “/*” e finiscono con “*/”: /*This is a comment*/ p { text-align:center; Linguaggio CSS 6 /*This is another comment*/ color:black; font-family:arial } Come inserire un foglio di stile Esistendo tre tipologie di foglio di stile, esistono tre metodi per inserirne uno all'interno di un documento HTML. Vediamo quali: 1) Fogli di stile esterni Un foglio di stile esterno è la soluzione ideale per applicare lo stesso stile a più pagine. Con un foglio di stile esterno, è possibile cambiare il look di un intero sito, semplicemente modificando un file. Ogni pagina del sito deve contenere un link al foglio di stile tramite un elemento <link> da inserire nella sezione head: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> Il browser leggerà le definizioni di stile contenute nel file mystile.css e formatterà il documento secondo quelle. 2) Fogli di stile interni Un foglio di stile interno dovrebbe essere usato quando un singolo documento ha uno stile unico. E' possibile definirlo nella sezione head usando l'elemento <style>: <head> <style type="text/css"> hr {color:sienna} p {margin-left:20px} body {background-image:url("images/back40.gif")} </style> </head> Il browser leggerà le definizioni di stile lì elencate e formatterà il documento secondo quelle. 3) Stili inline Con lo stile inline si perdono praticamente tutti i vantaggi introdotti tramite i fogli di stile; va usato dunque solo nel caso remoto in cui uno stile particolare vada applicato ad un singolo elemento. Per utilizzare gli stili inline bisogna utilizzare l'attributo style disponibile in tutti gli elementi HTML: <p style="color:sienna;margin-left:20px">This is a paragraph.</p> Linguaggio CSS Vediamo adesso tutta la serie di proprietà utilizzabili nei CSS suddivise per categorie. 7 Linguaggio CSS 8 Proprietà del Background Le proprietà CSS del background definiscono gli effetti sullo sfondo di ogni elemento Proprietà Descrizione Valori background La proprietà “riassuntiva” per mettere tutte le background-color impostazioni in un'unica dichiarazione. background-image background-repeat background-attachment background-position backgroundattachment Imposta se una immagine di sfondo è fissa oppure si muove durante lo scrolling. scroll fixed background-color Imposta il colore di sfondo color-rgb color-hex color-name transparent background-image Imposta l'immagine di sfondo url(URL) none background-position Imposta la posizione iniziale dell'immagine di sfondo. top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos background-repeat Decide se l'immagine di sfondo sarà ripetuta a repeat riempimento oppure no. repeat-x repeat-y no-repeat Linguaggio CSS Proprietà del testo Le proprietà CSS del testo definiscono come il testo sarà visualizzato TextColor La proprietà color è utilizzata per impostare il colore del testo. Il colore può essere impostato da: • name: definisce il nome di un colore, come "red" • RGB: specifica un valore RGB, come "rgb(255,0,0)" • Hex: specifica un valore esadecimale, come "#ff0000" Il valore di default per una pagina è specificato nell'elemento body body {color:blue} h1 {color:#00ff00} h2 {color:rgb(255,0,0)} Text Alignment La proprietà text-align è utilizzata per impostare l'allineamento orizzontale del testo, che può essere centrato, allineato a destra, a sinistra o giustificato. h1 {text-align:center} p.date {text-align:right} p.main {text-align:justify} Text Decoration La proprietà text-decoration è utilizzata per rimuovere decorazioni dal testo, come sottolineature (nei link, ad esempio) o altro. a {text-decoration:none} Può inoltre essere utilizzata (ovviamente) per la decorazione del testo h1 h2 h3 h4 {text-decoration:overline} {text-decoration:line-through} {text-decoration:underline} {text-decoration:blink} 9 Linguaggio CSS 10 Non è comunque raccomandato sottolineare testo che non sia un link, per non confondere l'utente. Text Transformation La proprietà text-transform è utilizzata per specificare lettere maiuscole a minuscole in un testo. Può essere utilizzata, ad esempio, per modificare tutte le parole in minuscolo o mettere tutte le parole con iniziale maiuscola. p.uppercase {text-transform:uppercase} p.lowercase {text-transform:lowercase} p.capitalize {text-transform:capitalize} Text Indentation La proprietà text-indent è utilizzata per specificare l'indentazione della prima linea di un testo. p {text-indent:50px} Proprietà CSS per il testo Proprietà Descrizione Valori color Imposta il colore del testo color direction Imposta la direzione del testo ltr rtl line-height Imposta la distanza tra le linee normal number length % letter-spacing Regola lo spazio tra i caratteri normal length text-align Allineamento del testo left right center justify textdecoration Decorazione del testo none underline overline line-through blink text-indent Indenta la prima linea di testo di un elemento length Linguaggio CSS 11 % text-shadow none color length text-transform Modifica le lettere in un testo none capitalize uppercase lowercase unicode-bidi normal embed bidi-override vertical-align Imposta l'allineamento verticale white-space word-spacing baseline sub super top text-top middle bottom text-bottom length % normal pre nowrap Regola lo spazio tra le parole normal length Linguaggio CSS 12 CSS Font Queste proprietà CSS definiscono tutte le caratteristiche relative ai font. CSS Font Families Nei CSS, ci sono due tipi di nomi per le famiglie di font: • generic family: un gruppo di famiglie di font con un look simile (Come “Serif” o “Monospace”) • font family: una specifica famiglia di font (come "Times New Roman" o "Arial") Generic family Font family Descrizione Serif Times New Roman Georgia I font Serif sone “aggraziati” Sans-serif Arial Verdana Courier New Lucida Console I font "Sans Serif" (Sans significa “Senza”) utilizzano caratteri senza grazie. Monospace Tutti i caratteri monospace hanno la stessa larghezza. Font Family La famiglia di font di un testo viene impostata con la proprietà font-family. Questa può contenere diversi nomi di font come meccanismo “fallback”, nella speranza cioè che almeno uno di questi sia presente nel sistema ospite. p{font-family:"Times New Roman",Georgia,Serif} Font Style La proprietà font-style è utilizzata per specificare il testo corsivo, tramite tre valori: • normal: il testo viene mostrato normalmente • italic: il testo viene mostrato in corsivo • oblique: testo obliquo Linguaggio CSS 13 p.normal {font-style:normal} p.italic {font-style:italic} p.oblique {font-style:oblique} Font Size La proprietà font-size definisce la dimensione del testo. Essere in grado di modificare la dimensione del testo è cruciale nello web design moderno. La dimensione del testo può essere assoluta o relativa: Dimensione assoluta: • imposta il testo ad una dimensione specifica • non permette all'utente di cambiare la dimensione del testo in tutti i browser Dimensione relativa: • Imposta il testo ad una dimensione relativa agli elementi circostanti • permette all'utente di cambiare la dimensione del testo in tutti i browser Se non si specifica una dimensione precisa, la dimensione di default per il testo normale e 16px (16px = 1em). Impostare la dimensione del testo utilizzando i pixel Impostare la dimensione del testo tramite i pixel permette un controllo completo sulla dimensione del testo: h1 {font-size:40px} h2 {font-size:30px} p {font-size:14px} L'esempio qui sopra permette a tutti i maggiori browser (tranne Internet Explorer) di ridimensionare il testo, utilizzando lo zoom. Impostare la dimensione del testo utilizzando Em Per evitare i problemi citati con Internet Explorer, molti sviluppatori preferiscono utilizzare gli em al posto dei pixel. L'unista di misura em della dimensione è quella raccomandata dal consorzio W3C. Linguaggio CSS 14 1em è uguale alla dimensione attuale del font e la dimensione di default dei browser abbiamo visto essere 16px, quindi la dimensione reale può essere semplicemente calcolata tramite la formula: pixels/16=em h1 {font-size:2.5em} /* 40px/16=2.5em */ h2 {font-size:1.875em} /* 30px/16=1.875em */ p {font-size:0.875em} /* 14px/16=0.875em */ Comunque, pur essendo questa la soluzione standard, presenta ancora problemi in Internet Explorer, a causa di un ridimensionamento non proporzionale nello zoom. Utilizzare una combinazione di percentuali e Em La soluzione per far funzionare bene “anche” IE è quella di impostare una dimensione percentuale nell'elemento body: body {font-size:100%} h1 {font-size:2.5em} h2 {font-size:1.875em} p {font-size:0.875em} Questo codice funziona finalmente bene ovunque, anche con zoom e resize. Provare per credere! Tutte le proprietà CSS per i font Proprietà Descrizione Valori font Proprietà “riassuntiva” font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar inherit font-family Specifica la font family per il testo family-name generic-family Linguaggio CSS 15 inherit font-size Specifica la dimensione del font per il testo xx-small x-small small medium large x-large xx-large smaller larger length % inherit font-style Specifica lo stile del font per il testo normal italic oblique inherit font-variant font-weight normal small-caps inherit Specifica lo spessore del font per il testo normal bold bolder lighter 100 200 300 400 500 600 700 800 900 inherit Linguaggio CSS 16 CSS Box Model Tutti gli elementi HTML possono essere considerate come scatole (box). Nei CSS il termine “Box Model” viene utilizzata per parlare di design e layout. Per impostare la giusta dimensione agli elementi in tutti i browser devi capire come funziona il Box Model. La figura sotto fa vedere come le proprietà margin, border e padding abbiano influenza nella dimensione (altezza e larghezza) di ogni elemento. Descriviamo ognuna delle parti: • Margin: realizza un'area intorno al bordo, non ha un colore di background ed è completamente trasparente • Border: il bordo che racchiude il padding e il content. Il suo colore è influenzato dal colore di background del box • Padding: realizza un'area intorno al content e come il border ha il suo colore è influenzato dal colore di background del box • Content: il contenuto del box, dove appaiono testo e immagini. Quando si specificano le dimensioni di un elemento tramite i CSS, si specifica solo la dimensione del content. Per conoscere la dimensione completa dell'elemento (box), bisogna anche aggiungere la dimensione del padding, del border e del margin. Vediamo un esempio a proposito: width:250px; padding:10px; border:5px solid gray; margin:10px; Qual è la dimensione totale del box? Linguaggio CSS 17 CSS Border Le proprietà CSS del bordo definiscono appunto il bordo attorno ad un elemento e permettono di specificarne lo stile e il colore. Border Style La proprietà border-style specifica quale tipo di bordo deve essere visualizzato. Inoltre nessuna delle altre proprietà del bordo avrà effetto finché la proprietà border-style è impostata. Valori per la proprietà border-style: • none: nessun bordo • dotted: bordo punteggiato • dashed: bordo a trattini • solid: bordo solido • double: due bordi. La larghezza dei due bordi sono le stesse del valore border-width • groove: Definisce un bordo 3D scanalato. L'effetto dipende dalla proprietà border-color • ridge: Definisce un bordo 3D increspato. L'effetto dipende dalla proprietà border-color • inset: Definisce un bordo 3D intarsiato. L'effetto dipende dalla proprietà border-color • outset: Definisce un bordo 3D intarsiato verso l'esterno. L'effetto dipende dalla proprietà border-color Linguaggio CSS 18 Border Width La proprietà border-width imposta la larghezza del bordo; questa può essere impostata in pixel o tramite uno dei tre valori predefiniti: thin, medium, thick. p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; } Border Color La proprietà border-color property viene utilizzata per impostare il colore del bordo. Il colore può essere impostato tramite: • name: definisce il nome di un colore, come "red" • RGB: specifica un valore RGB, come "rgb(255,0,0)" • Hex: specifica un valore esadecimale, come "#ff0000" Inoltre, è possibile impostare il colore al valore “transparent” p.one { border-style:solid; border-color:red; } p.two { border-style:solid; border-color:#98bf21; } In CSS è possibile specificare bordi diversi per lati diversi p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; } Linguaggio CSS 19 La proprietà border-style può prendere da 1 a 4 valori: 1. border-style:dotted; ◦ Tutti i bordi dotted 2. border-style:dotted solid; ◦ ◦ top e bottom dotted right e left solid 3. border-style:dotted solid double; ◦ top dotted ◦ right e left solid ◦ bottom double 4. border-style:dotted solid double dashed; ◦ top dotted ◦ right solid ◦ bottom double ◦ left dashed Border, la proprietà riassuntiva Come si è visto dagli esempi precedenti, ci sono molte proprietà relative ai bordi. Per semplificare ed accorciare il codice, esiste la proprietà generale border, riassuntiva di tutte le altre: border:5px solid red; Con le proprietà nell'ordine: 1. width 2. style 3. color Tutte le proprietà CSS per i bordi Proprietà Descrizione Valori border Proprietà “riassuntiva” border-width border-style border-color border-bottom Proprietà “riassuntiva” per il bottom border-bottom-width border-bottom-style Linguaggio CSS 20 border-bottom-color border-bottom-color Colore del bordo inferiore border-color border-bottom-style Stile del bordo inferiore border-style border-bottomwidth Larghezza del bordo inferiore border-width border-color Colore del bordo color_name hex_number rgb_number transparent inherit border-style Stile del bordo none hidden dotted dashed solid double groove ridge inset outset inherit border-width Spessore del bordo thin medium thick length inherit Linguaggio CSS 21 CSS Outlines Un outline è una linea che viene disegnata intorno agli elementi, fuori dai bordi, per evidenziare ancor più un elemento Proprietà Descrizione Valori outline Proprietà “riassuntiva” outline-color outline-style outline-width outline-color Imposta il colore dell'outline color invert outline-style Imposta lo stile dell'outline none dotted dashed solid double groove ridge inset outset outline-width Imposta la larghezza dell'outline thin medium thick length Linguaggio CSS 22 CSS Margin Le proprietà CSS dei margini definiscono lo spazio attorno agli elementi. Il margine rappresenta un area rettangolare fuori dal bordo di un elemento, non ha un colore di sfondo ed è completamente trasparente. Anche qui abbiamo top, bottom, right e left margin che possono essere cambiati separatamente oppure impostati assieme con la proprietà riassuntiva margin. È inoltre possibile specificare valori negativi per sovrapporre i contenuti. Possibili valori per il margine sono: Valore Descrizione auto Impostazione decisa dal browser length Margine fisso (in pixels, pt, em, etc.) % Margine percentuale Vediamo un esempio: margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; Tutte le proprietà CSS sui margini Proprietà Descrizione Valori margin Proprietà “riassuntiva” margin-top margin-right margin-bottom margin-left margin-bottom Margine inferiore auto length % margin-left Margine sinistro auto length % margin-right Margine destro auto length % margin-top Margine superiore auto length % Linguaggio CSS 23 CSS Padding Le proprietà CSS sul padding definiscono lo spazio fra il contenuto e il bordo di un elemento. Il padding viene influenzato dal colore di background di un elemento e analogamente a Border e Padding, esiste la proprietà riassuntiva Margin. Possibili valori per i margini sono: Valore Descrizione length Padding fisso (in pixels, pt, em, etc.) % Padding percentuale Vediamo un esempio: padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; Tutte le proprietà CSS sul Padding Proprietà Descrizione Valori padding Proprietà “riassuntiva” padding-top padding-right padding-bottom padding-left paddingbottom Padding inferiore length % padding-left Padding sinistro length % padding-right Padding destro length % padding-top Padding superiore length % Linguaggio CSS 24 CSS List Le proprietà CSS per le liste (ordinate o no) permettono all'utente (del linguaggio CSS, che sarebbe lo sviluppatore web..) di modificare a piacimento i numeri o i pallini che fanno da segnaposto per i vari item della lista, usando qualsivoglia carattere (o sequenza di) fino ad utilizzare una immagine. In HTML ci sono due tipi di liste: • Liste non ordinate, dove gli item sono marcati con pallini, tondini, quadratini o freccette • Liste ordinate, dove gli item sono ordinati con numeri o lettere. È possibile specificare il tipo di marcatore per un item della lista tramite la proprietà list-styletype. Vediamo un esempio: ul.circle {list-style-type:circle} ul.square {list-style-type:square} ol.upper-roman {list-style-type:upper-roman} ol.lower-alpha {list-style-type:lower-alpha} Liste non ordinate, possibili valori Valore Descrizione none Nessun marker disc Default. Disco circle Cerchio square Quadrato Liste ordinate, possibili valori Valore Descrizione none Nessun marker circle cerchio disc disco square quadrato armenian Numero armeno Linguaggio CSS 25 decimal Numero decimale decimal-leading-zero Numero decimale con zero iniziale (01, 02, 03, etc.) georgian Numero Georgiano (an, ban, gan, etc.) lower-alpha Lettere minuscole (a, b, c, d, e, etc.) lower-greek Lettere greche minuscole (alpha, beta, gamma, etc.) lower-latin Lettere minuscole (a, b, c, d, e, etc.) lower-roman Numeri romani minuscoli (i, ii, iii, iv, v, etc.) upper-alpha Lettere maiuscole (A, B, C, D, E, etc.) upper-latin Lettere latine minuscole (A, B, C, D, E, etc.) upper-roman Numeri romani maiuscoli (I, II, III, IV, V, etc.) Posizionamento della lista La proprietà list-style-position definisce l'indentazione di una lista: "outside" è il valore di default, mentre "inside" indenta maggiormente gli items ul.inside {list-style-position:inside} ul.outside {list-style-position:outside} È inoltre possibile utilizzare una immagine come marker per gli item della lista: ul { list-style-image:url('arrow.gif'); } La proprietà riassuntiva List È possibile specificare in un'unica proprietà riassuntiva tutte le proprietà delle liste. La proprietà si chiama list-style e i suoi valori devono rispettare il seguente ordine: 1. list-style-type 2. list-style-position 3. list-style-image list-style:square inside; Linguaggio CSS 26 Tutte le proprietà CSS per le liste Proprietà Descrizione Valori list-style Proprietà “riassuntiva” list-style-type list-style-position list-style-image inherit list-style-image Imposta un immagine come marker URL none inherit list-style-position Specifica la posizione dei marker rispetto al testo inside outside inherit list-style-type Specifica il tipo di marker none disc circle square decimal decimal-leading-zero armenian georgian lower-alpha upper-alpha lower-greek lower-latin upper-latin lower-roman upper-roman inherit Linguaggio CSS 27 CSS Table Le proprietà CSS per le tabella permettono di modificare il layout delle tabelle. Vediamole tutte: Proprietà Descrizione Valori border-collapse Imposta se i bordi delle celle sono uniti a formare il bordo unico della tabella oppure no. collapse separate border-spacing Imposta la distanza tra le celle (solo per collapse=”separate) length length caption-side Imposta la posizione dell'etichetta della tabella top bottom left right empty-cells Imposta se mostrare o no le celle vuote (solo per collapse=”separate) show hide table-layout Imposta l'algoritmo da usare per la visualizzazione della tabella auto fixed Linguaggio CSS 28 CSS Dimension Le proprietà CSS sulle dimensioni permettono di controllare la larghezza e l'altezza degli elementi: Proprietà Descrizione Valori height Imposta l'altezza di un elemento auto length % inherit max-height Imposta l'altezza massima none length % inherit max-width Imposta la larghezza massima none length % inherit min-height Altezza minima length % inherit min-width Larghezza minima length % inherit width Larghezza di un elemento auto length % inherit Linguaggio CSS 29 CSS Classification Le proprietà CSS di classificazione permettono di controllare come visualizzare un elemento, impostano dove e se un elemento apparirà in un altro, la sua posizione relativa o assoluta e la sua visibilità. Proprietà Descrizione Valori Clear Imposta i lati di un elemento dove altri elementi float non sono permessi left right both none cursor Specifica il tipo di cursore url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help display Imposta come e se un elemento deve essere visualizzato none inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption float Imposta dove un elemento deve apparire rispetto ad un altro elemento left right none position Imposta la posizione di un elemento static relative absolute fixed Visibility Imposta se un elemento è visibile oppure no visible hidden collapse Linguaggio CSS 30 Posizionamento con CSS Le proprietà CSS di posizionamento permettono di specificare la posizione top, right, bottom, left di un elemento. Permettono inoltre di impostare la forma, inserire un elemento dentro un altro e specificare cosa deve accadere se un elemento è troppo grande per entrare in una specifica area. Proprietà Descrizione Valori bottom Imposta il margine inferiore per un elemento posizionato auto length % inherit clip Imbriglia un elemento con posizione assoluta shape auto inherit left Imposta il margine sinistro per un elemento posizionato auto length % inherit overflow Specifica cosa succede se il contenuto “sborda” da un margine. auto hidden scroll visible inherit position Specifica il tipo di posizionamento di un elemento absolute fixed relative static inherit right Imposta il margine destro per un elemento posizionato auto length % inherit top Imposta il margine superiore per un elemento posizionato auto length % inherit z-index Imposta l'ordine di “visualizzazione” degli elementi number auto inherit Linguaggio CSS 31 Pseudo-classi CSS Le pseudo-classi CSS sono utilizzate per aggiungere effetti speciali ad alcuni selettori. Vediamo la sintassi, specificando che le pseudo-classi non sono case-sensitive: selector:pseudo-class {property:value} Le classi CSS possono essere utilizzate anche con le pseudo-classi: selector.class:pseudo-class {property:value} Ad esempio, i link possono essere visualizzati in molti modi: a:link {color:#FF0000} /* unvisited link */ a:visited {color:#00FF00} /* visited link */ a:hover {color:#FF00FF} /* mouse over link */ a:active {color:#0000FF} /* selected link */ Nel caso particolare dei link bisogna utilizzare questo stesso ordine di definizione (link, visited, hover, active) per farli funzionare tutti insieme. Le pseudo-classi possono essere combinate con le classi CSS: a.red:visited {color:#00FF00} <a class="red" href="css_syntax.asp">CSS Syntax</a> Se il link viene visitato, viene visualizzato in verde. La pseudo-classe :first-child La pseudo-classe :first-child ricerca uno specifico elemento che è il primo figlio di un altro elemento. Vediamo un esempio in cui si ricerca il primo elemento <p> all'interno di ogni altro elemento. <html> <head> <style type="text/css"> p:first-child { color:blue } </style> </head> <body> <p>I am a strong man.</p> <p>I am a strong man.</p> Linguaggio CSS 32 </body> </html> Ovviamente il risultato è che la prima linea viene scritta in blue. Nel secondo esempio si ricercano i primi elementi <i> all'interno degli elementi <p> <html> <head> <style type="text/css"> p > i:first-child { font-weight:bold } </style> </head> <body> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> </body> </html> La pseudo classe CSS :lang La pseudo-classe :lang permette di specificare regole diverse per linguaggi diversi. Nell'esempio proposto, la classe definisce le virgolette per gli elementi <q> con linguaggio “no”: <html> <head> <style type="text/css"> q:lang(no) { quotes:"~" "~" } </style> </head> <body> <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p> </body> </html> Linguaggio CSS 33 Tutte le pseudo-classi CSS Pseudo nome Descrizione :active Aggiunge uno stile all'elemento attivo :first-child Aggiunge uno stile all'elemento che è il primo figlio di un altro elemento :focus Aggiunge uno stile all'elemento che ha il focus dalla tastiera :hover Aggiunge uno stile all'elemento che sorvoli col mouse :lang Aggiunge uno stile all'elemento che ha uno specifico attributo lang :link Aggiunge uno stile ad un link non visitato :visited Aggiunge uno stile ad un link visitato Linguaggio CSS 34 Pseudo-elementi CSS Gli pseudo-elementi CSS sono utilizzati per aggiungere degli effetti speciali ad alcuni selettori. La sintassi degli pseudo-elementi è: selector:pseudo-element {property:value} Inoltre, è possibile utilizzare le classi CSS in combinazione con gli pseudo-elementi: selector.class:pseudo-element {property:value} Lo pseudo-elemento :first-line Viene utilizzato per aggiungere uno stile speciale alla prima linea di testo di un selettore: p:first-line {color:#0000ff;font-variant:small-caps} <p>Some text that ends up on two or more lines</p> Ovviamente questo pseudo-elemento può essere utilizzato solo con elementi block-level. Vediamo l'elenco delle proprietà supportate: • font properties • color properties • background properties • word-spacing • letter-spacing • text-decoration • vertical-align • text-transform • line-height • clear Lo pseudo-elemento :first-letter Viene utilizzata per aggiungere uno stile speciale alla prima lettera di un testo dentro ad un selettore: Linguaggio CSS 35 p:first-letter {color:#ff0000;font-size:xx-large} <p>The first words of an article...</p> Supporta le seguenti proprietà: • • • • • • • • • • • • font properties color properties background properties margin properties padding properties border properties text-decoration vertical-align (solo se float="none") text-transform line-height float clear Pseudo-elementi e Classi CSS Gli pseudo-elementi possono essere combinati con le classi CSS: p.article:first-letter {color:#ff0000} <p class="article">A paragraph in an article</p> Lo pseudo-elemento CSS :before Viene utilizzato per aggiungere contenuto prima del contenuto di un elemento. Nell'esempio si aggiunge un suono ad ogni occorrenza dell'elemento <h1>: h1:before { content:url(beep.wav) } Lo pseudo-elemento CSS :after Viene utilizzato per aggiungere contenuto dopo il contenuto di un elemento. Nell'esempio si aggiunge un suono ad ogni occorrenza dell'elemento <h1>: h1:after { content:url(beep.wav) } Linguaggio CSS 36 Tutti gli pseudo-elementi CSS Pseudo nome Descrizione :after Aggiunge un contenuto dopo un elemento :before Aggiunge un contenuto prima di un elemento :first-letter Aggiunge uno stile alla prima lettera di un testo :first-line Aggiunge uno stile alla prima linea di un testo Linguaggio CSS 37 CSS Media Types I CSS Media Types permettono di specificare come i documenti saranno presentati nei differenti media. Ogni documento può essere visualizzato in maniera differente sullo schermo, su carta, etc. Alcune proprietà dei CSS sono progettate per funzionare solo con certi media, ad esempio la proprietà “voice-family” ha senso solo su dispositivi audiometrici (aural browsers), oppure ci sono proprietò, come “font-size” che hanno senso sia su carta che su schermo, ma probabilmente con valori differenti. La regola @media La regola @media permette di utilizzare stili differenti per media differenti nello stesso foglio di stile. L'esempio qui sotto dice al browser di visualizzare un carattere Verdana di 14 px su schermo, ma di utilizzare un Times New Roman di 10px per la stampa. <html> <head> <style> @media screen { p.test {font-family:verdana,sans-serif;font-size:14px} @media print { p.test {font-family:times,serif;font-size:10px} } @media screen,print { p.test {font-weight:bold} } </style> </head> <body>....</body> </html> Elenco dei Media Types Media Type Descrizione all generico aural Sintetizzatori vocali braille Dispositivi braille embossed Stampanti braille handheld Palmari print stampanti projection slides screen Schermi PC tty teletypes a terminali tv TV }