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.
41
Embed
· Web viewManuale 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
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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:
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:
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:
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:
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.
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 */
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.
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>
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.
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>
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
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>
18.19. <img src="demo7.jpg">20.21. <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>
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)).
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.
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.
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.
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.
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.
Valori possibili sono:
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 .
Il testo a cui applico lo stile viene stampato in maiuscoletto.
Valori possibili sono
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.
Valori possibili sono:
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-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
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)
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