*Linux Guide

Web Design - CSS Parte 3

clear
E' una proprietà che può possedere ci seguenti valori :
  • none
  • left
  • right
  • both
ha un valore di default 'none', non è ereditabile dagli altri elementi e si applica a tutti gli elementi.
Definisce i lati dell'elemento nei quali non sono posizionabili immagini float. In questo modo l'elemento viene spostato in basso fino a che il bordo superiore si trovi sotto al margine inferiore dell'immagine floated.
Per la sua delicatezza di implementazione e per le alterazioni di visualizzazione, è bene effettuare delle prove ripetute su vari browsers.


h1{clear : both;
}

color
E' una proprietà che ha un unico valore da dichiarare e per default ha un valore dipendente dal browser.
E' ereditabile dagli altri elementi a si applica ad ognuno di essi.
Definisce il colore di presentazione (foreground) dell'elemento che lo dichiara. Si applica al testo ed ai bordi a meno che il colore di questi non sia stato preventivamente dichiarato con 'border-color. In genere si esprime con valori esadecimali alfanumerici o con espressioni sebbene il primo metodo sia da preferire.


h1{color : #0000ff;
}
p .rosso{color : red;
}

display
E' una proprietà che può avere i seguenti valori :
  • block
  • inline
  • list-item
  • none
e come valore di default ha 'block', non è ereditabile dagli altri elementi e si applica a tutti gli elementi.
Stabilisce il modo di presentarsi di un elemento, se cioè debba occupare l'intera riga, oppure possa inserirsi nell'ambito del testo o come lista. E' una proprietà da usare con molta cautela, dato che molti elementi sono già provvisti di modalità 'display' come i vari capitoli, i paragrafi, i div ecc. Si raccomanda l'esecuzione di numerose prove su svariati browsers.


span .blocchetto{display : block;
}
img .logo{display : inline;
}

float
E' una proprietà che può avere i seguenti valori :
  • left
  • right
  • none
e come valore di default ha 'none', non è ereditabile e si applica ad ogni elemento.
Definisce la direzione di piazzamento di un elemento rispetto ad altri e viene spesso impiegato nelle immagini affinchè il testo scorra intorno ad esse. E' una proprietà molto difficile da gestire in quanto potrebbe determinare delle alterazioni di visualizzazione anche a seconda dei browser e delle risoluzioni video. Si consiglia un uso basato su nuhmerose prove su svariati browsers.


img .logo{float : left;
}

font
E' una proprietà che mostra diversi sottovalori come :
  • font-style
  • font-variant
  • font-size
  • font-family
  • line-height
  • font-weight
e il valore di default è in riferimento ai singoli sottovalori. E' ereditabile e si applica a tutti gli elementi.
Definisce caratteristiche generali dei fonts del testo e si applica necessariamento con valori riferiti a font-family e font-size come illustrato nel box sottostante.


p .centrale{font : 100% arial,verdana,sans-serif;
}

font-family
E' una proprietà che può esprimere il valore con :
  • family-name
  • generic-family
ed il valore di default dipende dal browser, è ereditabile e si applica ad ogni elemento.
Definisce il tipo di font da impiegare all'interno dei vari elementi. Può stabilire famiglie specifiche di fonts (come Arial, Verdana, Courier, ecc.) o famiglie generiche di fonts (come serif, sans-serif, monospace, cursive, fantasy).
Se il font prescelto è composto da due nomi (Arial Black, Times New Roman, Courier New, ecc.) è necessario che questo venga dichiarato racchiuso tra doppi apici ("Arial Black"). Da un punto di vista della pratica i caratteri corsivi sono da sconsigliare in quanto di difficile lettura, così come i font specifici e rari che potrebbero non essere in dotazione al computer dell'utente.


p .laterale{font-family: arial,verdana,serif;
}
p .centrale{font-family : verdana,"arial black";
}

font-size
E' una proprietà che può avvalersi dei seguenti valori:
  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
  • larger
  • smaller
e può esprimere il valore con :
  • lenght
  • percentage
