Primi passi di CSS

Fabio Lenotti — Wed, 21 Jan 2009 09:03:42 +0000

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 e in html) nowrap : aspetta il 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 …..

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

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

Ciarpame {.com} » Valori CSS