/https://www.ilsoftware.it/app/uploads/2023/05/img_6797.jpg "Corso rapido CSS: selettori ed ereditarietà / seconda puntata")
<!– –>Nella precedente puntata del nostro “corso rapido” (ved. questo articolo) abbiamo fatto conoscenza con i selettori di classe: essi consentono di impostare uno stile specifico per determinati gruppi di elementi presenti nella pagina web. Assegnando la classe incipit a vari paragrafi, il browser applicherà lo stile definito nel CSS:
.incipit {
color: #6A94CC;
font-family: Verdana, Arial, sans-serif;
font-size: 1em;
margin-left: 0;
margin-bottom: 25px;
}
Si supponga di voler porre in risalto alcune porzioni del testo inserito utilizzando la tag HTML <strong>. Tutti i browser, non appena trovano tale tag, provvedono ad evidenziare i caratteri in grassetto. Ma se si volesse visualizzare la stringa di caratteri compresa tra <strong> e </strong> con il colore rosso?
Anche in questo caso i CSS accorrono in aiuto.
Certo, si potrebbe creare una nuova classe utilizzando l’attributo class unitamente con la tag <strong>. Ma perché lavorare di più?
Un metodo più pratico consiste nel definire un selettore del discendente: significa che i CSS permettono di selezionare tutti gli elementi che nella struttura ad albero di un documento web sono “figli” di un altro elemento.
.incipit strong {
color: #FF0000;
}
Utilizzando la sintassi precedente, il browser provvederà ad applicare lo stile così definito a tutte le tag <strong> che discendono ossia che sono figlie del selettore di classe incipit.
Abbiamo pubblicato il CSS modificato qui mentre a questo indirizzo è possibile visionare il risultato.
Analizzando il codice HTML della pagina, si noti come lo stile (colorazione rossa) sia stato applicato solo alla prima tag <strong> ossia a quella che discende dal selettore di classe incipit. Il secondo <strong>, utilizzato quasi in calce alla pagina, non è stato influenzato dal nuovo stile.
Il selettore di classe incipit, così come tutti i selettori di classe, può essere applicato a quanti paragrafi si desidera ed addirittura ad altre tipologie di tag (non solo ai paragrafi, quindi).
I selettori di tipo ID (in inglese “ID selector“), invece, possono riferirsi ad un elemento che appaia un’unica volta all’interno di una medesima pagina. I web designer fanno spesso uso dei selettori di tipo ID (indicati nel CSS come #selettore anziché come .selettore) per riferirsi univocamente a sezioni della pagina che appaiono una sola volta nella stessa. Come attributo della tag alla quale si intende associare lo stile definito mediante la specifica del selettore di tipo ID, si dovrà utilizzare id=nomeselettoreid (ad esempio: <p id="spalla"> oppure <body id="paginaprincipale">).
Ereditarietà
Si chiama “ereditarietà” (in inglese, “inheritance“), quella particolare caratteristica dei CSS che consiste dell’applicazione “automatica” agli elementi figlio di tutte le proprietà assegnate ad un elemento padre. Com’è facile immaginare, quindi, tutte le proprietà assegnate alla tag <body> saranno ereditate, ad esempio, dai paragrafi <p> presenti nella medesima pagina web.
Stessa cosa accade quanto, per esempio, si assegna uno stile per i paragrafi ed all’interno di essi sono presenti tag <strong> od <em>.
La caratteristica dell’ereditarietà è fondamentale perché evita che si creino “problemi visuali”: pensate cosa accadrebbe se si assegnasse uno stile ad un paragrafo ma i suoi elementi <strong> non venissero automaticamente adeguati. Parole e frasi rimarrebbero prive di uno stile ed apparirebbero in modo profondamente differente rispetto al testo restante.
Si immagini un selettore di classe che definisca l’utilizzo di un colore #FF0000 ed uno stile specifico, riferito al paragrafo <p>, che è a sua volta figlio della tag interessata dal selettore di classe. Esempio:
p {
color: #FF0000;
margin-left: 50px;
}
.stilepagina {
font-family: "Georgia", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #C0C0C0;
width: 900px;
margin: 0 auto;
}
Si supponga che il selettore di classe sia utilizzato per definire lo stile di <body> (utilizzando <body class="stilepagina">). Come si vede, c’è un conflitto per quanto riguarda il colore da assegnare al testo dei paragrafi (sono elementi discendenti dal <body>). Quale colore attribuirà il browser ai paragrafi? Il rosso (#FF0000) oppure il grigio (#C0C0C0)?
La risposta è: il rosso. Il browser attribuirà lo stile che definisce nel modo più esplicito possibile un elemento.
Cliccando qui troverete un’altra pagina d’esempio. Esaminando il codice HTML della stessa, realizzerete come la pagina sia molto simile a quella del precedente esempio. In più ci sono solamente due blocchi <div>: al primo è assegnato, attraverso l’attributo id il selettore di tipo ID areatesto mentre al secondo il selettore di tipo ID colonna. L’intento è quello di impostare un layout a due colonne.
Lo stile che “sovrintende” il layout grafico della pagina è questo.
I primi quattro stili definiti nel file CSS consentono di annullare le impostazioni di default operate dai vari browser web. Per il browser, infatti, le tag <h1> mostrano contenuti con un font più ampio di <h2>, entrambe le intestazioni vengono proposte in grassetto, le liste puntate vengono indentate e così via. Ricorrendo alla “quaterna” di stili indicati in testa al CSS, tutto ciò viene annullato ed il web designer è così libero di dare sfogo alla sua fantasia ed alle sue abilità.
I selettori di tipi ID #areatesto e #colonna sono utilizzati per assegnare degli stili “ad hoc” ai due blocchi <div> citati in precedenza.
Interessante notare come la tag <h2> presente nel div <areatesto> erediti lo stile del body mentre venga definito uno stile specifico per l’intestazione <h2> contenuta nella colonna di sinistra (#areatesto h2). Analoga operazione è stata effettuata nel caso dei paragrafi (#areatesto p).
I CSS mettono a disposizione anche un “trucchetto” che può essere utile nel caso in cui si voglia essere assolutamente certi che uno stile non venga “sopraffatto” da un altro stile, più specifico.
Esempio pratico:
#articolo a {color: red;}
a {color: orange !important;}
Come abbiamo visto, di norma, ai link contenuti all’interno dell’elemento articolo, verrebbe assegnato il colore rosso. In realtà, grazie all’utilizzo della proprietà !important, in questo caso il browser provvede ad assegnare ai vari link il colore arancione.
/https://www.ilsoftware.it/app/uploads/2024/12/teletrasporto-quantistico-fibra-ottica.jpg "Scoperto e realizzato il teletrasporto quantistico su cavi in fibra: cos'è e come funziona")
/https://www.ilsoftware.it/app/uploads/2024/12/Fibra-Iliad.jpg "Con il Wi-Fi 7, la fibra di Iliad è la migliore per lo streaming e il gaming online")
/https://www.ilsoftware.it/app/uploads/2024/12/tassa-rete-rame-fibra-ottica.jpg "Stop alla tassa sul rame: chi non ha la fibra ottica non pagherà di più")
/https://www.ilsoftware.it/app/uploads/2024/12/xiaomi-home-assistant.jpg "Incredibile, Xiaomi va su Home Assistant in via ufficiale")