I bordi possono esser definiti da tre proprietà:

• border-width: <dimensione>;
• border-color: <colore>;
• border-style: <stile>;

che vengono applicati a tutti i bordi del box. 

<Dimensione> può essere una lunghezza come definitita in questo articolo oppure i valori

• thin (sottile)
• medium (medio)
• thick (spesso)

<Stile> può essere:

• none (nessuno)
• solid (continuo)
• double (doppio)
• dashed (tratteggiato)
• dotted (punteggiato)
• inset (incassato)
• outset (in rilievo)
• groove (scanalato [in basso])
• ridge (scanalato [in alto])

<Colore> infine può definito come indicato in questo articolo.

 Esiste anche una forma compatta:

border: <dimensione> <colore> <style>.

Utilizzando tali proprietà assegnamo le caratteristiche a tutti e 4 i lati:

Es: border: 4px red solid;

crea un bordo uniforme di 4 pixel di colore rosso. Se volessimo assegnare lo stesso bordo solo a quello inferiore potremmo usare la notazione:

border-bottom: 4px red solid;

E’ possibile inolte assegnare proprietà diverse nel seguente modo:

border-width: 1px 2px 3px 4px;

che son riferiti, rispettivamente al bordo superiore, destro, inferiore e sinistro.

Es. pratici:

Script che consente di creare in forma visuale i bordi voluti.

Link correlati: proprietà dei colori

I colori possono esser definiti nei css attraverso una parola chiave, attraverso la codifica RGB in due metodi: con un codice esadecimale oppure indicando la percentuale di Rosso, verde (Green) e Blue che compongono il colore.

La sintassi da utilizzare è:

• color: key
• color: #rrggbb
• color: #rgb (forma ridotta)
• color: rgb (r, g, b,)
• color: rgb (r%,g%,b%)

Esempi:

{color: red;}

