· Web viewManuale CSS. Indice. Introduzione ai CSSCosa sono i fogli di stile, la sintassi CSS e...

Manuale CSS

Indice Introduzione ai CSSCosa sono i fogli di stile, la sintassi CSS e come utilizzarli Proprietà CSS per il testoCome cotrollare l'aspetto dei testi tramite le proprietà CSS. Proprietà CSS dei FontInvece di usare il tag HTML <font>, imparate a sruttare le proprietà

CSS Proprietà CSS dello sfondoPer impostare le propietà di sfondo degli oggetti nelle vostre

pagine. Proprietà CSS BorderCome definire lo stile dei bordi di un elemento. Proprietà CSS MarginIl margin è lo spazio attorno agli elementi: impariamo a sfruttarlo! Proprietà CSS di PaddingIl padding (riempimento) è lo spazio tra il bordo ed il contenuto

dell´elemento. Proprietà CSS delle ListPer controllare il modo in cui le liste vengono visualizzate. Proprietà CSS di ClassificazioneSevono a controllare come viene visualizzato un elemento. Proprietà CSS di PosizionamentoVediamo come impostare posizione di un elemento. Proprietà CSS di DimensionamentoPer modificare altezza e larghezza degli oggetti nelle

nostre pagine. Pseudo-classi CSSLe Pseudo-classi sono usate gestire parti di selettori. Pseudo-elementi CSSGli Pseudo-elementi consentono di aggiungere effetti diversi ad alcuni

selettori. Media Types CSSMedia Types permettono di specificare come sarà visualizzato un

documento in base al tipo di media.

Introduzione ai CSS Cosa sono i fogli di stile, la sintassi CSS e come utilizzarli

La sigla CSS vuol dire "Cascading Style Sheets" ovvero "Fogli di Stile a Cascata", si chiamano così perchè le regole css vengono applicate "a cascata agli elementi che compongono la pagina". Ci forniscono un modo rapido e preciso (nonchè conforme agli standard del w3c) per visualizzare gli oggetti che compongono una pagina web, applicando delle semplici regole che vedremo nel corso del manuale.

Il loro punto di forza sta nella semplicità di utilizzo, e nella flessibilità che danno ai documenti prodotti. Supponiamo ad esempio di avere una pagina in cui c'è del testo che si ripete (ad esempio dentro una tabella) e di voler colorare il testo di rosso:

In HTML scriveremmo:

1. <table>2.3. <tr>4.5. <td>6. <font color="red">testo</font>7. </td>8.9.10. </tr>11.12.13. <tr>14.15. <td> <font color="red">testo</font> </td> 16.17. </tr>18.19. <tr>20.21. <td> <font color="red">testo</font> </td> 22.23. </tr>24.25. <tr>26.27. <td> <font color="red">testo</font> </td> 28.29. </tr>30.31. </table>

Possiamo ben immaginare che qualora volessimo cambiare il colore del testo, dovremmo effettuare pesanti modifiche sulle pagine. Proviamo con i CSS

1. <style>2.3. td {4.5. color: red; 6.7. } 8.9. </style> 10.11. <table>

http://www.morpheusweb.it/html/manuali/css/css_introduzione.asp

12.13. <tr>14.15. <td>testo </td> 16.17. </tr> 18.19. <tr>20.21. <td> testo</td> 22.23. </tr>24.25. <tr>26.27. <td>testo</td> 28.29. </tr>30.31. <tr>32.33. <td> testo</td> 34.35. </tr>36.37. </table>

Salta subito all'occhio che volendo cambiare il colore del testo, occorrerebbe modificare soltanto una riga di codice... inoltre un documento così prodotto è senza dubbio più piccolo e qunidi le vostre pagine saranno molto più veloci a caricarsi!

Ma i vantaggi dell'uso dei fogli di stile non si fermano qui, i CSS consentono di controllare con estrema precisione l'aspetto e la posizione dei nostri elementi, e cosa non trascurabile, tutte le proprietà css possono essere controllate lato client con JavaScript, consentendoci di cambiare ad esempio l'aspetto di un oggetto quando ci passiamo sopra con il mouse, o in base ad un evento!

Iniziamo adesso a vedere la sintassi CSS.

Sintassi CSS

La sintassi CSS è in genere composta da tre parti: uno o più Selettore separati da una virgola, una o più coppie Proprietà/Valore separate dal punto e virgola, come possiamo vedere nell'esempio:

