Guida CSS di base

[Onsitus]

Guida CSS di base

Benvenuto nel mondo dei CSS...Cascading Style Sheet in inglese, più conosciuti come fogli di stile in italiano.


Per quanto posso, spiegherò le basi per iniziare con l'uso dei CSS.
Aggiungerò links ad articoli più dettagliati man mano che le scrivo.


Questo post si concentra sui CSS2.1 ultime specifiche raccomandate del W3C.

La prossima versione CSS3 è in fase di sviluppo
ma ci vorrà più anni prima che passano come raccomandazione, più che altro dovuto allo scarso sopporto dei browser del momento.

Index di questa mini guida css:

• CSS uso, benefici e compatibilità
  
• Aggiungere i CSS ad una pagina HTML: attributo media e fogli di stile alternativi
  
• Sintassi dei CSS
• I selettori CSS
• Proprietà CSS di base: font(caratteri), text(testo), background(sfondo), border(bordi)
• Box model: width/height(altezza/larghezza), padding(spazi cuscinetti), margin(margine)
• Posizionamento degli elementi: proprietà float e position
  

Per eventuale domande sui CSS potete usare la sezione HTML/CSS di questo forum:

http://www.flepstudio.org/forum/css-html/

Tutorials css, proprietà css, template css, menu css e presentazione dei css3 su:

http://css.flepstudio.org/

[Onsitus]

CSS uso , benefici e compatibilità

I CSS permettono di separare il contenuto dalla formattazione, in breve servono per dare stile a tutta la parte visiva di una pagina web creata in HTML, XHTML, PHP...che sia per posizionare gli elementi (niente più tabelle per il layout), gestire colori, bordi, immagine di sfondo, stile dei moduli e tante altre cose.

Questi fogli di stile possono essere combinati tra loro assegnando valori a delle proprietà CSS per creare l'effetto 'cascade' o, se nessun valore è trovato, i valori sono ereditati da un elemento genitore o da un valore iniziale.
Nota bene che non tutte le proprietà css sono ereditate.

Uno dei benefici dell'effetto cascata è che potete modificare un unico foglio di stile per modificare l'aspetto visivo di un sito intero senza dovere andare a ricercare ogni attributo nell'HTML.

Un altro beneficio è di potere caricare i CSS come file esterno. Il risultato è una pagina più leggera con meno tag in uso e con il fatto che il file .css rimane in cache nella memoria del pc, la pagina è caricata ancora più velocemente.

Al livello accessibilità, i CSS offrono la possibilità di potere caricare differenti fogli di stile specifici che sia per browser di tipo desktop, cellulare, stampante... che di tipo braille o sintetizzatori vocali.

Compatibilità

Il peggio browser (ed anche uno dei più diffusi) è Internet Explorer che interpreta in modo errato certe proprietà o ignora completamente certe.

La soluzione più usata dei designer per corregere quelle errore (tra script per rivelare il tipo/versione del browser, hack, filtri...)è di applicare un foglio di stile specifico per Internet Explorer via i commenti condizionali, ignorati dagli altri browsers ed inseriti nelle tag 'head'.
Esempi:

Per tutte le versione di Internet Explorer:
 <!--&#91;if IE&#93;><link rel="stylesheet" type="text/css" href="ie_stile.css"  /><!&#91;endif&#93;-->

 Solo per Internet Explorer 7:
 <!--&#91;if IE 7&#93;><link rel="stylesheet" type="text/css" href="ie_stile.css"  /><!&#91;endif&#93;-->

 Per versione superiore a Internet Explorer 5:
 <!--&#91;if gt IE 5&#93;><link rel="stylesheet" type="text/css" href="ie_stile.css"  /><!&#91;endif&#93;-->

 Per versione di Internet Explorer 5 o superiore:
 <!--&#91;if gte IE 5&#93;><link rel="stylesheet" type="text/css" href="ie_stile.css"  /><!&#91;endif&#93;-->

 Per versione inferiore a Internet Explorer 7:
 <!--&#91;if lt IE 7&#93;><link rel="stylesheet" type="text/css" href="ie_stile.css"  /><!&#91;endif&#93;-->

 Per versione di Internet Explorer 6 o inferiore
 <!--&#91;if lte IE 6&#93;><link rel="stylesheet" type="text/css" href="ie_stile.css"  /><!&#91;endif&#93;-->

 Per versione differente di Internet Explorer 7
 <!--&#91;if !IE 7&#93;><link rel="stylesheet" type="text/css" href="ie_stile.css"  /><!&#91;endif&#93;-->

