Salve a tutti sono ancora io Fabio Lenotti.
Dopo aver imparato l’HTML qui alla SIS.Srl mi hanno insegnato anche il CSS ora vi spiego cos’è.
Detti anche fogli di stile a cascata o fogli di stile i file CSS(dall’inglese CSS Cascading Style Sheets) vengono usati per definire la rappresentazione di documenti HTML e XHTML.
L’introduzione dei fogli di stile si è resa necessaria per separare i contenuti dalla formattazione e permettere una programmazione più chiara e facile da utilizzare, sia per gli autori delle pagine HTML che per gli utenti.
Per impararle a fare i fogli a cascata andate su http://www.w3schools.com/css/default.asp anche il CSS come l’HTML su questo sito è diviso il Basic e Advanced e alla fine è presente un quiz per vedere cosa avete appreso.
Anche il sito del CSS è scritto in inglese ma se volete vi posso consigliare anche dei siti in italiano dove trovate la spiegazione dei fogli a cascata tipo http://it.wikipedia.org/wiki/Foglio_di_stile oppure http://css.html.it/guide/leggi/2/guida-css-di-base/ .
Proprietà del CSS
TESTO
| attributo | valori | descrizione |
|---|---|---|
| color: | valore | Colore, sia in inglese che in codice ascii.Es. black oppure #000000 |
| text-decoration: | overline
underline line-through none |
Decorazione del testo |
| text-align: | left
right center justify |
Allineamento del testo rispetto a ciò che lo circonda |
| text-indent: | lunghezza
percentuale |
Rientro della prima riga di un testo |
| text-transform: | uppercase
lowercase capitalize none |
Trasforma rispettivamente in maiuscola, minuscola, maiuscola la prima lettera oppure default (none) per nessun cambiamento |
| line-height: | normal
numero lunghezza percentuale |
Altezza riga testo |
| letter-spacing: | numero | Spazio fra le lettere di un testo |
| vertical-align: | baseline
sub super top middle bottom text-top text-bottom |
Allineamento in verticale del testo rispetto ad un oggetto |
| white-space: | normal
pre nowrap |
Regola la tabulazione di un testo (gli a capo). Nell’ordine: normal :Lascia dafault browser pre :Scrive come è scritto nel codice html (come <pre> e </pre> in html) nowrap : aspetta il <br> per andare a capo |
| word-spacing: | normal
valore |
Regola lo spazio fra le parole del testo. normal lascia decidere al browser, altrimenti possiamo inserire un valore (in px, in pt ecc…). |
CARATTERE
| attributo | valori | descrizione |
|---|---|---|
| font: | attributi | font può raccogliere tutti gli attributi dei font senza la loro esplicita dichiarazione. Es. font:italic bold 12px arial; |
| font-family: | verdana
arial …. |
Descrive il tipo di scrittura da usare. Ne possiamo inserire più di uno, in questo caso se il computer non ha un font in memoria carica il successivo e via di seguito. |
| font-size: | numero | Dimensioni del carattere, es. 10px. 10% |
| font-style: | normal
italic oblique |
Scrittura corsiva |
| font- | normal | Tutto in maiuscolo |
| variant: | small-caps | Tutte le lettere in minuscolo sono convertite in maiuscolo |
| font-weight: | bold
bolder lighter normal |
Regola la grandezza del grassetto. Possiamo inserire anche un numero multiplo di 100 fino a 900. |
COLORE e SFONDO
Non tutti sanno che in si può utilizzare in contemporanea un colore con una immagine (se in generale l’immagine è di misure inferiori alle misure degli schermi pc).
| attributo | valori | descrizione |
|---|---|---|
| background: | valore | Può raccogliere tutti gli altri attributi senza una loro esplicita definizione. Esempio:background:#00ff00 url(‘ciao.gif’) no-repeat fixed center; |
| background-color: | valore | Colore di sfondo, sia in inglese che in codice ascii. Es. black oppure #000000 |
| background-image: url (…) | url immagine | Immagine di sfondo, al posto dei punti (…) inserire l’url. Es. “ciao.gif” Se è nella stessa cartella, “icone/ciao.gif” se è in una cartella diversa. |
| background-repeat: | repeat
repeat-x repeat-y no-repeat |
Da usare con background-image descrive come posizionare l’immagine di sfondo |
| background-attachment: | scroll
fixed |
Descrive se l’immagine di sfondo deve essere fissa oppure no |
MARGINI
Applicabile ad ogni oggetto, compreso , in questo caso tutte le pagine o gli oggetti che si riferiranno a questo parametro saranno spostati dai bordi come indicato.
| attributo | valori | descrizione |
|---|---|---|
| margin: | valore | Dichiara la distanza dei 4 margini senza la loro singola dichiarazione. Il primo valore è top, ed a scalare abbiamo right, bottom e left. Es. margin: 10px 20px 10px auto; |
| margin- | top
right bottom left |
Inserire un valore numerico. Es. 10px oppure 10pt ….. |
POSIZIONE e FORMA
| attributo | valori | descrizione |
|---|---|---|
| position: | static
absolute relative |
Il tipo di posizionamento rispetto al foglio od altro elemento. Static dafault browser. Absolute indica la posizione rispetto a tutto il foglio (necessita la dichiarazione di left, top, right, e bottom). Relative indica la posizione rispetto alla posizione cha assumerebbe di dafault. |
| position: | top
left height |
Distanza dal margine es. 100px 100pt ecc. |
| visibility: | visible
hidden |
Visibilità dell’oggetto (hidden=nascosto). Molto utile per alcuni script javascript dove le immagini possono apparire o scomparire). |
| z-index: | valore | Priorità di visualizzazione rispetto ad altri oggetti, può anche avere valore negativo. Il numero dipende da quanti oggetti lo possono sovrapporre. |
| overflow: | visible
hidden scroll auto fixed |
Indica come gestire del testo in esubero se inserito in un blocco con le misure dei margini e bordi definiti. visibel si allunga il contenitore e mostra tutto il testo hidden nasconde il testo in eccedenza scroll inserisce una barra di scorrimento laterale autodafault browser |
| clip: | auto
valori |
Con clip possiamo regolare la misura di un oggetto, per esempio lo possiamo utilizzare se abbiamo inserito un’immagine in una cella di tabella con misure definite e non vogliamo allargare la cella per esubero misure immagine. Es. clip: 100px 50px 100px 50px; con clip definiamo in ordine top, right, bottom e left dai bordi contenitore. |
ALTEZZE e LARGHEZZE
| attributo | valori | descrizione |
|---|---|---|
| height: | numero
percentuale |
Altezza dell’oggetto |
| min-height: | numero
percentuale |
Altezza minima dell’oggetto. |
| max-height: | numero
percentuale |
Altezza massima dell’oggetto. |
| width: | numero
percentuale |
Larghezza dell’oggetto. |
| min-wight: | numero
percentuale |
Larghezza minima dell’oggetto. |
| max-wight: | numero
percentuale |
Larghezza massima dell’oggetto. |
MOUSE
(solo per Internet Explorer):
| attributo | valori | descrizione |
|---|---|---|
| cursor: | Auto
Crosshair Default Hand Move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize |
Prova a passare il mouse sopra le scritte dei valori |
2 Comments
1 Aug 3, 2009 at 12:54
Alberto
CSS3 e XHTML un’accoppiata vincente a patto che il codice sia scritto correttamente e in piena filosofia web-standard. Sfortunatamente gli esempi di siti creati con coscienza di compatibilita’ e fruibilita’ non sono molti e se poi estendiamo questi concetti non solo in termini di W3c, ma anche di accessibilita’ per i diversi-abili, il numero si assottiglia tragicamente. Per fare un esempio, avete mai provato a scaricarvi un programma di ‘sintesi vocale’ per verificare come un non-vedente legga un nostro sito senza i title nei link e gli alt per immagini e filmati ? O come una persona senza l’uso degli arti possa navigare senza accesskey richiamabili a voce? Se provate a guardare il logo Ciarpame come lo vede un daltonico (termine familiare per chi e’ affetto da uno dei 3 tipi di discromatopsia) vedreste una grossa macchia scura dove le lettere non sono intelleggibili (provare su sito http://www.vischeck.com). Magari con un uso piu’ intelligente di CSS si potrebbero creare fogli di stile differenziati non solo per le solite versioni media e print dei siti ma anche in base a esigenze differenti. Aldila’ delle caratteristiche psico-fisiche degli utenti, basti solo pensare alla rivoluzione che e’ avvenuta negli ultimi anni in fatto di monitor: come si puo’ piu’ mettere online un sito ottimizzato per 1024×768 quando la maggior parte degli screen wide sono impostati da 1280 in su’ ? Eppure c’e’ ancora chi usa CSS con font-size in pixel e div width non in percentuale e a questo proposito nemmeno ciarpame.com o il sito SIS sono esenti da critiche ^__^. Per concludere, io non sono ortodosso e non difendo a priori un sistema piuttosto che un altro: l’importante e’ che alla fine un progetto web sia funzionale per tutti e se questo comporta l’utilizzo di fogli di stile aggiuntivi o l’uso di javascript (in questo contesto si parla di soluzioni lato client) ben venga.
2 Oct 9, 2009 at 18:32
matrobriva
Ottima guida, faccio i complimenti all’autore!
Leave a Comment