1. selettore1, selettore2 {2.3. proprietà1: valore;4.5. proprietà2: valore;6.7. proprietà3: valore;8.9. }

Un selettore, in genere è il tag HTML che di cui vogliamo controllare le proprietà, mentre le proprietà sono gli attributi che andremo a cambiare assegnando dei valori. Esempio: modifichiamo l'aspetto dei tag di tipo span all'interno di una pagina:

1. span { 2.

3. font-family: verdana;4.5. text-align: right;6.7. font-weight: bold;8.9. color: #ffff00;10.11. }

Il selettore di classe

Con il selettore di classe, è possibile definire stili diversi per lo stesso dipo di elemento HTML. Per esempio se volessimo due oggetti di tipo span, uno con il testo rosso ed uno con il testo blu, potremmo farlo nel seguente modo:

1. span.red {2.3. font-family: verdana;4.5. text-align: left;6.7. font-weight: bold;8.9. color: red;10.11. }12.13. span.green {14.15. font-family: verdana;16.17. text-align: left;18.19. font-weight: bold;20.21. color: green;22.23. }

Poi utilizziamo i due attributi di classe nel nostro documento HTML:

1. <span class="green">Questo � un tag <span> formattato con CSS</span>2.3. <span class="red">Questo � un tag <span> formattato con CSS</span>

Se omettiamo il nome del selettore, possimao utilizzare la classe per diversi tipi di elemento nelle nostre pagine:

1. .green {2.3. font-family: verdana;4.5. text-align: left;6.7. font-weight: bold;8.9. color: green;10.11. }

Applichiamo quindi il nostro selettore a degli elementi della nostra pagina

1. <h1 class="green">H1 di colore verde </h1>2.3. <h2 class="green">H2 di colore verde </h2>4.5. <a class="green" href="#" >link di colore verde </a>

Il selettore ID

Un ID è una proprietà che tutti gli elementi HTML hanno, che serve ad identificare un elemento della nostra pagina in modo univoco. Questo vuol dire che non possiamo avere due elementi con lo stesso id.Dal punto di vista dei CSS, possiamo sfruttare l'id degli elementi per caratterizzarne l'aspetto.

1. h1#capitolo12.3. {4.5. font-family: verdana;6.7. text-align: right;8.9. font-weight: bold;10.11. color: green;12.13. }14.15. h1#capitolo216.17. {18.19. font-family: verdana;20.21. text-align: right;22.23. font-weight: bold;24.25. color: red;26.27. }

Abbiamo creato due stili diversi per due capitoli del nostro testo, applichiamoli.

1. <h1 id="capitolo1">H1 di colore verde </h1>2.3. <p>Il titolo di questo paragrafo è verde</p>4.5.6. <h1 id="capitolo2">H2 di colore rosso </h1>7.8. <p>Il titolo di questo paragrafo è rosso </p> 9.10.

Commenti CSSPossiamo inserire dei commenti nei nostri fogli di stile per ricordarci cosa avevamo in mente

quando li abbiamo creati, e per renderne più chiara la lettura.I commenti sono del testo racchiuso tra i tag /* e */

1. /* Gestione capitoli*/2.3. h1#capitolo24.5. {6.7. font-family: verdana;8.9. text-align: right;10.11. font-weight: bold;12.13. color: green; /*titolo verde*/ 14.15. }16.17. h1#capitolo218.19. {20.21. font-family: verdana;22.23. text-align: right;24.25. font-weight: bold;26.27. color: red; /*titolo rosso*/ 28.29. }

CSS: come utilizzarliVediamo adesso come e dove inserire i fogli di stile nelle nostre pagine. Fondamentalmente abbiamo tre modi diversi per inserire un foglio di stile:

1. interni2. esterni3. inline

Fogli di stile interni

Un foglio di stile interno, è inserito direttamente nella pagina HTML in cui viene utilizzato. E' comodo quando ne abbiamo bisogno in poche pagine, e quando abbiamo bisogno di gestire degli stili solo per la pagina in cui mettiamo il codice CSS.Vediamo di seguito un esempio di realizzazione di stile interno in cui inseriamo alcuni elementi di cui potremo avere bisogno nella realizzazione di una pagina.

1. <html>2.3. <head>4.5. <title>Demo CSS</title>6.7. <style>8.9. h1 {10.

11. font-family: verdana;12.13. text-align: left;14.15. font-weight: bold;16.17. color: green;18.19. text-indent: 10px;20.21. font-size: 14px;22.23. }24.25. #contenitore {26.27. width: 400px;28.29. border-top: 2px dotted #990066;30.31. padding: 10px;32.33. }34.35. p {36.37. font-family: verdana;38.39. text-align: left;40.41. font-weight: bold;42.43. color: black;44.45. text-indent: 20px;46.47. font-size: 11px;48.49. text-align: justify;50.51. }52.53. p:first-letter {54.55. font-size: 18px;56.57. color: green;58.59. } 60.61. img {62.63. border: 2px dotted #990066;64.65. padding: 10px;66.67. margin-left: 20px;68.69. margin-top: 20px;70.71. }72.73. </style> 74.75. </head>

76.77. <body>78.79. <h1>Le margherite </h1>80.81. <div id="contenitore">82.83. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras

placerat, urna a consectetuer commodo, enim neque mollis neque, non semper pede massa a orci. Integer interdum. Donec ligula sapien, mollis ut, scelerisque quis, commodo ac, arcu. </p>

84.85. <img src="demo5.jpg">86.87. </div>88.89. </body>90.91. </html>92.

Fogli di stile esterni

Possiamo inserire il nostro codice CSS in un file esterno alla pagina e poi referenziarlo all'interno delle nostre pagine. Questo risulta comodo quando abbiamo bisogno di utilizzare gli stessi stili all'interno di pagine diverse, in quanto ci consente di modificare l'aspetto di tutte le pagine in cui viene utilizzato il foglio di stile cambiando il codice di un unico file. Occorre inserire un tag <link> nella sezione head delle nostre pagine:Il file contenente il codice CSS avrà ".css" come estensione. Vediamo l'esempio precedente riscritto con l'utilizzo dei css esterni.

1.2. <html>3.4. <head>5.6. <title>Demo CSS</title>7.8. <link rel="stylesheet" type="text/css" href="demo6.css" />9.10. </head>11.12. <body>13.14. <h1>Le margherite </h1>15.16. <div id="contenitore">17.18. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras


19.20. <img src="demo6.jpg">21.22. </div>23.24. </body>25.26. </html>27.

Mentre il file demo6.css conterrà esclusivamente il codice css, senza i tag <style>

1. h1 {2.3. font-family: verdana;4.5. text-align: left;6.7. font-weight: bold;8.9. color: green;10.11. text-indent: 10px;12.13. font-size: 14px;14.15. }16.17. #contenitore {18.19. width: 400px;20.21. border-top: 2px dotted #990066;22.23. padding: 10px;24.25. }26.27. p {28.29. font-family: verdana;30.31. text-align: left;32.33. font-weight: bold;34.35. color: black;36.37. text-indent: 20px;38.39. font-size: 11px;40.41. text-align: justify;42.43. }44.45. p:first-letter {46.47. font-size: 18px;48.49. color: green;50.51. } 52.53. img {54.55. border: 2px dotted #990066;56.57. padding: 10px;58.59. margin-left: 20px;60.61. margin-top: 20px;62.

63. }

