Appunti sul Codice CSS

Sintassi di CSS

Introduzione ai CSS

I CSS sono degli attributi grafici che possiamo agganciare comodamente alle classi di HTML. Il principio dell'appartenenza è fondamentale per specificare a chi vogliamo agganciare i nostri attributi, dunque dobbiamo ricordare che più dettagliatamente specifichiamo il soggetto, più sarà mirato il nostro intervento.

Se mi riferisco contemporaneamente a più di un elemento per gli stessi attributi (spesso sconsigliato ma talvolta utile), basta separare gli elementi con una virgola:

.primoElemento, .secondoElemento {...}

La gerarchia: questione gerarchica

Dovremmo dunque pensare alla gerarchia come se stessimo parlando di un barattolo dentro un barattolo dentro un altro barattolo e così via, fino al dettaglio. I contenitori più grandi sono gli ID e di seguito le Classi.

#CodiceIdentificativo {} È l'area più grande sulla quale interveniamo. È un grande contenitore di classi (come fosse una SuperClass). In HTML lo si crea tramite l'introduzione di id="CodiceIdentificativo".

.ClassName {} La classe identifica un oggetto. È un contenitore di attributi dell'oggetto specifico. In HTML lo si crea tramite l'introduzione di class="ClassName".

Tag comuni

• Tags
• a Link
• b Bold font Scritte semplici
• color Scritte semplici
• img Immagini
• h1, h2, h3... Titoli e sottotitoli
• tbody Corpo Intero
• span Esistenza di un qualcosa al quale voglio attribuire caratteristiche
• div Contenitore di qualcosa
• p Contenitore di qualcosa che va a capo al termine
• table Tabella
• tr Riga -> Table Raw
• td Colonna -> Table Data
• ul Unordered List -> Lista non numerata
• ol Ordered List -> Lista numerata
• li Singolo elemento della lista

Commenti

• // Commento su una linea
• /* COMMENTO SU
  PIÙ LINEE */

Eccezioni e selettori (selectors)

Sono necessarie per specificare dettagliatamente a chi ci riferiamo o a quale situazione!

.classe a:hover

Si applicano nel seguente modo:

• Genitore:first-child Data una lista. Il First Child si riferisce al primo elemento. Spesso è utile per attribuire al primo elemento delle caratteristiche diverse dagli altri elementi in lista.
• Genitore:last-child Data una lista. Il Last Child si riferisce all'ultimo elemento. Spesso è utile per attribuire all'ultimo elemento delle caratteristiche diverse dagli altri elementi in lista.
• .ContenitoreGenitori Genitore:first-of-type Il primo Genitore all'interno di una lista di Genitori!
• .ContenitoreGenitori Genitore:last-of-type L'ultimo Genitore all'interno di una lista di Genitori!
• Scritta::first-letter Prima lettera