guida online html5 & css3

Cascading Style Sheets (CSS)

Introduzione

I fogli di stile sono insiemi di regole che indicano al browser come visualizzare singoli elementi o gruppi di elementi sulla pagina. Ciascuna regola contiene una o più proprietà. Sono nati per tenere separati il contenuto del markup html dalla sua presentazione. In qualsiasi caso il w3c depreca l'utilizo degli attributi di presentazione presenti nel linguaggio html.

Sintassi di una regola

Una regola è fatta di due parti

selettore/i { nomeProprietà: valore[unità di misura]; nomeSecondaProprietà: valore; ~proprietaN: valore [;] }

body { width: 1024px; background-color: rgba(255,255,255,1); }

ATTENZIONE: CSS è un linguaggio case sensitive;

Dove si scrivono le regole

Direttamente nel documento html

L'insieme delle regole viene scritto in un tag <style type="text/css"> generalmente vengono indicate nella sezione <head> del documento. È il metodo meno efficiente perchè, partendo dal presupposto che un sito deve avere le stesse regole su tutte le pagine, ci costringerebbe a riscrivere il tag <style> su tutte le pagine. Inoltre, in fase di modifica o manutenzione, voler cambiare anche una sola proprietà ci costringerebbe ad aprire e modificare tutte le pagine del sito.

Si utilizza esclusivamente quando una particolare pagina web presenta qualche difformità rispetto al'equilibrio generale del sito.

Esternamente al documento

L'insieme delle regole viene scritto all'interno di un file di testo avente estensione .css. In tal modo il file diventa un foglio di stile, linkabile a tutte le pagine del sito che ne assumono le regole. In fase di modifica, di aggiunta, di revisione degli stili, basterà agire sul foglio di stile per modificare tutte le pagine che vi fanno riferimento. il riferimento viene creato nella sezione <head> del documento:

<link type="text/css" rel="stylesheet" href="URL del foglio di stile">

Inline

Le proprietà vengono scritte direttamente nel markup sull'elemento tramite l'attributo style. Questo tipo viene chiamato stile inline. NOTA: è assolutamente deprecato.

<nomeTag style="proprietà:valore; proprietà1: valore1; proprietàN: valoreN;">

<h1 style="color:orange;">

Tipi di selettore

tag

Un selettore di tag agisce su tutte le volte che quel tag specifico appare sulla pagina (su tutte le istanze del tag).

p { font-size: 12px; }

composto

Indica la sequenza specifica all'interno della quale il selettore applica le proprietà CSS. I selettori composti si leggono da destra verso sinistra. Servono a selezionre in maniera più specifica: perchè le proprietà descritte nella regola vengano applicate, il selettore (ultimo elemento a destra) deve trovarsinidificato negli elementi alla sua sinistra.

selettoreEsterno1 ... selettore esternoN selettore { proprietà; }

multiplo

Seleziona contemporaneamente più di un elemento. La regola elenca gli elementi selezonati separati da una virgola. Le proprietà vengono applicate a tutti i selettori.

selettore1, selettore2, selettoreN { proprietà }

.dati-finanziari tbody tr th, .dati-finanziari tbody tr td { padding: 10px;}

classe

Selettore arbitrario, cioè non legato ad alcun tag specifico, ma applicabile ad uno o più elementi tramite l'attributo "class". Il nome di una classe deve:

avere come prefisso il carattere (.);

non deve avere come primo carattere un numero;

contenere solo alfanumerici, trattino, sottolineatura.

NOTA: una classe può essere applicata ad un numero indistinto di elementi sulla stessa pagina.

id

Selettore arbitrario, cioè non legato ad alcun tag specifico, ma applicabile ad un elemento tramite l'attributo "id". Il nome di un id deve:

avere come prefisso il carattere (#);

non deve avere come primo carattere un numero;

contenere solo alfanumerici, trattino, sottolineatura.

NOTA: una classe può essere applicata ad un numero indistinto di elementi sulla stessa pagina.

pseudo-elemento

Seleziona uno o più elementi in base alla loro posizione specifica all'interno di una sequenza, consentendo di individuare il primo (:first-child), i pari (:nth-of-type(even)), i dispari (:odd), il terzo (:nth-child(3)), etc.

selettore:pseudoelemento {proprietà}

.dati-finanziari tr td:nth-child(3)

pseudo-selettore

Identifica il comportamento di un elemento quando un utente si trova ad interagire con esso. Ad es. il puntatore del mouse si trova su un elemento (:hover), l'utente clicca sull'elemento (:active), ecc. Lo pseudoselettore, che eredita tutte le proprietà del selettore cui fa riferimento, deve esere descritto dopo il selettore di riferimento.

selettore:pseudoselettore { proprietà; }

nav ul li a:hover { color: coral; }

selettore di attributo

Seleziona un elemento in base alla presenza di un determinato attributo.

SINTASSI PER LA SELEZIONE IN BASE ALLA SOLA PRESENZA DI UN ATTRIBUTO

selettore[nomeAttributo]

a[title] { color: blue;}

sintassi per la selezione in base alla presenza di un attributo che abbia un determinato valore

selettore[nomeAttributo="valore"] {proprietà}

a[title="riferimento"] { color: blue;}

Il selettore di attributo, in concomitanza con operatori diversi dal simbolo "=", può selezionare elementi il cui valore approssimi al valore indicato.

selettore :before e :after

Servono ad inserire, creandolo dal nulla, del contenuto prima o dopo il tag cui fanno riferimento. La proprietà content, indispensabile per il suo funzionamento, indica il contenuto che verrà creato on fly. Il contenuto creato in tal modo non è presente sul markup, ma viene generato dal foglio di stile, visualizzabile nel browser con "ispeziona codice sorgente".

selettore:after { proprietà; }

nav ul li a:after { content: '/'; color: ...; margin: ...}

Proprietà dei CSS

Inheritance (Ereditarietà)

L'html è una struttura gerarchica (DOM) nella quale alcuni elementi sono nodificati all'interno di altri. In generale: proprietà applcate ad elementi di livello superiore, vengono automaticamente ereditati dagli elementi contenuti.

Specificità

Regole più specifiche, riferite quindi ad elelemtni selezionati in maniera più specifica (nav a), vengono applicate solo agli elementi che selezionano ed hanno precedenza su regole più generali o ereditate.

Cascading

Quando sullo stesso elemento intervengono più selettori, a ciascun selettore viene assegnato un punteggio (priorità) in base a:

specificità

livello di vicinanza all'elemento selezionato