{color:#FF0000;}

{color:#F00;}

{color: rgb(255,0,0); }

{color: rgb(100%,0,0);}

Tutti i codici riportati indicano il colore rosso.

Praticamente i colori vengono indicati in una scala da 0 a 255, in cui 0 indica nessuna presenza e 255 presenza completa del primario. Tali numeri possono esser indicati in percentuale, in forma decimale o esadecimale (FF=255). Attenzione ad aggiungere il # quando si usa la sintassi esadecimale: anche se IE mostra il colore se si scrive {color:F00;} ciò non vuol dire che sia corretto.

La forma ridotta infine è un modo di scrivere un codice hex alleggerendo il peso quando i codici si ripetono: #FC9 è la forma contratta di  #FFCC99, ad esempio.

Tabella nome colori -> codici esadecimali, codici rgb.

Il modello RGB è un modello additivo in cui ogni colore è definito dalla somma dei 3 colori primari. La completa somma di tutti e 3 da il bianco, la somma di due primari da i 3 primari sottrattivi: Giallo, Ciano e Magenta.

Approfontimenti: Wikipedia: RGB

Colore e background

Il colore è applicato alle due proprietà: color e background, che definiscono il colore del testo e lo sfondo.

color:

color: <valore>;

Dove il valore può esser assegnato utilizzando uno dei metodi sopra illustrati.

background:

background: <color> | <url> | <repeat> | <position> | <scroll>

Es: background: #F00 url(‘immaginedisfondo’) fixed no-repeat center left fixed;

<color> può assumere un valore come su indicato, può essere transparent per indicare uno sfondo trasparente o none per non dare nessuno sfondo.

<url> è il percorso dell’immagine di sfondo, da usare nella forma url (<valore>), dove valore può esser inserito tra ‘, ", o senza, e può esser un percorso assoluto o relativo alla posizione del css.

<repeat> può esser uno dei seguenti valori: repeat, opzione di default che fa ripetere l’immagine in orizzontale e verticale, no-repeat: nessuna ripetizione; repeat-x, repeat-y: permettono la ripetizione lungo l’asse orizzontale (x) o verticale (y).

<position> indica la posizione dell’immagine di sfondo. può assumere valori numerici, percentuali o uno dei seguenti: top, center, bottom per il posizionamento verticale, left, center, right per quello orizzontale.

<scroll> può assumere i valori scroll (opz. di default) e fixed per indicare se l’immagine debba seguire o no lo scrolling della pagina.

Le stesse proprietà possono esser indicate singolarmente con:

• background-color: <color>;
• background-image: <url>;
• background-position: <position>;
• background-repeat: <repeat>;
• background-attachment: <scroll>;

Con questa lezione iniziamo a vedere un po’ di codice. In particolare vedremo come inserire i css nelle nostre pagine.

Esistono 4 metodi per utilizzare i css:

1. richiamarli direttamente nelle pagine come stile dell’elemento usando l’attributo style
2. utilizzare l’elemento <style> nell’head dei nostri documenti XHTML
3. richiamando una pagina di stili esterna attraverso l’elemento <link>
4. utilizzando la direttiva @import in <style>.

Tutti e 4 i metodi permettono di fare la stessa cosa anche se con alcune differenze. Il vantaggio di utilizzare fogli di stili esterni è comunque notevole: nel caso in cui volessimo cambiare look ad un documento ci basterà modificare il foglio di stile.

Molto simile è il comportamento della direttiva @import che in più esclude alcuni vecchi browser che non hanno implementato i css in modo corretto.

Personalmente è il metodo che preferisco.

Gli altri due metodi ci possono esser utili per provare al volo ciò che abbiamo pensato: son molto veloci e pratici per tale motivo ma non mi sento di consigliarveli se non in casi particolarissimi che approfondiremo in seguito.

Altro punto importante che iniziamo ad accennare è l’ereditarietà e la priorità delle regole impostate dai css: se diamo due stesse regole allo stesso elemento, magari una nel foglio di stile esterno ed una nell’elemento <style> il motore interpreterà quello a maggior priorità.

In tal caso la regola inserita in <style> andrà a sovrascrivere quella del css esterno. Non preoccupatevi comunque anche questo argomento sarà richiamato successivamente.

Ritorniamo all’argomento principale di questa lezione e vediamo come inserire praticamente i nostri stili.

1. Richiamare i css nelle pagine utilizzando l’attributo style.

L’uso in tal caso è molto semplice.

Supponiamo di voler colorare di rosso un paragrafo. Con questo metodo basta dichiarlo direttamente nell’elemento <p>:

<p style=’color:red’>Hello World!</p>

ed il gioco è fatto.

2. Utilizzare l’elemento <style> nell’head dei nostri documenti XHTML.

Con questo metodo è sufficiente inserire le proprietà direttamente nell’ head:

<html>
 <head>
   <style type=’text/css’ media=’all’>
     p {color:red; }
   </style>
 </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

Style può avere due attributi:
type obbligatorio, che ha la funzione di specificare il tipo; in pratica sarà però sempre e solo text/css e media che serve a specificare a quale piattaforma applicare un foglio di stile (ci torneremo in seguito).

3. richiamare una pagina di stili esterna attraverso l’elemento <link>.

<link rel=’stylesheet’ type=’text/css’ href=’css.css’ media=’all’>

Questo metodo prevede 4 possibili attributi:
type e media con la stessa funzione appena vista, href che serve a specificare i percorso del foglio di stile (obbligatorio) e rel che specifica la relazione tra il foglio di stile ed il documento html. Può assumere due valori: stylesheet e alternate stylesheet.

4. utilizzare la direttiva @import in <style>
Questo metodo, il mio preferito, prevede di indicare il percorso del foglio di testo entro parentesi tonde nell’elemento style nella forma

<style>
 @import url(http://miosito.ext/css.css);
</style>

Maggiori approfondimenti potrete trovarli per questo metodo nel prossimo articolo.
Abbiamo imparato come inserire i css nelle nostre pagine: prossimamente vedremo come sfruttare i css nel massimo della loro potenza. Prima però occorrerà iniziere a capire la classificazione degli elementi di un documento. Tutto questo lo vedremo in una delle prossime lezioni.

L’uso del motodo @import può esser sfruttato anche per permettere l’accesso o l’esclusione di alcuni browser.

Iniziamo con il dire che il W3C ammette una certa possibilità di discrezione nel codice di importazione.

Ammette ad esempio le forme @import url("style.css"); @import url(style.css); o anche @import "style.css"; .
Ci sono però anche altre forme accettate in modo diverso da browser a browser. Questo potrà aiutarci in un modo molto semplice per creare fogli di stile diversi per diversi browser.

Se, ad esempio, volessimo creare due css uno per Internet Explorer versione 4, 5 e 5.5 potremmo richiamarlo con la sintassi @import\ url("style_ie.css");, mentre se volessimo inserire un foglio di stile per tutti gli altri tranne i precendenti basterà richiamare il css in questo modo: @import "style.css"/**/;. (Vedremo successivamente che ci sono altri metodi altrettanto efficaci; ma avere a disposizione due tecniche per fare la stessa cosa, non potrà che esserci utile, no?)

E’ da notare che tale metodo può esser applicato in moltissimi casi. In questa pagina son catalogate 33 possibilità diverse. L’autore ha indicato anche se tali possibilità son approvate dal validatore W3C.

Come leggere la tabella?
Semplicemente: per ogni regola di @import son indicate con una + i browser che la supportano. Mescolando adeguatamente le varie regole potremmo costruire un foglio di stile diverso per ogni browser, una comodità che ci farà utile tra un pò quando noteremo come browser diversi interpretino la strssa regola in modi, per così dire, creativi.

Le misure e le dimensioni nei css, utilizzate in molti ambiti tra i quali e non solo: bordi, altezza e larghezza dei blocchi, grandezza dei caratteri, margini, padding, possono essere espresse in forma relativa oppure assoluta nella forma: numero seguito da due lettere che indicano l’unità di misura. Attenzione agli errori frequenti che possono creare problemi di visualizzazione, in particolare: tra i numeri e la misura non possono esserci spazi. Se la misura è zero non deve esser seguito da unità di misure.

Es.: corrette: 12px; 1.45em; 0;
errate: 12 px, 1. 45em, 0px;

Dimensioni assolute:

• cm: centimetri;
• mm: millimetri;
• in: inches, pollici, dove un pollice = 25,4 mm
• pt: punti, cioè la 72a parte di un inch, circa 0.35mm; in pratica 3pt ~ 1mm
• pc: picas, un sesto di inch, circa 4,2 mm

Tali dimensioni son ottime se usate nella stampa e nei dispositivi a dimensione fissa, son sconsigliabili viceversa a video dato che essi son per loro natura diversi uno dall’altro. Dimensioni assolute comportano a schermo visioni diverse delle proprie pagine da computer a computer. Tenete sempre in mente che il web non è la tipografia classica e che è praticamente impossibile creare siti che siano perfettamente simili su qualsiasi computer.

Dimensioni relative:

• em: dimensione di una lettera m del carattere utilizzato
• px: pixel
• %: percentuale

La dimensione dei pixel dipende dalla risoluzione dei dispositivi utilizzati. Un pixel è la più piccola particella *unica* dello stesso. A video son i vari elementini luminosi che messi assieme formano un’immagine. Un em è la dimensione di una lettera m del set di caratteri utilizzato. Se impostiamo una misura in em essa è riferita alla dimensione dei font del livello contenitore. Praticamente:

body {font-size:20px;}
 div#div1 {font-size:1.5em;}
 div#div2 {font-size:0.8em;}
<body>
 <div id="div1">Bla bla<div id="div2">Bla bla</div></div>
</body>

Il body avrà dimensioni 20px. Div1 avrà dimensione di una volta e mezza quella di body, cioè 30px; Div2 0.8volte quella del suo contenitore quindi 30*0.8=24px. Le dimensioni percentuali seguono lo stesso ragionamento su indicato. Le misure relative son quelle più utilizzate nelle pagine. Il mio consiglio è quello di impostare una dimensione per il body in pixel ed usare em per tutte le altre sezioni. Le misure in pixel dovrebbero esser usate solo per le dimensioni dei bordi dei blocchi.

In questa lezione vedremo come cambiare la forma estetica dei caratteri tipografici utilizzati nelle vostre pagine web.

Fondamentalmente utilizzeremo e modificheremo queste proprietà:

• font-family
• font-style
• font-variant
• font-weight
• font-size
• font

font:

font: <size>  [ / <line-height> ] | <family> | [ <style> | <variant> | <weight> ]

es: font: 12px/18px bolder italic arial;

Con font è possibile indicare in forma compatta tutte le proprietà dei caratteri con le stesse regole che trovate successivamente.

font-family:

font-family:  <nome carattere> | <font generico>;

Es: font-family: Verdana, Arial, sans-serif;

Utilizzando font-family riusciremo a dare un aspetto ai caratteri utilizzati nella pagina. I browser mostreranno il primo carattere, da sinistra, tra quelli utilizzati dal sistema operativo in uso. Nell’esempio precedente stamperà i caratteri in verdana, se non installato, arial altrimenti utilizzerà il font di default per il gruppo sans-serif. Ricordate quindi di provare tutti i caratteri aggiungendone uno la volta a sinistra per controllare l’aspetto estetico avendo cura di indicare una famiglia generica alla fine. I caratteri possono esser raggruppati in due grandi categorie: grazie o serif, che hanno la caratteristica di avere dei *riccioli* di abbellimento e bastoni o sans-serif. In realtà è possibile indicare anche altre 3 famiglie di font: monospace (a spaziatura fissa), cursive e fantasy, famiglie che mi sento di sconsigliarvi ampiamente, tranne alcune eccezioni particolari.

Se il font ha un nome composto da due o più termini, ad es. Times new roman, occorre metterlo tra ".

Es: font-family: "Times new Roman", serif;

font-size:

font-size:  <dimensione> | xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller

dove dimensione può essere una lunghezza, oppure una percentuale.

Larger e smaller son parametri relativi e servono ovviamente ad aumentare o diminuire la dimensione dei font rispetto all’elemento contentitore.

Approfondimenti: Dimensionamento e misure

font-style:

font-style: normal | italic | oblique;

Es: font-style: italic;

Serve a dare lo stile ai caratteri:. Sostituisce il tag html <i>. Oblique e cursive attualmente nella maggior parte dei browser son equivalenti.

font-variant:

font-variant: normal | small-caps;

Tale soluzione serve a dare l’effetto "maiuscoletto" al testo: le lettere maiuscole restano tali, quelle minuscole son riprodotte in maiuscolo ma in un corpo più piccolo.

font-weight:

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

Es: font-weight: 700;

Con tale proprietà facciamo stampare i caratteri con peso diverso. In effetti i browser attuali distinguono tra il peso standard e il bold. Pertanto la scelta si riduce a scegliere tra normal e bold, tenendo in mente che bolder e lighter, attributi relativi possono aumentare o diminuire il peso del carattere rispetto all’elemento contenitore. Sostituisce il tag html <b>. Att: font-weight:bold ed il tag <strong> non sono equivalenti anche se possa sembrare così; font-weight agisce sull’aspetto del font, <strong> sul contenuto semantico del testo racchiuso.

Script visuale per la gestione dei caratteri.