Firefox ha un buon supporto generale dei css. Per quello, è usato per la verifica durante la creazione delle pagine web.
Se il risultato finale differì tra Internet Explorer e Firefox, Firefox è il browser per basarsi sulla reale interpretazione dei css applicati (e non il contrario).

Safari e Konqueror (principalmente per gli utenti Mac) sono i browser che interpretano al meglio le proprietà css che sia per la versione attuale che
per la versione CSS3 in fase di sviluppo.

[Onsitus]

Aggiungere i CSS ad una pagina html


I fogli di stile possono essere caricati esternamente (file salvato con estensione .css) o inclusi dentro l'HTML.


Per caricare un foglio di stile esternamente, inserire uno dei seguenti codici tra i tag con relativa url al file .css.

<head>
<title>Titolo pagina</title>
<link rel="stylesheet" type="text/css" href="stile.css"  />
</head>

o

<head>
<title>Titolo pagina</title>
<style>
@import url(stile.css);
</style>
</head>

Per inserire lo stile direttamente nell' HTML, aggiungere le regole CSS sempre tra i tag di questa maniera:

<head>
<title>Titolo pagina</title>
<style type="text/css">
selettore {
proprietà: valore;
}
</style>
</head>

Esempio:

<head>
<title>Titolo pagina</title>
<style type="text/css">
body {
background: #FFFFCC;
}
</style>
</head>

Si può anche dare lo stile inlinea ad un unico elemento con il seguente format:

<elemento style="regole css">

Esempio:

<p style="background-color:#000000;">Sono un paragrafo a sfondo nero</p>

Attributo Media

Con l'attributo media possiamo speficificare il supporto a quale applicare il stile css come per un browser web,
la stampa o anche un browser di tipo vocale.

I suoi valori possono essere:

• all: per tutti i dispositivi
• screen: per i browser comuni
• print: per la stampa della pagina
• projection: per proiezioni
• aural: per browser a sintesi vocale
• braille: per supporti di tipo braille
• embossed: per la stampa in braille
• handheld: per cellulari. palmari...
• tty: per dispositivi a carattere fisso
• tv: per la Web-tv

Questo attributo media può essere applicato sia agli elementi 'link' che 'style'.
Esempio:

<link rel="stylesheet" type="text/css" href="stile.css" media="screen" />

o

<style type="text/css" media="screen">...</style>

Gli fogli di stile possono essere combinati tra di loro per specificarne uno per ogni media:

<link rel="stylesheet" type="text/css" href="stile.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Fogli di stile alternativi

Possiamo dare la scelta a l'utente di cambiare il foglio di stile, specificando un foglio di stile alternativo (con layout, colori, font-size...diversi) cambiando il valore del attributo 'rel' da 'stylesheet' ad 'alternate stylesheet'.
Esempio:

<link rel="stylesheet" type="text/css" href="stile.css"  />
<link rel="alternate stylesheet" type="text/css" href="alternate.css"  />

NB: per permettere il cambio dinamico del foglio di stile da uno di default a uno di tipo alternativo,
servirà implementare un script spesso creato in Javascript.

[Onsitus]

Sintassi dei CSS

I CSS sono costituiti d'un insieme di regole e se necessario di commenti.

Le regole CSS comprendono un selettore ed un blocco di dichiarazione (le proprietà css da applicare e valore)


Con lo stesso esempio del paragrafo visto prima in css diventerebbe:
p: il selettore, l'elemento HTML a quale è applicato la regola
background-color: la proprietà css (l'equivalente dell'attributo in HTML)
#000000: il valore passato alla proprietà

Il tutto scritto della seguente maniera per creare una regola css:

