CSS

–Wikipedia

È un linguaggio usato per definire la formattazione di documenti HTML, XHTML e

XML. Le regole per comporre il CSS sono contenute in un insieme di direttive

(Recommendations) emanate a partire dal 1996 dal W3C.

2

–Wikipedia

L'introduzione del CSS si è resa necessaria per separare i contenuti dalla formattazione e

permettere una programmazione più chiara e facile da utilizzare, sia per gli autori delle

pagine HTML che per gli utenti, garantendo contemporaneamente anche il riuso di codice

ed una sua più facile manutenibilità.

3

p{color: #FF0000;}

4

SELETTORE

PROPRIETÀ VALORE

Box ModelModalità di presentazione

Ogni elemento HTML presenta la propria modalità di presentazione predefinita.

6

- block [hn, p, div, header, section, …]: la larghezza è sempre 100%;

- inline [img, a, span, strong, …]: la lunghezza è definita dal suo contenuto. Due elementi adiacenti risultano affiancati;

7

- inline-block: il contenuto è formattato come block, mentre l’elemento è di tipo inline;

- list-item [li]: l’elemento si comporta come un elemento di lista;

- table-* [table, td, tr, …]: l’elemento si comporta come un’elemento di una tabella

8

- flex: l’elemento si comporta come un elemento flessibile;

- none: l’elemento non viene visualizzato;

9

Box ModelAttributi universali

Ad ogni elemento HTML possono essere applicati due attributi:

11

id=“”class=“”

- l’attributo id è univoco; - può essere usato esclusivamente su un solo tag

all’interno della stessa pagina; - utile ai JavaScript developer.

12

- l’attributo class non è univoco; - può essere usato su tag multipli all’interno della

stessa pagina; - il valore di class può presentare istanze

multiple, separate da spazio.

13

SelettoriTipologie

15

SELETTORE UNIVERSALE applicato a tutti gli elementi * {}

SELETTORE DI TAG applicato al tag p {} strong, em {}

SELETTORE DI CLASSEapplicato agli elementi con la classe specificata

.one {} p.two {}

SELETTORE DI ID applicato all’elemento con l’id specificata #content {}

SELETTORE MULTIPLOapplicato all’elemento con l’id o classi specificate

#test.one {} .button.red {}

SELETTORE FIGLIO applicato al primo elemento figlio li > a {}

SELETTORE DISCENDENTE applicato a tutti gli elementi figli p a {}

SELETTORE GENERICO DI ADIACENZA

applicato all’elemento prossimo, non per forza consecutivo h1 ~ p {}

SELETTORE DI ADIACENZA applicato all’elemento prossimo h1 + p {}

16

SELETTORE DI STATOapplicato quando un elemento modifica il proprio stato

:link {} :hover {} :focus {} :visited {} :active {}

SELETTORE DI LETTERAapplicato alla prima lettera in un paragrafo :first-letter {}

SELETTORE DI LINEAapplicato alla prima linea in un paragrafo :first-line {}

SELETTORE FIGLIO (PRIMO/ULTIMO)

applicato all’elemento figlio (primo/ultimo)

:first-child {} :last-child {}

SELETTORE FIGLIO ENNESIMOapplicato all’elemento figlio ennesimo :nth-child(n) {}

SELETTORE DI ATTRIBUTOapplicato a tutti gli elementi che corrispondono con l’attributo […] {}

SELETTORE DI NEGAZIONEapplicato all’elemento che non corrisponde al selettore :not(…) {}

PSEUDO ELEMENTIapplicato allo pseudo elemento prima e dopo

:before {} :after {}

Box ModelGrandezza di un elemento block

contenuto

18

margin

border

padding