Stili Inline

Un'altre possibilità per inserire del codice css nelle nostre pagine è applicarli ai singoli tag html. In questo caso verra cambiato l'aspetto del solo tag a cui viene applicato lo stile. Vediamo un esempio

1. <html>2.3. <head>4.5. <title>Demo CSS</title>6.7. <link rel="stylesheet" type="text/css" href="demo6.css" />8.9. </head>10.11. <body>12.13. <h1>Le margherite </h1>14.15. <div id="contenitore">16.17. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras


18.19. <img src="demo7.jpg">20.21. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras


22.23. <img src="demo7.jpg" style="background-color:#00CC33"> 24.25. </div>26.27. </div> 28.29. </body>30.31. </html>

Abbiamo cambiato lo stile dell'immagine <img src="demo7.jpg" style="background-color:#00CC33"> aggiungendo un colore di sfondo esclusivamente per l'immagine in questione, mentre le altre immagini mantengono lo stile di default.

Proprietà CSS per il testoCome cotrollare l'aspetto dei testi tramite le proprietà CSS.

Testo CSS

Vediamo come prima cosa una tabella delle proprietà con la descrizione ed i vaolri ammissibili per la proprietà. Vedremo in seguito le varie proprietà in dettaglio, con degli esempi esplicatici per ognuna.