p{background-color: #000000;}

selettore{proprietà: valore;}

NB: Un blocco di dichiarazione può avere più proprietà con relative valore applicate...

p{background-color: #000000; font-size:16px;}

o più selettori possono condividere lo stesso blocco di dichiarazione...

h1, h2, h3{font-size: 30px; color: red;}

Il codice CSS può essere commentato come tanti gli altri linguaggi usando:

/*scrivi il tuo commento qui*/

[Onsitus]

I selettori CSS

Come lo dice il nome stesso, i selettori permettono di selezionare l'elemento HTML a quale sarà applicato le regole css.

I metodi comuni per loro uso sono di selezionare direttamente un elemento HTML, usare delle classe (.class) o un identificatore (#id).

Selettori di tag

Un qualunque elemento html (h1, h2, h3, p, table, form, input...) può essere usato come selettore.
Esempio:

h1{
background-color: #666666;
font-size: 20px;
color: #FFFFFF;
}

In questo esempio tutti gli elementi h1 avranno uno sfondo grigio scuro, con un font di misura 20px e di colore bianco.

Selettore .class

Il selettore .class può essere riusato per più elementi che condividerano le stesse regole CSS basato sul nome della classe.

Esempio dell'uso della classe come selettore css:

Un paragrafo con un nome classe "miaClasse":

<p class="miaClasse">Paragrafo con una class</p>

Nel css, il paragrafo è selezionato con nome della classe più un . davanti:

p.miaClasse{
border: 1px solid red;
}

In questo esempio, lo stile CSS è applicato solo ai paragrafi con la classe 'miaClasse'.

Le classe possono essere usate per piu elementi di tipo differente.

<div class="miaClasse">Blocco con una classe</div>
<p class="miaClasse">Paragrafo con una classe</p>

Nel css, gli elementi sono selezionati con nome della classe più un . davanti:

.miaClasse{
border: 1px solid red;
}

In questo caso, lo stile CSS è applicato a tutti gli elementi HTML con la classe 'miaClasse' (div e p avranno un bordo rosso di 1 px).

NB: si possono combinare più classi per un unico elemento.

<p class="miaClasse1 miaClasse2">Paragrafo con due classi</p>

Selettore #id

Il selettore #ID ha un nome unico che non può essere riusato per altri elementi. Le regole CSS sono applicate ad un elemento specifico basato sul nome ID.

Esempio dell'uso dell'identificatore come selettore css:
Un paragrafo con un nome id "mioID":

<p id="mioID">Paragrafo con id unico</p>

Nel css, l'elemento è selezionato dal nome id con # davanti:

#mioID{
/*regola css*/
}

Ad un livello più avanzato ci sono altri selettori disponibile per selezionare uno o piu elementi come il selettore universale, selettori basati sulla relazione tra gli elementi o un loro attibuto...

Per maggiori informazioni sui metodi disponibile per selezionare un elemento a quale applicare lo stile css:
Selettori css, classe, id, pseudo-classi e pseudo-elementi - CSS e CSS3 blog con tutorials e risorse per css3 e css

[Onsitus]

Proprietà CSS di base - caratteri, testo, sfondo e bordi


Proprietà CSS font (caratteri)

Con questa proprietà possiamo cambiare la forma estetica dei caratteri per un specifico elemento o la pagina intera.

• font-family: il nome del carattere o un font generico
  Esempio: font-family: "Times new Roman", serif;
• font-style: lo stile del carattere oblique (italic) o cursive (oblique)
  Esempio: font-style: italic;
• font-variant: effetto 'maiuscoletto' per il testo
  Esempio: font-variant: small-caps;
• font-weight: il peso del carattere da normale a grassetto
  Esempio: font-weight: bold;
• font-size: dimensione del carattere in px, em, %, pt o parole chiave
  Esempio: font-size: large;

Questi valori possono essere combinati in una unica riga con la proprietà font:

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

Esempio1: font: 12px arial bold;
Esempio2: font: 14px/20px arial oblique lighter;


Proprietà CSS text (testo)

Con la proprietà css text possiamo cambiare la forma estetica del testo come colore, allineamento, decorazione, indentazione...

• color: colore del testo definito con parole chiave key, #rrggbb, #rgb (forma ridotta), rgb (r, g, b,) o rgb (r%,g%,b%)
  Esempio: color: #FFFFFF;
• text-align: allineamento del testo sinistra(left) , destra(right), centrato(center)...
  Esempio: text-align: center;
• text-decoration: la decorazione del testo come sottolineato (underline), barrato (line-through), sopralineato(overline)...
  Esempio: text-decoration: underline;
• text-indent: indentatura della prima riga d'un paragrafo in px o %
  Esempio: text-indent: 20px;

Le altre proprietà del testo coprono ombreggiature(text-shadow), trasformazione delle lettere(text-transform), direzione del testo (direction) , gestione del spazio tra parole (word-spacing) e dei spazi bianchi (white-space).


Proprietà CSS background (sfondo)

Con la proprietà background possiamo cambiare il colore e/o inserire e posizionare un immagine di sfondo.

• background-color: il colore di sfondo
  Esempio: background-color: black;
• background-image: l'aggiunto d'un immagine di sfondo con url
  Esempio: background-image: url(sfondo.jpg);
• background-position: la posizione dell'immagine di sfondo in relazione all'elemento che la contiene
  Esempio: background-position: top right;
• background-repeat: possibilità di duplicare l'immagine di sfondo verticalmente e orizzontalmente
  Esempio: background-repeat: repeat-x;
• background-attachment: possibilità di scegliere se l'immagine di sfondo è fisso o scrollabile con il corpo della pagina
  Esempio: background-attachment: scroll;

Questi valori possono essere combinati in una unica riga con la proprietà background:

background: <color> | <image>  | [ <repeat> | <attachment> | <position>;

Esempio: background: #FFFFFF url(sfondo.jpg) no-repeat scroll top right;

Per appronfondire la proprietà css background: CSS Background: color, image, repeat, position, attachment


Proprietà CSS border (bordi)

Con la proprietà CSS border possiamo aggiungere bordi di differenti stili , colori e spessore.

• border-style: il stile del bordo che sia continuo (solid), trattegiato(dashed), punteggiato(dotted), doppio(double)...
  Esempio: border-style: double;
• border-color: il colore del bordo
  Esempio: border-color: #000000;
• border-width: il spessore del bordo in px o %
  Esempio: border-width: 2px;

Questi valori possono essere combinati in una unica riga con la proprietà border:

border: <valore spessore> | <valore stile> |  <valore colore>;

Esempio: border: 4px solid red;

Si può anche specificare, lo stile di un lato specifico: superiore (border-top), inferiore (border-bottom), destra(border-right), sinistra(border-left).
Esempio: border-right: 1px dotted #000000;

o applicare il stile o il colore o il spessore ad un unico lato:
Esempio: border-left-color: black;

Finalmente con una dei proprietà border-style, border-width, border-color, possiamo dare un stile ad ogni lato in una unica riga.
Esempio: border-width: 2px 4px 2px 4px;
In senso orario abbiamo:

<valore top> | <valore right> | <valore bottom> |  <valore left>

Possono anche essere combinati per dare stile a top/bottom e right/left.
Esempio: border-color: #000000 #CCCCCC;

<valore top/bottom> | <valore right/left>

[Onsitus]

Box model

Il box model può essere comparato ad una scatola (un blocco) che contiene il nostro contenuto e/o altri elementi html.
In HTML, troviamo elementi inlinea (es: span, a, strong...) ed elementi di blocco (es: div, p, ul, table, form...).

Le proprietà css per modificare il box model vengono applicate ad elementi di blocco. Non possiamo per esempio specificare una larghezza per un elemento inlinea come uno span.

NB: un elemento inlinea può essere convertito in elemento di blocco via la proprietà css display con display:block;

Per maggiore informazione sugli elementi inlinea e di blocco e la proprietà display:
http://css.flepstudio.org/css-tips/block-inline.html
http://css.flepstudio.org/css-proprieta/display.html

Il box model è costituito d'una larghezza/altezza, spazzi cuscinetti, bordi e margine modicabile con le proprietà css:

• width/height: larghezza/altezza del contenuto in unità di misura (es:px) o percentuale(es:em - relativo alla misura del blocco contenitore)
  Esempio: width: 20%;
• padding: spessore (spazi cuscinetti) tra il contenuto e il suo bordo in unità di misura o percentuale. Come per i bordi, possiamo specificare uno spessore inferiore (padding-bottom), superiore (padding-top), destra (padding-right) o sinistra (padding-left)
  Esempio: padding: 3em; o padding-left: 5%; padding-top: 5%; o padding: 10px 0 6px 2px;
• border: bordi dell'elemento di blocco (spiegato nelle proprietà di base)
• margin: spessore trasparente (margine) tra l'elemento di blocco e gli altri elementi in unità di misura o percentuale. Di nuovo, possiamo specificare uno margine inferiore (margin-bottom),
  superiore (margin-top), destra (margin-right) o sinistra (margin-left)
  Esempio: margin: 8%; o margin-right: 15px;margin-bottom: 10px; o margin: 10px 5px;

La misura totale dell'elemento di blocco uguale width/height + padding + bordi + margine.
Esempio:

div {
width: 200px;
padding: 10px;
border: 5px solid black;
margin: 20px;
}

Il nostro div in quel caso sarà largo di 270px in totale: 200px di larghezza contenuto, 20px di padding (10 sopra, 10 sotto), 10 di bordi (5 sopra, 5 sotto), 40 di margine (20 sotto, 20 sopra).

Anche da considerare, la proprietà css overflow che indica al browser che fare con il contenuto che supera il suo blocco contenitore quando un'altezza (height) e larghezza (width) sono specificati.

Per maggiore informazione e esempi concreti del box model: http://css.flepstudio.org/box-model

[Onsitus]

Posizionamento degli elementi

Come spiegato prima, con la proprietà display possiamo cambiare la visualizzazione degli elementi da un elemento inlinea (come un elemento span che rimane in riga e prende una larghezza minimale) ad un elemento di blocco (come un paragrafo, un blocco con un stacco superiore e inferiore e che prende tutto la larghezza disponibile se non specificamente dato una larghezza fissa) e vice versa... In sei stessa, questa proprietà css può cambiare l'aspetto generale d'una pagina.

Per creare il layout di un pagina e posizionare gli elementi, usiamo altre proprietà css: float e position.

Proprietà css float

Il float toglie l'elemento del flusso normale della pagina e lo posiziona a destra (float:right;) o a sinistra (float:left;) dentro il suo elemento contenitore (può essere il corpo stesso della pagina come può essere un div per esempio). Il resto del contenuto seguirà il movimento, spostandosi nel lato opposto dell'elemento floatato per riempire eventuale spazio disponibile.

NB: altro che per gli immagini (img), una larghezza (width) deve sempre essere specificata per usare la proprietà float.

Esempio della proprietà float con un immagine e un blocco di testo...

Insieme alla proprietà float viene spesso usato la proprietà css clear. Il clear, valido solo per elementi di blocco, permette che i lati d'un elemento floatato rimangono vuoti usando clear: right; , clear: left; , clear:both.

Il clear:both; è usato come hack per evitare il collasso del sfondo dell'elemento contenitore.
Per esempio, se un div contenitore con uno sfondo nero contiene elementi floatato, la sua altezza si azzera automaticamente visto che il suo contenuto è stato rimosso del flusso normale e perde il suo 'spessore'. Con l'uso d'un clear:both; dopo gli elementi floatato, il contenitore recupera la sua altezza reale. Questo metodo è comunemente conosciuto come il clearfix.

Proprietà css position

Questa proprietà ci permette di posizionare precisamente gli elementi del nostro layout in modo relativo o assoluto in rapporto al suo contenitore o in modo fisso in rapporto alla finestra del browser.

position: relative;

Con il valore relative, l'elemento è posizionato in relazione al suo contenitore. Possiamo posizionare questo elemento più precisamente usando le proprietà top(superiore), right(destra), bottom (inferiore) e left(sinistra) con valore d'unita di misura o percentuale.

Il valore di queste proprietà indica l'allontanamento verticale e/o orizzontale tra i bordi del elemento contenitore e dell'elemento a quale è applicato il position: relative; (un po come delle margine).

position: absolute;

L'elemento in questo caso è tolto del tutto del flusso normale della pagina. Questo elemento è posizionato in modo assoluto in relazione al suo contenitore solo se lui stesso ha la proprietà position applicata (che non sia static, il valore di default). Se no, la sua posizione sarà basata sul l'elemento HTML stesso della pagina (la parte visiva della finestra del browser).

Con le proprietà top, right, bottom, left, possiamo dare coordinate precise in unita di misura o percentuale.
Per esempio con la proprietà bottom e il valore 10px, il bordo inferiore dell'elemento si troverà precisamente a 10px del bordo inferiore del suo contenitore.

position: fixed;

La posizione fissa ha le stesse proprietà che per il modo assoluto. I punti importanti è che la sua posizione è sempre relativa alla parte visiva della finestra del browser e che l'elemento rimane sempre fisso al suo posto anche se il resto della pagina è scorrevole.

Per appronfondire questa proprietà: CSS position