Il valore di default è 'medium, è ereditabile e si applica atutti gli elementi.
Definisce la dimensione del font e può essere espresso in valori assoluti, persentuali, lineari e relativi.
Se si applica un valore percentuale esso è relativo al valore dell'elemento progenitore per cui se in questo il valore della grandezza del font era di 90%, nell'elemento erede una dichiarazione di font-size di 80% sarà dell'80% di 90%. Sono da considerare sconsigliati i font dimensioni in modo assoluto (pixel e punti), mentre sono da privilegiare le dimensioni relative e percentuali.


h1{font-size : 12px;
}
h4{font-size : 1em;
}
p .centrale{font-size : small;
}

font-style
E' una proprietà che può avere i seguenti valori :
  • normal
  • italic
  • oblique
il valore di default è 'normal', è ereditabile e si applica ad ogni elemento.
Definisce lo stile italico, obliquo o normale del testo. Italic e oblique sono di fatto identici.


h3{font-style : italic;
}

font-variant
E' una proprietà che può avere i seguenti valori:
  • normal
  • small-caps
ed il suo valore di default è 'normal', è ereditabile e si applica a tutti gli elementi.
Definisce una variazione del font che potrebbe non essere gradita aall'utente.


h4{font-variant : small-caps;
}

font-weight
E' una proprietà che può avere i seguenti valori:
  • normal
  • bold
  • bolder
  • lighter
  • 100 /200/300/400/500/600/700/800/900
il suo valore di default è 'normal', è ereditabile e si applica a ogni elemento.
Definisce il peso (la quantità di nero) del font. I valori intorno a 400 sono per un font 'normal', mentre valori tendenti a 700, sono per un font 'bold'.


h1{font-weight : bold;
}

height
E' una proprietà che può esprimere il valore con :
  • Lenght
  • auto
e come valore di default ha 'auto', non è ereditabile e si applica agli elementi di blocco.
Determina l'altezza di un elemento e si applica per lo più a delle immagini.


h1{height : 15%;
}

letter-spacing
E' una proprietà che può esprimere il valore con :
  • normal
  • lenght
e come valore di default ha il primo, è ereditabile e si applica a qualsiasi elemento.
Definisce lo spazio esistente tra numeri, lettere, elementi grafici e altro. Sono ammessi valori negativi con effetto di avvicinamento (kerning).


h1{letter-spacing : 0.2 em;
}

line-height
E' una proprietà che possiede i seguenti valori :
- normal
e può esprimere il valore con :
  • number
  • length
  • percentage
e come valore di default ha 'normal', è ereditabile e si applica a tutti gli elementi.
Determina l'altezza intrinseca di un elemento.


h1{line-height : 50%;
}
p .centrale{line-height : - 0.2 em;
}

list-style
E' una proprietà che possiede i sottovalori :
  • list-style-image
  • list-style-position
  • list-style-type
non ha valore di default dichiarato, è ereditabile e si applica agli elementi List.
Stabilisce lo stile delle liste ed è una scorciatoia che prevede l'inclusione degli altri valori come illustrato nel box sottostante.


ul{list-style : square url(quadratino.gif) outside;
}

list-style-image
E' una proprietà che può esprimere il valore con :
  • url
  • none
ha come valore di default 'none', è ereditabile e si applica agli elementi List.
Definisce l'immagine che si colloca in ogni lista. Al valore 'url' si deve abbinare il collocamento dell'immagine racchiuso tra parentesi come indicato nel box sottostante.


ul{list-style-image : url(tondino.gif);
}

list-style-position
E' una proprietà che possiede i seguenti valori :
  • inside
  • outside
e come valore di default ha 'outside', è ereditabile e si applica a tutti gli elementi List.
Deinisce la posizione dell'immagine o del bullet o del numero rispetto alla lista. Se viene scelto il valore 'inside', l'immagine, il bullet o il numero appare come primo elemento del contenuto della lista.


ul{list-style-position : inside;
}

list-style-type
E' una proprietà che possiede i seguenti valori :
  • disc
  • circle
  • square
  • decimal
  • lower-roman
  • upper-roman
  • lower-alpha
  • upper-alpha
  • none
ha come valore di default 'disc', è ereditabile e si applica a tutti gli elementi List.
Definisce il tipo e il sistema di numerazione delle liste ordinate o non ordinate. Impiegando la litterazione non è stato stabilito quale tipologia di bullet debba essere impiegato dopo l'impiego della lettera 'z'.


ul{list-style-type : square;
}

<< Precedente | Indice | Successiva >>

Linux Guide | Torna in alto