Ecco la seconda parte della nostra guida al CSS, dedicata come da titolo alla struttura del css, ai commenti ed ai selettori.

E’ passato un pò di tempo da quando abbiamo parlato per la prima volta di che cos’è il CSS e finalmente pubblichiamo la seconda parte dedicata appunto ai fogli di stile che ormai caratterizzano pienamente l’era del web 2.0 (assieme ad altri linguaggi, ovviamente).

In quest’articolo, vedremo la struttura generale del CSS e come si inseriscono i commenti (per avere un’idea sul perchè si utilizzano potete utilizzare come riferimento questo articolo, il concetto è lo stesso) e cosa sono e a che servono i selettori.

Cominciamo subito dunque!css

La struttura del CSS

La struttura tipica del css è questa:

selettore{
          Proprietà: Valore;
          Proprietà: Valore
          }

Le parentesi graffe, delimitano il blocco della dichiarazione: la scelta di andare a capo e di inserire gli spazi è puramente un fatto estetico, in modo da rendere il codice più leggibile (identazione).

La prima parte invece, è chiamata selettore: questo può essere un qualsiasi tag HTML (ma, come vedremo più avanti, non per forza).

Ad esempio:

p{color: red}

Renderà di colore rosso tutto il testo contenuto fra i tags <p></p>.

Le coppie proprietà-valore, separate da due punti ‘:‘, rappresentano appunto una proprietà (per esempio, come abbiamo visto, il colore del testo. Ma anche il colore di sfondo, il tipo di carattere, la grandezza) e un valore (il valore del colore in esadecimale, un numero per le grandezze, insomma il valore varia di proprietà in proprietà).

Da ricordare, che ad ogni proprietà equivale uno o più valori mentre lo stesso valore non può essere associato alla stessa proprietà:

p{background color: red}
p{font: 10px Comics Sans, Verdana}

La prima scrittura, come detto poco fà, è sbagliata: non possiamo associare il valore red alle proprietà “Background” (sfondo) e “Color” (colore del testo) in questo modo. Mentre invece è lecito e normale trovare coppie proprietà-valore impostate come nel secondo esempio.

Inoltre c’è altro da aggiungere riguardo al secondo esempio: font infatti, insieme ad una lista di altri selettori che vedremo fra poco, è un selettore che fa uso di proprietà a sintassi abbreviata (shorthand properties).

In pratica, invece di definire:

p{font-size: 10.px;  font-family: Comic Sans, Verdana}

Possiamo appunto utilizzare lo stile visto nell’esempio di poco fà.

Oltre alle proprietà a sintassi abbreviata, esistono anche quelle a proprietà singola. Ecco una lista di selettori che fanno uso di proprietà a sintassi abbreviata:

  • Background,
  • Border,
  • Border-top,
  • Border-right,
  • Border-bottom,
  • Border-left,
  • Cue,
  • Font,
  • List-Style,
  • Margin,
  • Outline,
  • Padding,
  • Pause.

I Commenti

Come già ribadito all’inizio dell’articolo, vi consigliamo la lettura anche di questo che, anche se fà riferimento all’ HTML, il concetto sui commenti non cambia. I commenti in CSS devono cominciare con /* e devono essere chiusi con */

/*Ciao sono un commento in CSS! (ma anche in altri linguaggi :)) */

Spesso vengono utilizzati non solo come utili indicazioni nel caso di future modifiche, ma anche per esempio per l’aggiunta del copyright.

I Selettori

Come abbiamo visto, un foglio di CSS è un insieme di regole, formate da selettore{proprietà:valore}.

Lo scopo di questa parte della guida, è dare più delucidazioni e spiegare i vari modi di utilizzare i selettori.

Selettori di elementi

Come l’esempio iniziale, fra i selettori di elementi rientrano tutti i selettori che sono tags della sintassi di (X)HTML.
Per esempio, sono selettori di sintassi:

h1{ background: blue color: white}
p{background: blue; color: white}
body{background:blue; color: white}

Come i più attenti avranno certo notato, i tre selettori quì sopra hanno stesse proprietà e valori. Ecco quindi un modo per raggrupparli e riasparmiare spazio/temo:

h1,body,p{ background:blue; color:white}

In pratica, basta scrivere i selettori separati da virgole e poi il blocco della dichiarazione.

Selettore Universale

Se volessimo estendere le caratteristiche del codice css a tutti i tags che compongono la nostra pagina, invece di scrivere la lista di tutti i tags avremmo potuto utilizzare quello che si chiama Selettore Universale (Universal selector):

*{ background:blue; color: white}

Selettore del discendente, Selettore del figlio e Selettore dell’ elemento adiacente

La differenza sostanziale fra questi il Selettore del Discendente e il Selettore del Figlio, è che il primo serve a selezionare un elemento contenuto in un’altro, a qualsiasi livello. Il selettore del figlio invece, serve a selezionare elementi direttamente figli del genitore.

Facciamo un paio di esempi per chiarire le idee:

body>p{ color: red}

In questo modo invece, solo se il tag p sarà figlio diretto del tag body allora subirà modifiche nel colore:


    
Questo diventa rosso

    

        
Questo rimane nero

        
Anche questo rimane nero

     

     
Anche questo diventa rosso

Se in questo esempio, avessimo utilizzato il selettore del dipendente, allora anche il testo nel secondo tag p si sarebbe colorato di rosso.

Per quanto riguarda il Selettore dell’ Elemento Adiacente invece, si utilizza in questo modo:

div+p{color: green}

Se noi avessimo inserito questo codice CSS utilizzando l’esempio di poco fà, allora si sarebbe colorato di verde SOLO il primo paragrafo p dopo il tag div( quarta riga).