Proprietà:

Proprieta Descrizione Valori possibili Esempi

color Colore del testo un colore

direction Direzione del testo ltrrtl

letter-spacing Lo spazio tra le lettere di ciascuna parola normallunghezza (px, em, pt)

text-align Definisce l'allineamento del testo leftrightcenterjustify

text-decoration La decorazione lel testo (sottolineato, barrato etc...)

noneunderlineoverlineline-throughblink

text-indent Indenta la prima riga di un paragrafo lunghezzapercentuale

text-shadow Per definire l ’ombra del testo nonecolorelunghezza

text-transform Applica delle trasformazioni alle lettere nonecapitalizeuppercaselowercase

white-space Definisce come vengono gestiti gli spazi bianchi

normalprenowrap

word-spacing Per impostare lo spazio tra due parole diverse

normallunghezza

color

Serve ad impostare il colore di un testo. Possiamo inserire i valori in tre diversi formati: mediante il nome (es. red), mediante il valore esadecimale del colore (es. #ff0000) oppure tramite l'rgb (es. rgb(255,0,0)).

Esempio

1. .rosso { 2.3. color: red; 4.5. /*6.7. oppure8.9. color: #ff0000;10.

11. o infine12.13. color: rgb(255,0,0);14.15. */ 16.17. } 18.19. .verde {20.21. color: green; 22.23. } 24.25. .blue {26.27. color: blue; 28.29. }

direction

Serve ad impostare la direzione del testo, i valori possibili sono ltr (Da sinistra a destra) e rtl (Da destra a sinistra). Tipicamente viene usato per visualizzare del testo in lingue che hanno il senso di lettura al contrario dal nostro.

Esempio

1. .DestraSinistra { 2.3. direction: rtl;4.5. } 6.7. .SinistraDestra { 8.9. direction: ltr;10.11. }

letter-spacing

Aumenta o diminuisce lo spazio tra i caratteri possiamo dare un valore in lunghezza (px, em, pt) oppure il default (normal). E' anche possibile dare dei valori negativi.

Esempio

1. .piuSpaziato { 2.3. letter-spacing: 10px;4.5. }6.7. .menoSpaziato { 8.9. letter-spacing: -1px;10.11. } 12.

13. .normale{ 14.15. letter-spacing: normal; 16.17. }

text-align

Definisce l'allineamento del testo.

Valori possibili sono

left (a sinistra) center (centrato) right (a destra) justify (giustificato)

Esempio

1. span{2.3. width:300px;4.5. border:1px solid #000000;6.7. padding:10px;8.9. margin:2px;10.11. } /*definisco lo stile dei contenitori di testo*/ 12.13. .sinistra { 14.15. text-align:left;16.17. }18.19. .centro { 20.21. text-align:center;22.23. } 24.25. .destra{ 26.27. text-align:right;28.29. }30.31. .giustificato{ 32.33. text-align:justify;34.35. }

text-decorationServe per decorare il testo.


none (Testo normale) underline (Testo sottolineato) overline (Testo con una riga sopra) line-through (Testo barrato) blink (Testo lampeggiante, evitatelo...)

Esempio

1. a.linkSpeciale {2.3. text-decoration: none;4.5. }6.7. a.linkSpeciale:hover {8.9. text-decoration: underline overline;10.11. }12.13. a.linkSpeciale:active {14.15. text-decoration: line-through;16.17. }

text-indent Indenta la prima linea di testo in un elemento.Valori possibili sono:

lunghezza (definisce una indentazione fissa in pixel, o punti) percentuale (in percentuale rispetto all'elemento contenitore)

Esempio

1. p {2.3. width:300px;4.5. border:1px solid #000000;6.7. margin:2px;8.9. position: relative10.11. }12.13. .10pixel { 14.15. text-indent: 20px;16.17. }18.19. .30percento { 20.21. text-indent: 30%;

22.23. }24.25. .meno10pixel { 26.27. text-indent: -10px;28.29. }

text-shadowPer definire l ’ombra del testoValori possibili sono:

none colore lunghezza

Esempio

1. p{2.3. text-shadow: Navy 10px 10px, Red 10px 10px;4.5. }

text-transformApplica delle trasformazioni alle lettereValori possibili sono:

none (Testo normale) capitalize (Tutte le parole iniziano con una maiuscola) uppercase (Tutto maiuscolo) lowercase (Tutto minuscolo)

Esempio

1. span{2.3. width:300px;4.5. border:1px solid #000000;6.7. padding:10px;8.9. margin:2px;10.11. } /*definisco lo stile dei contenitori di testo*/ 12.13. .nessuno {14.15. text-transform:none;16.17. }18.19. .primeMaiuscole 20. {21.22. text-transform:capitalize;23.

24. }25.26. .maiuscolo27. {28.29. text-transform:uppercase;30.31. }32.33. .minuscolo34. {35.36. text-transform:lowercase;37.38. }

white-spaceViene usato per definire come devono essere gestiti gli spazi bianchi. Valori possibili sono:

normal (Gli spazi sono ignorati dal browser) nowrap (Gli spazi vengono preservati, come se si trattase di un tag <pre>) pre (Il testo non va mai a capo, ma continua nella stessa linea fino a quando non incontriamo

un tag <br>)

Esempio

1. p {2.3. width:300px;4.5. border:1px solid #000000;6.7. padding:10px;8.9. margin:2px;10.11. } /*definisco lo stile dei contenitori di testo*/ 12.13. .aCapo {14.15. white-space: normal;16.17. }18.19. .MaiACapo {20.21. white-space: nowrap;22.23. }

word-spacing

Incrementa o diminuisce lo spazio tra le parole

Valori possibili sono:

normal (Spazio normale tra le parole)

lunghezza (uno spazio fissato in px, em, pt) pre

Esempio

1. p {2.3. width:300px;4.5. border:1px solid #000000;6.7. padding:10px;8.9. margin:2px;10.11. } /*definisco lo stile dei contenitori di testo*/ 12.13. .normale { 14.15. word-spacing: normal;16.17. }18.19. .20pixel { 20.21. word-spacing: 20px22.23. }24.25. .meno5pixel { 26.27. word-spacing: -5px28.29. }

Proprietà CSS dei Font Invece di usare il tag HTML <font>, imparate a sruttare le proprietà CSS

Definiscono il carattere nel testo.

CSS FontsConsentono di cambiare la famiglia di caratteri, la dimensione ed altro.

Proprieta Descrizione Valori possibili Esempi

font Consente di impostare tutte le proprietà del carattere in una sola dichiarazione, è comodo ma poco leggibile.

font-family Per specificare uno o più font per l'elemento che si vuole caratterizzare.

Nome del font

font-size Imposta la dimensione del carattere. E' possibile specificare una lunghezza oppure una classe di dimensione.

smallerxx-smallx-smallsmallmediumlargex-large

http://www.morpheusweb.it/html/manuali/css/css_font.asp

xx-largelargerlunghezzapercentuale

font-size-adjust Preserva l’altezza del carattere. nonenumero

font-stretch Condensa o espande un font. normalnarrowerwiderexpandedsemi-expandedextra-expandedcondensedultra-expandedsemi-condensedultra-condensedextra-condensed

font-style Imposta lo stile (corsivo, obliquo oppure noemale)

normalitalicoblique

font-variant Mostra il carattere normale o maiuscoletto normalsmall-caps

font-weight Grassetto. Possiamo dare dei valori per gradazione di grassetto utilizzando un intervallo da 100 a 900 (con incrementi di 100)

normallighterboldbolder100-900

fontConsente di impostare tutte le proprietà del carattere in una sola dichiarazione, è comodo ma poco leggibile.

Esempio

1. span {2.3. font: small-caps italic bold verdana 12px ultra-condensed; 4.5. }

Vedremo in seguito il dettaglio sui valori utilizzati.

font-familyFornisce una lista caratteri, i cui elementi sono separati da virgole, per gli oggetti della pagina.Possiamo iserire dei nomi di font come "verdana, "arial", etc.

Esempio

1. span {2.3. font-family: verdana, courier;

4.5. }

font-size

Imposta la dimensione del carattere.


xx-small x-small small medium large x-large xx-large smaller larger valore in lunghezza o percentuale

Esempio

1. span {2.3. font-size: 11px;4.5. }6.

font-size-adjust

La proprietà font-size-adjust, specifica un aspect value (il rapporto tra l’altezza della "x" minuscola e l’altezza del "font-size")E' supportato solo dai browser basati su geko .


none un numero

Esempio

1. span {2.3. font-size-adjust: 0.62;4.5. }

font-stretch

Condensa o espande il font.Valori possibili sono:

normal wider narrower condensed ultra-condensed extra-condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded

Esempio

1. span {2.3. font-stretch: ultra-condensed;4.5. }

font-style

Imposta lo stile del carattere.


normal italic (corsivo) oblique (obliquo)

Esempio

1. span {2.3. font-style: italic;4.5. }

font-variant

Il testo a cui applico lo stile viene stampato in maiuscoletto.


normal small-caps (Maiuscoletto)

Esempipo

1. span {2.3. font-variant: small-caps;4.5. }

font-weight

Il testo a cui applico lo stile viene stampato in grassetto.


normal lighter (Più grassetto) bold (Grassetto) bolder (Più grassetto) valori da 100-900 (Variazioni di grassetto)

Esempio

1. span {2.3. font-weight: bolder;4.5. }

Proprietà CSS dello sfondo Per impostare le propietà di sfondo degli oggetti nelle vostre pagine.

CSS BackgroundTramite la propriet� Background dei CSS, possiamo controllare lo sfondo degli elementi, sia per quanto riguarda i colori sia per quanto riguarda le immagini.

Proprietà:

Proprieta Descrizione Valori Esempi

background Per impostare tutte le proprietà dello sfondo

background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position

background-attachment

Dice se l’immagine di sfondo è fissa o scrolla con la pagina

scrollfixed

background-color Colore di sfondo di un elemento coloretransparent

http://www.morpheusweb.it/html/manuali/css/css_sfondo.asp

background-image Imposta un’immagine come sfondo urlnone

background-position

La posizione dell’immagine top lefttop centertop rightcenter leftcenter centercenter rightbottom leftbottom centerbottom rightx-perc y-percx-pos y-pos

background-repeat Se un’immagine deve essere ripetuta oppure no

repeatrepeat-xrepeat-yno-repeat

Vediamole una alla volta:

backgroundPermette impostare tutte le proprietà dello sfondo.Valori possibili sono

background-color background-image background-repeat background-attachment background-position

Esempio

1. .ConSfondo2. { 3.4. width:300px;5.6. height:200px;7.8. background: #ffffff url(demo5.jpg) repeat-y9.10. }

background-attachmentPermette di dire se lo sfondo scrolla con la pagina oppure no.


scroll (Lo sfondo si muove con il resto della pagina) fixed (Lo sfondo è fisso)

Esempio

1. .ConSfondoCheScrolla 2. { 3.4. width:300px;5.6. height:200px;7.8. overflow:auto;9.10. background-image: url(demo5.jpg); 11.12. background-attachment: scroll;13. 14.15. }

background-colorPermette di impostare il colore di sfondo di un elemento HTML.Valori possibili sono

un colore ( Può essere un nome (red), in valore rgb (rgb(255,0,0)), o un numero esadecimale (#ff0000) )

transparent (Se lo sfondo è trasparente)

Esempio

1. .ConColoreDiSfondo2. { 3.4. width:200px;5.6. height:200px;7.8. background-color: red;9.10. }

background-imageServe ad impostare l’immagine di sfondo.Valori possibili sono

un url (Il percorso del’immagine) none (Se non si vuole un’immagine di sfondo)

Esempio

1. .ConImmagineDiSfondo2. { 3.4. width:300px;5.6. height:200px;7.8. background-image: url(demo5.jpg); 9.10. background-color: #ffffff11.12. }

background-positionImposta la posizione dell’immagine di sfondo.Valori possibili sono

top left top right center left center center center right bottom left bottom center bottom right x-percentuale y-percentuale (Il primo valore è la posizione orizzzontale, il secondo quello

verticale.) x-posizione y-posizione (Il primo valore è la posizione orizzzontale, il secondo quello

verticale. L’angolo in alto a sinistra è: 0 0)

Esempio

1. .ConSfondoInAlto2. { 3.4. width:300px;5.6. height:600px;7.8. background-image: url(demo5.jpg);9.10. background-position: top left;11.12. background-repeat: no-repeat;13.14. }

background-repeatDice se e come un’immagine di sfondo sarà ripetuta. Valori possibili sono

repeat (Immagine ripetuta orizzontalmente e verticalmente ) repeat-x (Immagine ripetuta orizzontalmente) repeat-y (Immagine ripetuta verticalmente) no-repeat (L’immagine di sfondo viene visualizzata una volta soltanto)

Esempio

1. .ConSfondoRipetuto2. { 3.4. width:300px;5.6. height:600px;7.8. background-image: url(demo5.jpg);9.10. background-repeat: repeat-y;11.

12. }

Proprietà CSS Border Come definire lo stile dei bordi di un elemento. CSS BordersLe proprietà del bordo consentono di specificare lo stile, il colore e la larghezza di un elemento.Proprietà

Proprieta Descrizione Valori Esempi

border Per impostare tutte le proprietà border-widthborder-styleborder-color

border-width La larghezza di tutti i lati del bordo thinmediumthicklength

border-style Lo stile di tutti i lati del bordo nonehiddendotteddashedsoliddoublegrooveridgeinsetoutset

border-color Imposta il colore del bordo per tutti i lati color

border-top Per impostare tutte le proprietà del bordo in alto

border-top-widthborder-styleborder-color

border-top-width Larghezza del bordo in alto thinmediumthicklength

border-top-style Stile del bordo in alto border-style

border-top-color Colore del bordo in alto border-color

border-right Per impostare tutte le proprietà del bordo destro

border-right-widthborder-styleborder-color

border-right-width Larghezza del bordo a destra thinmediumthicklength

border-right-style Stile del bordo a destra border-style

http://www.morpheusweb.it/html/manuali/css/css_bordo.asp

border-right-color Colore del bordo a destra border-color

border-bottom Per impostare tutte le proprietà del bordo in basso

border-bottom-widthborder-styleborder-color

border-bottom-width

Larghezza del bordo in basso thinmediumthicklength

border-bottom-style Stile del bordo in basso border-style border-style

border-bottom-color

Colore del bordo in basso border-color

border-left Per impostare tutte le proprietà del bordo sinistro

border-left-widthborder-styleborder-color

border-left-width Larghezza del bordo a sinistra thinmediumthicklength

border-left-style Stile del bordo a sinistra border-style

border-left-color Colore del bordo a sinistra border-color

border Per impostare tutte le proprietà in una sola dichiarazione.Valori possibili sono:

border-width (lo spessore del bordo) border-style (lo stile del bordo) border-color (il colore del bordo)

Esempio

1. .ConBordo { 2.3. border: medium #000000 dashed;4.5. }

border-width Permette di impostare tutti e quattro i valori di spessore per il bordo.


thin (Bordo sottile ) medium (Bordo medio) thick (Bordo a strati spesso) lunghezza (Definisce lo spessore del bordo)

Esempio

1. .UnaImpostazione {2.3. border-width: 1px; 4.5. }6.7. .DueImpostazioni {8.9. border-width: 1px 0px;10.11. }12.13. .QuattroImpostazioni {14.15. border-width: 1px 2px 1px 2px; 16.17. }

border-style Imposta tutti stili per tutti e quattro i bordi.Valori possibili sono:

none (Nessun bordo) hidden (Bordo nascosto) dotted (Bordo puntato) dashed (Bordo tratteggiato) solid (Bordo solido) double (Definisce due bordi) groove ridge inset (Bordo 3d inset) outset (Bordo 3d outset)

Esempio

1. .TuttiTrattini {2.3. border-style: dashed;4.5. }6.7. .PuntiSolido {8.9. border-style: dotted solid;10.11. }

border-color Imposta il colore del bordo. Possiamo inserire da uno a quattro colori.Valori possibili sono:

un colore (il colore del bordo, può essere un nome, un valore rgb o esadecimale)

Esempio

1. .BordiRossi {2.3. border-color: red;4.5. }6.7. .BordiRossoBlu {8.9. border-color: blue red;10.11. }

border-top Abbreviazione per impostare tutte le proprietà del bordo in alto in una dichiarazione.Valori possibili sono:

border-top-width (lo spessore del bordo) border-top-style (lo stile del bordo) border-top-color (il colore del bordo)

Esempio

1. .ConBordoAlto { 2.3. border-top: medium #000000 dashed;4.5. }

border-top-color Il colore del bordo in alto.Valori possibili sono:


Esempio

1. .BordoAltoColorato { 2.3. border-top-color: #ff0000;4.5. }

border-top-style Lo stile del bordo in alto.Valori possibili sono:

none (Nessun bordo) hidden (Bordo nascosto)

dotted (Bordo puntato) dashed (Bordo tratteggiato) solid (Bordo solido) double (Definisce due bordi) groove ridge inset (Bordo 3d inset) outset (Bordo 3d outset)

Esempio

1. .BordoAltoPuntato { 2.3. border-top-style: dotted;4.5. }6.7. . BordoAltoTrattini { 8.9. border-top-style: dashed;10.11. }

border-top-widthImposta lo spessore del bordo in alto.Valori possibili sono:


Esempio1. .BordoAltoLargo { 2.3. border-top-width: 6px;4.5. }6.7. .BordoAltoStretto { 8.9. border-top-width: 1px;10.11. }

border-right Per impostare tutte le proprietà del bordo destro in una sola dichiarazione.Valori possibili sono:

border-right-width (lo spessore del bordo) border-right-style (lo stile del bordo) border-right-color (il colore del bordo)

Esempio

1. .ConBordoDestra { 2.3. border-right: medium #000000 dashed;4.5. }

border-right-color

Imposta il colore del bordo a destra.



Esempio

1. .BordoDestroColorato { 2.3. border-right-color: #ff0000;4.5. }

border-right-style Lo stile del bordo a destra.Valori possibili sono:


Esempio

1. .BordoDestroPuntato { 2.3. border-right-style: dotted;4.5. }6.7. . BordoDestroTrattini { 8.9. border-right-style: dashed;10.11. }

border-right-width Imposta lo spessore del bordo destro.Valori possibili sono:


Esempio

1. .BordoDestroLargo { 2.3. border-right-width: 6px;4.5. }6.7. .BordoDestroStretto { 8.9. border-right-width: 1px;10.11. }

border-bottom Per impostare tutte le proprietà del bordo in basso in una sola dichiarazione.Valori possibili sono:

border-bottom-width (lo spessore del bordo) border-bottom-style (lo stile del bordo) border-bottom-color (il colore del bordo)

Esempio

1. .ConBordoSotto { 2.3. border-bottom: medium #000000 dashed;4.5. }

border-bottom-color Imposta il colore del bordo in basso.Valori possibili sono:


Esempio

1. .BordoSottoColorato { 2.3. border-bottom-color: #ff0000;4.5. }

border-bottom-style Lo stile del bordo in basso.Valori possibili sono:

none (Nessun bordo)

hidden (Bordo nascosto) dotted (Bordo puntato) dashed (Bordo tratteggiato) solid (Bordo solido) double (Definisce due bordi) groove ridge inset (Bordo 3d inset) outset (Bordo 3d outset)

Esempio

1. .BordoSottoPuntato { 2.3. border-bottom-style: dotted;4.5. }6.7. .8. BordoSottoTrattini { 9.10. border-bottom-style: dashed;11.12. }

border-bottom-width Imposta lo spessore del bordo in basso di un elemento HTMLValori possibili sono:

thin (Bordo sottile) medium (Bordo medio) thick (Bordo a strati spesso) un valore (Definisce lo spessore del bordo )

Esempio1. .BordoSottoLargo { 2.3. border-bottom-width: 6px;4.5. }6.7. .BordoSottoStretto { 8.9. border-bottom-width: 1px;10.11.}

border-left Abbreviazione per impostare tutte le proprietà del bordo sinistro in una dichiarazione.Valori possibili sono:

border-left-width (lo spessore del bordo) border-left-style (lo stile del bordo) border-left-color (il colore del bordo)

Esempio1. .ConBordoSinistro { 2.

3. border-left: medium #000000 dashed;4.5. }

border-left-color Il colore del bordo sinistro.Valori possibili sono:

un colore (il colore del bordo, può essere un nome, un valore rgb o esadecimale) Esempio

1. .BordoSinistroColorato { 2.3. border-left-color: #ff0000;4.5. }

border-left-style Lo stile del bordo a sinistra.Valori possibili sono:


Esempio1. .BordoSinistroPuntato { 2.3. border-left-style: dotted;4.5. }6.7. . BordoSinistroTrattini { 8.9. border-left-style: dashed;10.11.}

border-left-width Imposta lo spessore del bordo sinistro.Valori possibili sono:


Esempio1. .BordoSinistroLargo { 2.3. border-left-width: 6px;4.5. }6.7. .BordoSinistroStretto { 8.

9. border-left-width: 1px;10.11. }

· Web viewManuale CSS. Indice. Introduzione ai CSSCosa sono i fogli di stile, la sintassi CSS e...

Documents

Transcript of · Web viewManuale CSS. Indice. Introduzione ai CSSCosa sono i fogli di stile, la sintassi CSS e...