Quiz: Conosci i fondamenti CSS? (2025)
Sei abbastanza front‑end?
Quiz: Conosci il CSS?
- CSS moderno? 🤔
- Il CSS merita un posto nel tuo curriculum??? 🚀
- Scelta multipla. 🤖 … Quanto può essere difficile, vero?
Seleziona l’UNICO NON VALIDO ❌ font-size:
10cx è errato perché cx non è un’unità CSS reale. (Almeno al momento della stesura.)
Le unità più comuni includono le familiari px, rem, em.
Le unità più recenti sono utili per layout dinamici e responsivi.
ch- larghezza del carattere0vmin- minimo del viewportvmax- massimo del viewportvh- altezza del viewportvw- larghezza del viewport
Esistono anche diverse unità che sono sempre state disponibili ma sono raramente usate, come cm per centimetri, mm, in per pollici, pt per punti
Riesci a individuare il UNICO codice esadecimale valido 👍?
I codici esadecimali possono essere usati per rappresentare colori in CSS. Sono preceduti da # e devono contenere 3, 4, 6 o 8 cifre esadecimali.
Il codice esadecimale a 3 caratteri è una forma abbreviata del codice a 6 caratteri, dove ogni carattere è ripetuto. Il codice a 4 caratteri include un canale alfa per la trasparenza.
Ad esempio #ABC è lo stesso di #AABBCC, e #ABCD è lo stesso di #AABBCCDD. Per saperne di più su come gestire i valori esadecimali, dai un’occhiata al mio quiz sui numeri JavaScript.
Quale di queste unità NON è una valida unità CSS ❌?
Le nuove unità come ch, vmin, vmax, vh, vw sono molto utili per layout dinamici/responsive.
Ci sono anche diverse unità che esistono da sempre ma sono raramente usate, come cm per i centimetri, mm, in per i pollici, pt per i punti, pc, cap per la dimensione delle lettere maiuscole, e ex che è pari all’altezza della lettera x.
Le unità più popolari includono il familiare px per i pixel, em relativo alla dimensione del font dell’elemento, e rem è in realtà un omaggio segreto al gruppo degli anni ‘90 R.E.M. (ok, non è vero, è semplicemente un’unità em relativa che fa riferimento all’elemento radice).
Quale selettore corrisponde meglio al seguente HTML?
<a id="home" name="home" href="/home">Home</a>La risposta corretta è a#home[name='home'], che corrisponde sia all’attributo id sia a quello name. I selettori CSS distinguono maiuscole e minuscole, quindi #Home non funzionerebbe, e gli spazi implicano elementi figli, cosa non applicabile qui.
Il selettore :contains() non è un selettore CSS standard, ma è disponibile in alcune librerie JS.
Quale selettore corrisponde al seguente pulsante HTML?
<button onclick="openModal()">Contact</button>La risposta corretta è button[onclick], che seleziona la presenza dell’attributo onclick.
Nota che :link seleziona solo i link href non visitati, ::click non è un pseudo‑elemento valido, e :focus seleziona solo l’elemento focalizzato.
Quale di questi selettori è invalido?
Il selettore c > > d {} è non valido perché il combinatore figlio è ripetuto senza un selettore tra i due caratteri >.
Gli altri selettori sono validi. Un selettore di tipo come c {} è sintatticamente valido CSS anche se c non è un elemento HTML standard.
Quale selettore corrisponde all’ultimo link nel seguente HTML?
<nav> <a name="home" href="/home">Home</a> <a name="login" href="/login">Login</a> <a name="help" href="/help">Help</a></nav>Il selettore corretto è a:last-child, che corrisponde all’ultimo <a> quando è anche l’ultimo figlio del suo genitore. nav:nth-child(3) corrisponderebbe a un elemento <nav> che è il terzo figlio del suo genitore.
Quale selettore avrà la priorità?
Il selettore a#quote ha la priorità perché l’ID ha una specificità più alta rispetto ai selettori basati su tag o classe.
Come puoi centrare “shit” in una scatola?
Usare text-align: center; è il modo corretto per centrare il testo in un elemento blocco. Le proprietà align sono usate per i layout flexbox, e margin: 0 auto; serve a centrare gli elementi blocco orizzontalmente.
La proprietà align-content è usata per i layout grid, e text-content non è una proprietà CSS valida.
Come centri il contenuto verticalmente all’interno di un contenitore block nel layout di flusso moderno?
Usare align-content è il modo moderno per centrare verticalmente i contenuti di un contenitore block nel layout di flusso.
Le proprietà align-items e justify-content sono usate per layout flexbox e grid, ma non per il flusso.
Sia margin: 0 auto; che margin: auto; centrano un elemento block orizzontalmente, ma non verticalmente.
Qual è la dimensione in pixel del testo del link <a> nel seguente HTML?
<body style="font-size: 40px !important;"> <nav style="font-size: 50%;"> <a style="font-size: 25%;">HOME</a> </nav></body>La font-size per <a> si calcola come 5px: 40px (body) * 50% (nav) = 20px, poi 20px * 25% = 5px.
Qual sarà la dimensione in pixel di 1.2rem per il link “HOME” nel seguente HTML?
<html style="font-size: 10px;"> <body style="font-size: 20px;"> <a style="font-size: 1.2rem;">HOME</a> </body></html>1.2rem si traduce in 12px perché le unità rem fanno riferimento alla dimensione del font radice o <html>, impostata qui a 10px.
Simile alla domanda precedente, qual è la dimensione in pixel di 1.2em per il link “HOME” nel seguente HTML?
<html style="font-size: 10px;"> <body style="font-size: 20px;"> <a style="font-size: 1.2em;">HOME</a> </body></html>1.2em corrisponde a 24px perché le unità em fanno riferimento alla dimensione del font ereditata, impostata qui a 20px.
Quale selettore ha la specificità più bassa?
:where(.card) .title ha la specificità più bassa. La pseudo‑classe :where() e tutto ciò che contiene contribuisce 0-0-0, quindi conta solo .title. :is(.card) .title mantiene la specificità di .card, .card .title ha due classi, e #card .title include un ID.