ISSN 1722-375X
[Vai al menu di navigazione principale]
Home > Tutorial > Introduzione ai css > Introduzione ai CSS : Le proprietą
[Vai al piè di pagina]
TOC

Introduzione ai CSS

4. Le proprietà

In questa sezione saranno brevemente illustrate le proprietà dei CSS di livello 1.

Verrà utilizzata la seguente sintassi (la stessa utilizzata dal W3C):

Le proprietà possono essere raggruppate nelle seguenti categorie:

4.1 Font

4.1.1 font-family

sintassi: font-family: <nome font>* || <font generico>

<nome font>

<font generico>

Esempio:

p { font-family: verdana, helvetica, "Trebuchet MS", sans-serif }

Il font adottato sarà il primo disponibile partendo da sinistra. E' bene specificare sempre un font generico, applicato qualora nessuno dei font elencati fosse disponibile. Font con nomi composta da due o più parole vano fra virgolette: ad esempio "Trebuchet MS"

4.1.2 font-style

sintassi: font-style: normal | italic | oblique;

Esempio:

quote { font-style: italic }

Il font adottato sarà il primo disponibile partendo da sinistra. E' bene specificare sempre un font generico, applicato qualora nessuno dei font elencati fosse disponibile. Font con nomi composta da due o più parole vano fra virgolette: ad esempio "Trebuchet MS".

4.1.3 font-variant

sintassi: font-variant: normal | small-caps

Esempio:

.maiuscoletto { font-variant: small-caps }

Il valore small-caps crea l'effetto "Maiuscoletto", il valore normal non introduce variazioni.

4.1.4 font-weight

sintassi: font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Esempio:

strong { font-weight: 900; }

Specifica il peso del font. I valori bolder e lighter sono relativi al valore di default. Gli altri valori sono pesi assoluti. 100-900 è una scala che va dal peso minimo al massimo. Non tutti e nove i valori da 100 a 900 sono disponibili per tutti i font, in questo caso il peso adottato è il più vicino disponibile.

4.1.5 font-size

sintassi: font-size: <dimensione assoluta> | <dimensione relativa> | <lunghezza> | <percentuale>

<dimensione assoluta> (vedi "Dimensionare i caratteri con i CSS" per maggiori dettagli)

<dimensione relativa> (vedi "Dimensionare i caratteri con i CSS" per maggiori dettagli)

<lungezza>

<percentuale>

Esempio:

p { font-size: 0.80em }

Sul dimensionamento dei caratteri è disponibile un articolo dedicato

4.1.6 font

sintassi: font: <valore>

<valore>

Esempio:

p.paragrafo-speciale { font: bold 1.00em/1.50em verdana, helvetica, "Trebuchet MS", sans-serif }

