033.2 Lezione 1
Certificazione: |
Web Development Essentials |
---|---|
Versione: |
1.0 |
Argomento: |
033 Stile dei Contenuti con i CSS |
Obiettivo: |
033.2 Selettori CSS e Applicazione di Stili |
Lezione: |
1 di 1 |
Introduzione
Quando scriviamo una regola CSS, dobbiamo indicare al browser a quali elementi si applica la regola. Lo facciamo specificando un selettore: uno schema che può corrispondere a un elemento o a un gruppo di elementi. I selettori sono disponibili in molte forme diverse, basate sul nome dell’elemento, i suoi attributi, il suo posizionamento relativo nella struttura del documento, o una combinazione di queste caratteristiche.
Stili per l’Intera Pagina
Uno dei vantaggi di usare i CSS è che non è necessario scrivere regole individuali per gli elementi che condividono lo stesso stile. Un asterisco applica la regola a tutti gli elementi della pagina web, come mostrato nel seguente esempio:
* {
color: purple;
font-size: large;
}
Il selettore *
non è l’unico metodo per applicare una regola di stile a tutti gli elementi della pagina. Un selettore che semplicemente corrisponde a un elemento per il suo nome di tag è chiamato un selettore di tipo, quindi qualsiasi nome di tag HTML come body
, p
, table
, em
e così via può essere usato come selettore. Nei CSS, lo stile è ereditato dai suoi elementi figli. Quindi, in pratica, usare il selettore \*
ha lo stesso effetto di applicare una regola all’elemento body
:
body {
color: purple;
font-size: large;
}
Inoltre, la caratteristica “a cascata” dei CSS permette di mettere a punto le proprietà ereditate di un elemento. Puoi scrivere una regola CSS generale che si applica a tutti gli elementi della pagina, e poi scrivere regole per elementi specifici o gruppi di elementi.
Se lo stesso elemento corrisponde a due o più regole in conflitto, il browser applica la regola del selettore più specifico. Prendiamo come esempio le seguenti regole CSS:
body {
color: purple;
font-size: large;
}
li {
font-size: small;
}
Il browser applicherà gli stili color: purple
e font-size: large
a tutti gli elementi dentro l’elemento body
. Tuttavia, se ci sono elementi li
nella pagina, il browser sostituirà lo stile font-size: large
con lo stile font-size: small
, perché il selettore li
ha una relazione più forte con quest’ultimo rispetto al selettore body
.
I CSS non limitano il numero di selettori equivalenti nello stesso foglio di stile, quindi puoi avere due o più regole che usano lo stesso selettore:
li {
font-size: small;
}
li {
font-size: x-small;
}
In questo caso, entrambe le regole sono ugualmente specifiche per l’elemento li
. Il browser non può applicare regole contrastanti, quindi sceglierà la regola che viene dopo nel file CSS. Per evitare confusione, la raccomandazione è di raggruppare tutte le proprietà che usano lo stesso selettore.
L’ordine in cui le regole appaiono nel foglio di stile influisce su come vengono applicate nel documento, ma puoi sovrascrivere questo comportamento usando una regola importante. Se, per qualsiasi ragione, vuoi mantenere le due regole li
separate, ma forzare l’applicazione della prima invece della seconda, segna la prima regola come importante:
li {
font-size: small !important;
}
li {
font-size: x-small;
}
Le regole marcate con !important
dovrebbero essere usate con cautela, perché rompono la naturale sequenza dei fogli di stile e rendono più difficile trovare e correggere i problemi all’interno del file CSS.
Selettori Restrittivi
Abbiamo visto come poter cambiare certe proprietà ereditate usando selettori che corrispondono a tag specifici. Tuttavia, di solito abbiamo bisogno di usare stili distinti per elementi dello stesso tipo.
Gli attributi dei tag HTML possono essere incorporati nei selettori per limitare l’insieme degli elementi a cui si riferiscono. Supponiamo che la pagina HTML su cui stai lavorando abbia due tipi di liste non ordinate (<ul>
): una è usata all’inizio della pagina come menu per le sezioni del sito web e l’altro tipo è usato per liste convenzionali nel corpo del testo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Basics</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/articles">Articles</a></li>
<li><a href="/about">About</a></li>
</ul>
<div id="content">
<p>The three rocky planets of the solar system are:</p>
<ul>
<li>Mercury</li>
<li>Venus</li>
<li>Earth</li>
<li>Mars</li>
</ul>
<p>The outer giant planets made most of gas are:</p>
<ul>
<li>Jupiter</li>
<li>Saturn</li>
<li>Uranus</li>
<li>Neptune</li>
</ul>
</div><!-- #content -->
<div id="footer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/articles">Articles</a></li>
<li><a href="/about">About</a></li>
</ul>
</div><!-- #footer -->
</body>
</html>
Per impostazione predefinita, ogni elemento della lista ha un pallino nero alla sua sinistra. Potresti voler rimuovere i pallini dall’elenco del menu in alto lasciandoli nell’altro elenco. Tuttavia, non puoi semplicemente usare il selettore li
perché così facendo rimuoveresti anche i pallini nell’elenco all’interno della sezione del corpo del testo. Hai bisogno di un modo per dire al browser di modificare solo gli elementi dell’elenco usati in un elenco, ma non nell’altro.
Ci sono diversi modi per scrivere selettori che corrispondano a specifici elementi nella pagina. Come detto prima, vedremo prima come usare gli attributi degli elementi per farlo. Per questo esempio in particolare possiamo usare l’attributo id
per specificare solo la lista superiore.
L’attributo id
assegna un identificatore unico all’elemento corrispondente, che possiamo usare come selettore della regola CSS. Prima di scrivere la regola CSS, modifica il file HTML di esempio e aggiungi id="topmenu"
all’elemento ul
usato per il menu superiore:
<ul id="topmenu">
<li>Home</li>
<li>Articles</li>
<li>About</li>
</ul>
C’è già un elemento link
nella sezione head
del documento HTML che punta al file del foglio di stile style.css
nella stessa cartella, quindi possiamo aggiungervi le seguenti regole CSS:
ul#topmenu {
list-style-type: none
}
Il carattere hash è usato in un selettore, dopo un elemento, per designare un ID (senza spazi di separazione). Il nome del tag a sinistra dell’hash è opzionale, poiché non ci saranno altri elementi con lo stesso ID. Pertanto, il selettore potrebbe essere scritto semplicemente come #topmenu
.
Anche se la proprietà list-style-type
non è una proprietà diretta dell’elemento ul
, le proprietà CSS dell’elemento genitore sono ereditate dai suoi figli, quindi lo stile assegnato all’elemento ul
sarà ereditato dai suoi elementi li
figli.
Non tutti gli elementi hanno un ID attraverso il quale possono essere selezionati. Solo alcuni elementi chiave del layout di una pagina dovrebbero avere un ID. Considera le liste di pianeti usate precedentemente nel codice di esempio. Sebbene sia possibile assegnare ID unici per ogni singolo elemento ripetuto, questo metodo non è pratico per pagine più lunghe con molti contenuti. Piuttosto, possiamo usare l’ID dell’elemento padre div
come selettore per cambiare le proprietà dei suoi elementi interni.
Tuttavia l’elemento div
non è direttamente collegato alle liste HTML, quindi aggiungere la proprietà list-style-type
a esso non avrà alcun effetto sui suoi figli. Quindi, per cambiare il pallino nero nelle liste all’interno del contenuto div
in un pallino vuoto, dovremmo usare un selettore discendente:
#topmenu {
list-style-type: none
}
#content ul {
list-style-type: circle
}
Il selettore #content ul
è chiamato selettore discendente perché corrisponde solo agli elementi ul
che sono figli dell’elemento il cui ID è content
. Possiamo usare tanti livelli di discendenza quanti sono necessari. Per esempio, usando #content ul li
si troverebbero solo gli elementi li
che sono discendenti di elementi ul
che sono discendenti dell’elemento il cui ID è content
. Ma in questo esempio, il selettore più lungo avrà lo stesso effetto dell’uso di #content ul
, perché gli elementi li
ereditano le proprietà CSS impostate sul loro genitore ul
. I selettori discendenti sono una tecnica essenziale quando il layout della pagina cresce in complessità.
Diciamo che ora vuoi cambiare la proprietà font-style
degli elementi della lista nel topmenu
e nella lista nel footer div per farli sembrare obliqui. Non puoi semplicemente scrivere una regola CSS usando ul
come selettore, perché cambierebbe anche gli elementi della lista nel content div. Finora abbiamo cambiato le proprietà CSS usando un selettore alla volta, e questo metodo può essere usato anche per questo compito:
#topmenu {
font-style: oblique
}
#footer ul {
font-style: oblique
}
I selettori separati però non sono l’unico modo per farlo. I CSS ci permettono di raggruppare i selettori che condividono uno o più stili, usando una lista di selettori separati da virgole:
#topmenu, #footer ul {
font-style: oblique
}
Raggruppare i selettori elimina il lavoro extra di scrivere stili duplicati. Inoltre, potresti voler cambiare nuovamente la proprietà in futuro e potresti non ricordarti tutti i diversi luoghi dove doverla cambiarla.
Classi
Se non vuoi preoccuparti troppo della gerarchia degli elementi, puoi semplicemente aggiungere una classe
all’insieme di elementi che desideri personalizzare. Le classi sono simili agli ID, ma invece di identificare un solo elemento nella pagina, possono identificare un gruppo di elementi che condividono le stesse caratteristiche.
Prendi la pagina HTML di esempio su cui stiamo lavorando. È improbabile che nelle pagine del mondo reale troveremo strutture così semplici, quindi sarebbe più pratico selezionare un elemento utilizzando solo le classi o una combinazione di classi e relativa discendenza. Per applicare la proprietà font-style: oblique
agli elenchi di menu utilizzando le classi, prima dobbiamo aggiungere la proprietà class agli elementi nel file HTML. Lo faremo prima nel menu in alto:
<ul id="topmenu" class="menu">
<li><a href="/">Home</a></li>
<li><a href="/articles">Articles</a></li>
<li><a href="/about">About</a></li>
</ul>
E poi nel menu a piè di pagina:
<div id="footer">
<ul class="menu">
<li><a href="/">Home</a></li>
<li><a href="/articles">Articles</a></li>
<li><a href="/about">About</a></li>
</ul>
</div><!-- #footer -->
Fatto ciò, possiamo sostituire il gruppo di selettori #topmenu, #footer ul
con il selettore basato sulla classe .menu
:
.menu {
font-style: oblique
}
Come per i selettori basati su ID, l’aggiunta del nome del tag a sinistra del punto nei selettori basati su classi è opzionale. Tuttavia, a differenza degli ID, si suppone che la stessa classe possa essere usata in più di un elemento e non è nemmeno necessario che sia dello stesso tipo. Perciò, se la classe menu
è condivisa tra diversi tipi di elementi, usare il selettore ul.menu
corrisponderebbe solo agli elementi ul
che hanno la classe menu
. Invece, usando .menu
come selettore si abbinerà a qualsiasi elemento che abbia la classe menu
, indipendentemente dal suo tipo.
Inoltre, gli elementi possono essere associati a più di una classe. Potremmo differenziare il menu in alto e quello in basso aggiungendo una classe in più a ciascuno di essi:
<ul id="topmenu" class="menu top">
E nel menu a piè di pagina:
<ul class="menu footer">
Quando l’attributo class
ha più di una classe, queste devono essere separate da spazi. Ora, oltre alla regola CSS condivisa tra gli elementi della classe menu
, possiamo indirizzare il menu in alto e a piè di pagina usando le loro classi corrispondenti:
.menu {
font-style: oblique
}
.menu.top {
font-size: large
}
.menu.footer {
font-size: small
}
Fai attenzione che scrivere .menu.top
differisce da .menu .top
(con uno spazio tra le parole). Il primo selettore corrisponderà agli elementi che hanno entrambe le classi menu
e top
, mentre il secondo corrisponderà agli elementi che hanno la classe top
e un elemento padre con la classe menu
.
Selettori Speciali
I selettori CSS possono anche corrispondere a stati dinamici di elementi. Questi selettori sono particolarmente utili per gli elementi interattivi, come i collegamenti ipertestuali. Si può desiderare l’aspetto dei collegamenti ipertestuali quando il puntatore del mouse si sposta su di essi, per attirare l’attenzione del visitatore.
Tornando alla nostra pagina d’esempio, potremmo rimuovere le sottolineature dai link nel menu in alto e mostrare una linea solo quando il puntatore del mouse si sposta sul link corrispondente. Per fare questo, scriviamo prima una regola per rimuovere la sottolineatura dai link nel menu in alto:
.menu.top a {
text-decoration: none
}
Poi usiamo la pseudo-classe :hover
su quegli stessi elementi per creare una regola CSS che verrà applicata solo quando il puntatore del mouse è sopra l’elemento corrispondente:
.menu.top a:hover {
text-decoration: underline
}
Il selettore di pseudo-classe :hover
accetta tutte le proprietà CSS delle regole CSS convenzionali. Altre pseudo-classi includono :visited
, che corrisponde ai collegamenti ipertestuali che sono già stati visitati, e :focus
, che corrisponde agli elementi di un modulo che hanno ricevuto il focus.
Esercizi Guidati
-
Supponiamo che una pagina HTML abbia un foglio di stile associato a essa, contenente le due seguenti regole:
p { color: green; } p { color: red; }
Che colore applicherà il browser al testo all’interno degli elementi
p
? -
Qual è la differenza tra l’uso del selettore ID
div#main
e#main
? -
Quale selettore corrisponde a tutti gli elementi
p
utilizzati all’interno di undiv
con attributo ID#main
? -
Qual è la differenza tra l’uso del selettore di classe
p.highlight
e.highlight
?
Esercizi Esplorativi
-
Scrivi una singola regola CSS che cambi la proprietà
font-style
inoblique
. La regola deve corrispondere solo agli elementia
che sono dentro<div id="sidebar"></div>
o<ul class="link"></ul>
. -
Supponiamo che tu voglia cambiare lo stile degli elementi il cui attributo
class
è impostato suarticle reference
, come in<p class="article reference">
. Tuttavia, il selettore.article .reference
non sembra alterare il loro aspetto. Perché il selettore non funziona come previsto? -
Scrivi una regola CSS per cambiare la proprietà
color
inred
di tutti i link visitati nella pagina.
Sommario
Questa lezione tratta di come usare i selettori CSS e come il browser decide quali stili applicare a ogni elemento. Essendo separati dal markup HTML, i CSS forniscono molti selettori per abbinare singoli elementi o gruppi di elementi nella pagina. La lezione passa attraverso i seguenti concetti e procedure:
-
Stili a livello di pagina ed ereditarietà degli stili.
-
Styling degli elementi per tipo.
-
Usare l’ID dell’elemento e la classe come selettore.
-
Selettori composti.
-
Usare le pseudo-classi per stilizzare dinamicamente gli elementi.
Risposte agli Esercizi Guidati
-
Supponiamo che una pagina HTML abbia un foglio di stile associato a essa, contenente le due seguenti regole:
p { color: green; } p { color: red; }
Che colore applicherà il browser al testo all’interno degli elementi
p
?Il colore
red
. Quando due o più selettori equivalenti hanno proprietà in conflitto, il browser sceglie l’ultimo. -
Qual è la differenza tra l’uso del selettore ID
div#main
e#main
?Il selettore
div#main
corrisponde ad un elementodiv
che ha l’IDmain
, mentre il selettore#main
corrisponde all’elemento che ha l’IDmain
, indipendentemente dal suo tipo.
p
utilizzati all’interno di un div
con attributo ID #main
?+
Il selettore #main p
o div#main p
.
-
Qual è la differenza tra l’uso del selettore di classe
p.highlight
e.highlight
?Il selettore
p.highlight
corrisponde solo agli elementi di tipop
che hanno la classehighlight
, mentre il selettore.highlight
corrisponde a tutti gli elementi che hanno la classehighlight
, indipendentemente dal loro tipo.
Risposte agli Esercizi Esplorativi
-
Scrivi una singola regola CSS che cambi la proprietà
font-style
inoblique
. La regola deve corrispondere solo agli elementia
che sono dentro<div id="sidebar"></div>
o<ul class="link"></ul>
.#sidebar a, ul.links a { font-style: oblique }
-
Supponiamo che tu voglia cambiare lo stile degli elementi il cui attributo
class
è impostato suarticle reference
, come in<p class="article reference">
. Tuttavia, il selettore.article .reference
non sembra alterare il loro aspetto. Perché il selettore non funziona come previsto?Il selettore
.article .reference
corrisponderà agli elementi aventi la classereference
che sono discendenti di elementi aventi la classearticle
. Per far corrispondere elementi che hanno entrambe le classiarticle
ereference
, il selettore dovrebbe essere.article.reference
(senza lo spazio tra di loro). -
Scrivi una regola CSS per cambiare la proprietà
color
inred
di tutti i link visitati nella pagina.a:visited { color: red; }