12 KiB
Progetto Terrarium Parte 2: Introduzione a CSS
Sketchnote di Tomomi Imura
Quiz Pre-Lezione
Introduzione
CSS, o Cascading Style Sheets, risolve un problema importante nello sviluppo web: come rendere il tuo sito web esteticamente gradevole. Dare uno stile alle tue app le rende più usabili e visivamente accattivanti; inoltre, puoi utilizzare CSS per creare un Responsive Web Design (RWD) - permettendo alle tue app di adattarsi bene a qualsiasi dimensione dello schermo. CSS non serve solo a migliorare l'aspetto della tua app; le sue specifiche includono animazioni e trasformazioni che possono abilitare interazioni sofisticate per le tue app. Il CSS Working Group aiuta a mantenere aggiornate le specifiche di CSS; puoi seguire il loro lavoro sul sito del World Wide Web Consortium.
Nota, CSS è un linguaggio in continua evoluzione, come tutto ciò che riguarda il web, e non tutti i browser supportano le parti più recenti delle specifiche. Controlla sempre le tue implementazioni consultando CanIUse.com.
In questa lezione, aggiungeremo stili al nostro terrarium online e approfondiremo diversi concetti di CSS: la cascata, l'ereditarietà, l'uso dei selettori, il posizionamento e l'utilizzo di CSS per creare layout. Durante il processo, organizzeremo il layout del terrarium e creeremo il terrarium vero e proprio.
Prerequisiti
Dovresti avere l'HTML del tuo terrarium già costruito e pronto per essere stilizzato.
Guarda il video
Compito
Nella tua cartella del terrarium, crea un nuovo file chiamato style.css. Importa quel file nella sezione <head>:
<link rel="stylesheet" href="./style.css" />
La Cascata
I Fogli di Stile a Cascata incorporano l'idea che gli stili "cascano", in modo che l'applicazione di uno stile sia guidata dalla sua priorità. Gli stili definiti dall'autore di un sito web hanno priorità su quelli impostati da un browser. Gli stili definiti "inline" hanno priorità su quelli definiti in un foglio di stile esterno.
Compito
Aggiungi lo stile inline "color: red" al tuo tag <h1>:
<h1 style="color: red">My Terrarium</h1>
Poi, aggiungi il seguente codice al tuo file style.css:
h1 {
color: blue;
}
✅ Quale colore viene visualizzato nella tua app web? Perché? Riesci a trovare un modo per sovrascrivere gli stili? Quando vorresti farlo, o perché no?
Ereditarietà
Gli stili vengono ereditati da uno stile antenato a un discendente, in modo che gli elementi annidati ereditino gli stili dei loro genitori.
Compito
Imposta il font del corpo a un determinato font e verifica il font di un elemento annidato:
body {
font-family: helvetica, arial, sans-serif;
}
Apri la console del tuo browser nella scheda 'Elementi' e osserva il font dell'H1. Esso eredita il font dal corpo, come indicato nel browser:
✅ Puoi fare in modo che uno stile annidato erediti una proprietà diversa?
Selettori CSS
Tag
Finora, il tuo file style.css ha stilizzato solo pochi tag, e l'app appare piuttosto strana:
body {
font-family: helvetica, arial, sans-serif;
}
h1 {
color: #3a241d;
text-align: center;
}
Questo modo di stilizzare un tag ti dà il controllo su elementi unici, ma hai bisogno di controllare gli stili di molte piante nel tuo terrarium. Per farlo, devi sfruttare i selettori CSS.
Id
Aggiungi uno stile per organizzare i contenitori sinistro e destro. Poiché c'è solo un contenitore sinistro e uno destro, a loro sono stati assegnati id nel markup. Per stilizzarli, usa #:
#left-container {
background-color: #eee;
width: 15%;
left: 0px;
top: 0px;
position: absolute;
height: 100%;
padding: 10px;
}
#right-container {
background-color: #eee;
width: 15%;
right: 0px;
top: 0px;
position: absolute;
height: 100%;
padding: 10px;
}
Qui, hai posizionato questi contenitori con un posizionamento assoluto ai margini sinistro e destro dello schermo, e hai utilizzato percentuali per la loro larghezza in modo che possano adattarsi agli schermi mobili più piccoli.
✅ Questo codice è piuttosto ripetitivo, quindi non segue il principio "DRY" (Don't Repeat Yourself); riesci a trovare un modo migliore per stilizzare questi id, magari utilizzando un id e una classe? Dovresti modificare il markup e rifattorizzare il CSS:
<div id="left-container" class="container"></div>
Classi
Nell'esempio sopra, hai stilizzato due elementi unici sullo schermo. Se vuoi che gli stili si applichino a molti elementi sullo schermo, puoi utilizzare le classi CSS. Fai questo per organizzare le piante nei contenitori sinistro e destro.
Nota che ogni pianta nel markup HTML ha una combinazione di id e classi. Gli id qui sono utilizzati dal JavaScript che aggiungerai in seguito per manipolare il posizionamento delle piante nel terrarium. Le classi, invece, danno a tutte le piante uno stile specifico.
<div class="plant-holder">
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
</div>
Aggiungi il seguente codice al tuo file style.css:
.plant-holder {
position: relative;
height: 13%;
left: -10px;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
}
Degno di nota in questo frammento è il mix di posizionamento relativo e assoluto, che approfondiremo nella prossima sezione. Dai un'occhiata al modo in cui le altezze sono gestite con le percentuali:
Hai impostato l'altezza del contenitore delle piante al 13%, un valore adeguato per garantire che tutte le piante siano visualizzate in ogni contenitore verticale senza bisogno di scorrimento.
Hai spostato il contenitore delle piante verso sinistra per permettere alle piante di essere più centrate all'interno del loro contenitore. Le immagini hanno un ampio sfondo trasparente per renderle più trascinabili, quindi devono essere spostate a sinistra per adattarsi meglio allo schermo.
Poi, la pianta stessa ha una larghezza massima del 150%. Questo le permette di ridimensionarsi quando il browser viene ridimensionato. Prova a ridimensionare il tuo browser; le piante rimangono nei loro contenitori ma si ridimensionano per adattarsi.
Degno di nota è anche l'uso di z-index, che controlla l'altitudine relativa di un elemento (in modo che le piante si trovino sopra il contenitore e sembrino sedersi all'interno del terrarium).
✅ Perché hai bisogno sia di un selettore CSS per il contenitore delle piante che per la pianta?
Posizionamento CSS
Mescolare le proprietà di posizionamento (ci sono posizioni statiche, relative, fisse, assolute e sticky) può essere un po' complicato, ma se fatto correttamente ti dà un buon controllo sugli elementi delle tue pagine.
Gli elementi posizionati in modo assoluto sono posizionati rispetto ai loro antenati posizionati, e se non ce ne sono, sono posizionati rispetto al corpo del documento.
Gli elementi posizionati in modo relativo sono posizionati in base alle indicazioni del CSS per regolare il loro posizionamento rispetto alla loro posizione iniziale.
Nel nostro esempio, il plant-holder è un elemento posizionato in modo relativo che è posizionato all'interno di un contenitore posizionato in modo assoluto. Il comportamento risultante è che i contenitori laterali sono fissati a sinistra e a destra, e il plant-holder è annidato, regolando se stesso all'interno delle barre laterali, dando spazio per posizionare le piante in una fila verticale.
La
plantstessa ha anche un posizionamento assoluto, necessario per renderla trascinabile, come scoprirai nella prossima lezione.
✅ Sperimenta cambiando i tipi di posizionamento dei contenitori laterali e del plant-holder. Cosa succede?
Layout CSS
Ora utilizzerai ciò che hai imparato per costruire il terrarium stesso, tutto utilizzando CSS!
Per prima cosa, stila i figli del div .terrarium come un rettangolo arrotondato utilizzando CSS:
.jar-walls {
height: 80%;
width: 60%;
background: #d1e1df;
border-radius: 1rem;
position: absolute;
bottom: 0.5%;
left: 20%;
opacity: 0.5;
z-index: 1;
}
.jar-top {
width: 50%;
height: 5%;
background: #d1e1df;
position: absolute;
bottom: 80.5%;
left: 25%;
opacity: 0.7;
z-index: 1;
}
.jar-bottom {
width: 50%;
height: 1%;
background: #d1e1df;
position: absolute;
bottom: 0%;
left: 25%;
opacity: 0.7;
}
.dirt {
width: 60%;
height: 5%;
background: #3a241d;
position: absolute;
border-radius: 0 0 1rem 1rem;
bottom: 1%;
left: 20%;
opacity: 0.7;
z-index: -1;
}
Nota l'uso delle percentuali qui. Se ridimensioni il tuo browser, puoi vedere come il barattolo si ridimensiona anch'esso. Nota anche le percentuali di larghezza e altezza per gli elementi del barattolo e come ogni elemento è posizionato in modo assoluto al centro, fissato in basso rispetto alla finestra.
Stiamo anche utilizzando rem per il border-radius, una lunghezza relativa al font. Leggi di più su questo tipo di misura relativa nelle specifiche CSS.
✅ Prova a cambiare i colori e l'opacità del barattolo rispetto a quelli della terra. Cosa succede? Perché?
🚀Sfida
Aggiungi un riflesso a forma di "bolla" nella parte inferiore sinistra del barattolo per farlo sembrare più simile al vetro. Stilerai .jar-glossy-long e .jar-glossy-short per farle sembrare un riflesso. Ecco come dovrebbe apparire:
Per completare il quiz post-lezione, segui questo modulo Learn: Dai stile alla tua app HTML con CSS
Quiz Post-Lezione
Revisione e Studio Autonomo
CSS sembra ingannevolmente semplice, ma ci sono molte sfide quando si cerca di stilizzare perfettamente un'app per tutti i browser e tutte le dimensioni dello schermo. CSS-Grid e Flexbox sono strumenti sviluppati per rendere il lavoro un po' più strutturato e affidabile. Impara a utilizzare questi strumenti giocando a Flexbox Froggy e Grid Garden.
Compito
Disclaimer:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica Co-op Translator. Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche potrebbero contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si consiglia una traduzione professionale eseguita da un traduttore umano. Non siamo responsabili per eventuali fraintendimenti o interpretazioni errate derivanti dall'uso di questa traduzione.