La proprietà font può essere utilizzata come un metodo veloce per definire le diverse proprietà font-family, font-style, ecc. Si noti la possibilità di specificare anche la proprietà <line-height> (una proprietà per specificare l'interlinea). Quando si utilizza la proprietà font è necessario specificare almeno i valori per le proprietà font-size e font-family.

4.2 Colore e sfondo

4.2.1 color

sintassi: color: <colore>

Esempio:

a { color: #009 }
em {color: red }

La proprietà color permette di specificare il colore del testo di un selettore, i possibili valori sono descritti nella sezione 4.6.3.

4.2.2 background

sintassi: background-color: <valore>

<valore>

Esempio:

body { background:#FFFFFF url(/images/sfondo.gif) no-repeat fixed top right; }

La proprietà background permette di specificare il colore e l'immagine di sfondo. L'immagine può essere posizionata come si desidera, può essere ripetuta oppure no, può scrollare col testo ovvero essere fissa.

4.3 Testo

4.3.1 word-spacing

sintassi: word-spacing: <valore>

<valore>

Esempio:

.parole-distanziate { word-spacing: 1.00em }
.parole-ravvicinate { word-spacing: -0.20em }

La proprietà word-spacing permette di impostare lo spazio fra le parole, aumentando lo spazio fra le parole oppure diminuendo tale spazio. Se viene specificata una lunghezza, questa va ad aggiungersi ovvero a sottrarsi alla spaziatura predefinita.

4.3.2 letter-spacing

sintassi: letter-spacing: <valore>

<valore>

Esempio:

.lettere-distanziate { letter-spacing: 0.50em }
.lettere-ravvicinate { letter-spacing: -0.15em }

La proprietà letter-spacing permette di impostare lo spazio fra le singole lettere di una parola, aumentandolo oppure diminuendolo. Se viene specificata una lunghezza, questa va ad aggiungersi ovvero a sottrarsi alla spaziatura predefinita.

4.3.3 line-height

sintassi: line-height: <valore>

<valore>

Esempio:

.interlinea-ridotta { line-height: 100% }

La proprietà line-height permette di impostare l'interlinea. Le percentuali si riferiscono all'altezza dei font e non al valore standard dell'interlinea, valori negativi non sono permessi. L'interlinea può essere specificata anche tramite la proprità font. Questo paragrafo ha un'interlinea pari alla dimensione dei caratteri.

4.3.4 text-indentation

sintassi: text-indentation: <valore>

<valore>

Esempio:

p { text-indentation: 2em; }

La proprietà text-indentation permette di impostare il rientro del capoverso. Le percentuali si riferiscono alla larghezza del parent e sono quindi più difficili da gestire. I paragrafi di questo articolo hanno un rientro del capoverso pari 2em.

4.3.5 vertical-align

sintassi: vertical-align: <valore>

<valore>

Esempio:

img { vertical-align: top }
.apice { vertical-align: super }
.pedice { vertical-align: sub }

La proprietà vertical-align permette modificare il posizionamento verticale degli elementi inline. Le percentuali si riferiscono all'interlinea. La proprietà vertical-align è utilie per gestire l'allineamento delle immagini come pure per creare apici ovvero pedici (per apici e pedici è bene agire anche sulla dimensione del testo).

4.3.6 text-decoration

sintassi: text-decoration: <valore>

<valore>

Esempio:

#barra-di-navigazione A { text-decoration: none }
/* link non sottolineato */

La proprietà text-decoration permette decorare il testo: i possibili valori sono:

4.3.7 text-transform

sintassi: text-transform: <valore>

<valore>

Esempio:

.tutto-maiuscolo { text-transform: uppercase }

La proprietà text-transform permette impostare il testo maiuscolo/minuscolo: i possibili valori sono:

4.3.8 text-align

sintassi: text-align: <valore>

<valore>

Esempio:

h1.titolo { text-align: center }
p.articolo { text-align: justify }

La proprietà text-align permette l'allineamento del testo:

4.3.9 white-space

sintassi: white-space: <valore>

<valore>

Esempio:

p.testo-formattato { white-space: pre }
p.nowrap { white-space: nowrap }

La proprietà white-space specifica come interpretare gli spazi fra gli elementi:

4.4 Box model

4.4.1 margin

sintassi: margin: <valore>

<valore>

Esempio:

body { margin: 10px } /* tutti i margini a 10px */
p { margin: 10px 5px } 
/* margini sup. e inf. a 10px, margini des. e sin. a 5px */
.esempio { margin: 1px 2px 3px 4px }
/* margini (in senso orario -- Nord Est Sud Ovest):
sup. 1px 
des. 2px
inf. 3px
sin. 4px */

La proprietà margin permette di impostare il margine di un elemento (vedi la seguente immagine per maggiori dettagli). Per avere ulteriori informazioni sul box model è disponibile il seguente articolo: "Il box model di IE5/Win".

Definizione del box model

Specificando un solo valore, si impostano tutti e quattro i margini al valore specificato. Specificando due valori, si impostano il margine superiore e inferiore al primo valore indicato, il margine destro e sinistro al secondo valore indicato. Specificando quattro valori, si impostano il margine superiore, quello destro, quello inferiore e quello sinistro rispettivamente (in senso orario a partire dal margine superiore).

E' possibile impostare i margini singolarmente attraverso le seguenti quattro proprietà: margin-top, margin-right, margin-bottom, margin-left. Ad esempio:

.esempio { margin-top: 1px }
.esempio { margin-right: 2px }
.esempio { margin-bottom: 3px }
.esempio { margin-left: 4px }
4.4.2 padding

sintassi: padding: <valore>

<valore>

Esempio:

body { padding: 10px } /* padding a 10px su ogni lato*/
p { padding: 10px 5px } 
/* padding lati sup. e inf. a 10px, padding lati des. e sin. a 5px */
.esempio { padding: 1px 2px 3px 4px }
/* padding (in senso orario -- Nord Est Sud Ovest):
sup. 1px 
des. 2px
inf. 3px
sin. 4px */

La proprietà padding permette di impostare il padding di un elemento (vedi la seguente immagine per maggiori dettagli). Per avere ulteriori informazioni sul box model è disponibile il seguente articolo: "Il box model di IE5/Win".

Definizione del box model

Specificando un solo valore, si imposta il padding di tutti e quattro i lati al valore specificato. Specificando due valori, si imposta il padding dei lati superiore e inferiore al primo valore indicato, il padding dei lati destro e sinistro al secondo valore indicato. Specificando quattro valori, si imposta il il padding del lato superiore, del lato destro, del lato inferiore e del lato sinistro rispettivamente (in senso orario a partire dal margine superiore).

E' possibile impostare il paddin di ogni singolo lato attraverso le seguenti quattro proprietà: padding-top, padding-right, padding-bottom, padding-left. Ad esempio:

.esempio { padding-top: 1px }
.esempio { padding-right: 2px }
.esempio { padding-bottom: 3px }
.esempio { padding-left: 4px }
4.4.3 border

sintassi: border: <spessore> || <stile> || <colore>

<spessore>

Lo spessore del bordo può essere impostato attraverso le tre parole chiave thin (fino), medium (medio) e thick (spesso), ovvero specificandone la dimensione

<stile>

La proprietà border permette di impostare il bordo di un elemento (vedi la seguente immagine per maggiori dettagli). Per avere ulteriori informazioni sul box model è disponibile il seguente articolo: "Il box model di IE5/Win".

Definizione del box model

Per rendere il bordo visibile è necessario specificarne lo stile. Se lo stile è impostato su none il bordo non è visibile (utile per le immagini).

Esempio:

.box1 { border: thick solid blue }
.box2 { border: 2px dotted red }
.box3 { border: thin dashed #000000 }
.bottone { border: 5px outset #666 }

Il precedente codice (aggiungendo del margine e regolando la larghezza) genera i seguenti box:

.box1
.box2
.box3
.bottone

Tramite la proprietà border è possibile specificare solo il bordo di tutti e quatto i lati, qualora si volessero specificare i lati singolarmente è possibile utilizzare le seguenti proprietà: border-top, border-right, border-bottom, border-left che consentono, attraverso la stessa sintassi di border, di gestire i lati singolarmente. Esempio:

.box { 
  border-top: 1px dashed red;
  border-right: 2px dotted blue;
  border-bottom: 3px double green;
  border-left: 4px solid #000;
}

Il precedente codice (regolando la larghezza) genera il seguente box:

.box

In alternativa è possibile specificare singolarmente spessore, stile e colore del bordo attraverso le seguenti proprietà: border-width, border-color, border-style. Il seguente codice è equivalente a quello sopra riportato:

.box { 
  border-width: 1px 2px 3px 4px; /* top right bottom left */
  border-style: dashed dotted double solid; /* top right bottom left */
  border-color: red blue green #000; /* top right bottom left */
}
.box

Quando si utilizzano le keyword thin, medium e thick per impostare la larghezza del bordo, lo spessore può variare leggermente in base al browser utilizzato. Lo stesso vale per i diversi stili. Si ricorda che Internet Explorer è incapace di rappresentare un bordo spesso 1 px o 1pt con lo stile dotted, lo stile del bordo sarà settato automaticamente su dashed.

Il bordo può essere aggiunto anche a parole del testo.

4.4.4 width

sintassi: width: <valore>

<valore>

Esempio:

div.box { width: 70% }
img.icona { width: 50px; }

La proprietà width permette di impostare la larghezza di un elemento (vedi la seguente immagine per maggiori dettagli). Per avere ulteriori informazioni sul box model è disponibile il seguente articolo: "Il box model di IE5/Win".

Definizione del box model

La larghezza può essere impostata per elementi block-level o gli elementi detti replaced element.

Le percentuali sono calcolate in base alla larghezza dell'elemento parent. Oltre che per la definizione dei box, la proprietà width può risultare utile nei form per impostare la larghezza dei campi e dei pulsanti.

4.4.5 height

sintassi: height: <valore>

<valore>

Esempio:

textarea { height: 200px; }
img.icona { height: 50px; }

La proprietà height permette di impostare l'altezza di un elemento. L'altezza può essere impostata per elementi block-level o gli elementi detti replaced element.

Le percentuali sono calcolate in base all'altezza dell'elemento parent. Oltre che per la definizione dei box, la proprietà width può risultare utile nei form per impostare con precisione l'altezza di campi come TEXTAREA.

4.4.6 float

sintassi: float: <valore>

<valore>

Esempio:

img.figura { float: right; }
blockquote { float: left; }

La proprietà float permette di disporre il testo attorno ad un elemento. Questa proprietà funziona come gli attibuti align="left" o align="right" per le immagini (attributi sconsigliati dal W3C), ma funziona con ogni elemento, non solo con le immagini.

Le percentuali sono calcolate in base all'altezza dell'elemento parent. Oltre che per la definizione dei box, la proprietà width può risultare utile nei form per impostare con precisione l'altezza di campi come TEXTAREA.

4.4.7 clear

sintassi: clear: <valore>

<valore>

Esempio:

p.nofloat { clear: both; }
pre { clear: left; }

La proprietà clear permette di specificare se l'elemento permette la presenza di elementi floating ai suoi lati. Il valore specificato posiziona l'elemento al di sotto di eventuali elementi fluttuanti posti sul lato specificato dal valore. Ulteriori dettagli sull'utilizzo della proprietà float sono riportati nell'articolo "Ripristino dell'allineamento in seguito all'utilizzo della proprietà float".

4.5 Classificazione

4.5.1 display

sintassi: display: <valore>

<valore>

Esempio:

img.esempio { display: block } 
img.icona { display: inline } 
img.contatore { display: none }
li { display: list-item }

La proprietà display permette di definire un elemento come elemento block-level, elemento inline, elemento di lista. Se il valore della proprietà display è impostato su non l'elemento (compresi tutti gli elenti in esso contenuti!) non verrà visualizzato.

L'utilizzo dell proprietà display può alterare la normale interpretazione dello User Agent (ad esempio P è un elemento block-level mentre IMG è un elemento inline) e va dunque usato con cautela. La regola selettore { display: none } può essere utilizzata, ad esempio, per migliorare la stampa delle pagine web.

4.5.2 list-style

sintassi: list-style: <marcatore> || <allineamento> || <url>

<marcatore>

<allineamento>

Esempio:

ul.square { list-style: square; }
ul.inside { list-style: inside; }
ul.3pt { list-style: url(/images/3pt.gif) circle; }
ol.roman { list-style: upper-roman; } 
ol.alpha { list-style: lower-alpha; }
ol.none { list-style: none; }

Il precedente codice genera le seguenti liste:

  1. Et harumd dereud facilis est
    er expedit distinct suscipit laboris
  2. Et harumd dereud facilis est
    er expedit distinct suscipit laboris
  3. Et harumd dereud facilis est
    er expedit distinct suscipit laboris
  1. Et harumd dereud facilis est
    er expedit distinct suscipit laboris
  2. Et harumd dereud facilis est
    er expedit distinct suscipit laboris
  3. Et harumd dereud facilis est
    er expedit distinct suscipit laboris
  1. Et harumd dereud facilis est
    er expedit distinct suscipit laboris
  2. Et harumd dereud facilis est
    er expedit distinct suscipit laboris
  3. Et harumd dereud facilis est
    er expedit distinct suscipit laboris

La proprietà list-style permette di definire come debbano essere rappresentate le liste, permettendo di specificare sia lo stile dei marcatori, sia l'allinemaneto. Tramite il valore <url> è possibile specificare un'immagine per i marcatori. Qualora l'immagine specificata con <url> non fosse disponibile non viene usato nessun marcatore. Per evitare questo inconveniente è sufficiente specificare il marcatore desiderato oltre all'immagine:

ul { list-style: url(/percorso/immagine.gif) circle; }

4.6 Lunghezze, percentuali, colori, url

4.6.1 lunghezze

Le lunghezze sono costituite da un numero (positivo o negativo) subito seguito dall'unità di misura indicata con due lettere. Non è consentito inserire degli spazi fra il numero e l'unità di misura.

Esistono due tipi di lunghezze: relative e assolute.

Le unità relative forniscono una lunghezza relativamente ad un'altra lunghezza e sono dunque preferibili poiché maggiormente adattabili ai diversi media. Le unità di misura relativa sono:

Esempio:

.classeA { font-size: 10px } 
.classeA { line-height: 1.50em }

L'unità em si riferisce alla dimensione dei font dell'elemento a cui la regola si applica. Nel precedente esempio la classe 'classeA' ha un font di dimensione 10px di conseguenza 1em = 10px e la proprietà line-height impostata a 1.50em è come se fosse impostata a 15px. Quando usata per dimensionare i font, l'unità em non si riferisce alla dimensione dei font dell'elemento a cui la regola si applica, bensì alla dimensione dei font dell'elemento parent Maggiori dettagli sul dimensionamento dei font sono riportati nell'articolo "Dimensionare i caratteri con i CSS".

Si consideri il seguente esempio:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Esempio</title>
<style type="text/css">
<!-- 
.classeA { font-size: 10px } 
.classeA { line-height: 1.50em }
.calsseA h1 { font-size: 2.00em } 
-->
</style>
</head>
<body>
<div class="classeA">
<h1>Elemento H1 [ hp ]</h1>
testo delle calsse 'classeA' [ hp ]<br />
testo delle calsse 'classeA' [ hp ]  
</div>
</body>
</html>

Il risultato del codice sopra riportato è riprodotto nella seguente immagine:

esempio con dimensioni

La dimensione del pixel dipende invece dalla risoluzione dispositivo. Ad esempio lo schermo di un PC ha una risoluzione pari a 96dpi mentre una stampante può avere una risoluzione pari 400dpi:

esempio risoluzione - fonte http://www.w3.org/TR/2002/WD-CSS21-20020802

Le lunghezze assolute andrebbero utilizzate esclusivamente quando sono note le proprietà fisiche dei media (ad esempio la dimensione dei fogli di una stampante è tipicamente il formato A4). Le unità assolute sono:

4.6.2 percentuali

Le percentuali (positivie o negative) sono relative alla dimensione di altri elementi, dipendendo dalla proprietà che utilizza le percentuali. Ad esempio:

div.halfbox { width: 50% } 
/* 50% della larghezza dell'elemento parent */
p.nota  { font-size: 80% }
/* 80% della dimensione dei font dell'elemento parent */
4.6.3 colori

Un colore è cosituito da una keyword o da un codice RGB (Red Green Blue - Rosso, Verde, Blu).

Le 16 keyword sono: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, e yellow.

I valori RGB possono essere forniti attraverso quattro sintassi:

I valori #CC6600, #C60, rgb(204,102,0), rgb(80%,40%,0) specificano tutti lo stesso colore (arancione scuro).

La sintassi #rgb è molto utile poiché facitilta l'indicazione dei colori della palette "web safe".

4.6.4 URL

Un valore URL viene fornito attraverso la seguente sintassi: url(url), dove url è l'indirizzo da specificare; url può essere riportato fra apici o virgolette. Esempi:

I percorsi sono relativi alla cartella contenente il foglio di stile. Se ad esempio il foglio di stile è contenuto nella cartella /inc/css/ il valore url("images/sfondo.gif") indica il file "/inc/css/images/sfondo.gif". Per evitare problemi con l'interpretazione dei percorsi relativi da parte di alcuni User Agent si consiglia di utilizzare sempre percorsi assoluti: url("/images/sfondo.gif").

TOC
G.T. -- ultima revisione: 03.10.2002
l'indirizzo di questa pagina è: http://www.constile.org/tutorial/introduzione_ai_css/sezione_4.php