Fogli di style (CSS). Pagina con la descrizione sui principali attributi dei fogli di style (css)
ALLWEB free
Web Directory Script Linguaggi
Italiano Inglese Tutte
 
 02 Oct 2014
aggiungi in preferiti  
Home    Mappa directory    Script




Attributi CSS:

Di seguito riportiamo una lista di attributi con i valori che possono assumere.
La prima colonna indica l'attributo css descritto, la seconda i valori che può assumere, la terza una breve descrizione.

N.B. Il valore va inserito fra i due punti ed il punto e virgola
Es. attributo:  ; diventa attributo:valore;




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. 10pt.
font-style:  ;
  • normal
  • italic
  • oblique
Scrittura corsiva.
font-variant:  ;
  • normal
  • small-caps
Tutto 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 <body> 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.
background-position:  ;
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right
  • x% y%
  • xpos ypos
Informa il browser dove posizionare l'immagine di sfondo.

MARGINI:

Applicabile ad ogni oggetto, compreso <body>, 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:  ;
  • valore
Inserire un valore numerico.
Es. 10px oppure 10pt .....
margin-right:  ;
  • valore
Inserire un valore numerico.
Es. 10px oppure 10pt .....
margin-bottom:  ;
  • valore
Inserire un valore numerico.
Es. 10px oppure 10pt .....
margin-left:  ;
  • valore
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.
top:  ;
  • lunghezza
  • percentuale
  • auto
Distanza dal margine superiore es. 100px 100pt ecc.
left:  ;
  • lunghezza
  • percentuale
  • auto
Distanza dal margine sinistro es. 100px 100pt ecc.
height:  ;
  • altezza
Altezza dell'oggetto se position è absolute.
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
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-width:  ;
  • numero
  • percentuale
Larghezza minima dell'oggetto.
max-width:  ;
  • 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
  • text
  • wait
  • help
Prova a passare il mouse sopra le scritte dei valori