Share
Benvenuti alla sesta lezione della nostra serie Web Design for Kids, CSS Layout!
Qui è dove mettiamo tutti i nostri elementi esattamente dove li vogliamo sullo schermo. Aggiungiamo a entrambi i nostri file HTML e CSS per farlo.
Per ricordare a te stesso, dai un'occhiata al sito web che stiamo costruendo. I file per questo corso possono essere scaricati qui e non dimenticare di porre eventuali domande nella sezione commenti in fondo a questa pagina.
Ci sono alcune cose che dobbiamo sapere prima di buttarci dentro disposizione. In questa prima sezione vedremo come rimanere organizzati. Tratteremo alcune basi di posizionamento e parleremo di quale tipo di CSS proprietà sono usati per il layout.
Mantenere un documento CSS organizzato è molto importante. Una corretta organizzazione ci renderà più facile trovare tutti i pezzi all'interno del nostro file, rendendo più semplice cambiare e aggiungere le cose in seguito. In generale, è meglio ordinare il nostro CSS dichiarazioni nell'ordine in cui si svolgono nella pagina.
Aggiungeremo gli stili in questa lezione a principale, per esempio. Questo stile aggiunto su un elemento così importante dovrebbe essere incluso nel nostro documento CSS prima qualsiasi altro elemento che è annidato all'interno principale.
Gli elementi HTML sono un po 'come scatole rettangolari. Il Modello di box CSS descrive la spaziatura di queste scatole.
Ogni scatola ha quattro lati. Possiamo applicare un valore a tutti e quattro i lati contemporaneamente nel nostro CSS imbottitura, confine, e / o margine. Tuttavia, se vogliamo modellare un lato di un elemento, possiamo farlo anche noi. Per esempio:
padding-left: 20px; border: 4px solid # 205D76;
Diciamo che questa scatola rosa rappresenta il testo. Possiamo vedere che il riempimento è stato aggiunto solo a sinistra e una spessa copertina blu tutti quattro lati del contenuto.
Il CSS ci fornisce una serie di proprietà create appositamente per aiutarci con il layout del nostro sito web. Quindi, mentre il modello di scatola aiuta a spiegare il spaziatura intorno agli elementi HTML, FlexBox ci permetterà di mossa questi elementi in posizione.
Quando usiamo flexbox su un elemento contenitore questo elemento diventa a contenitore flessibile e tutti gli elementi al suo interno diventano articoli flessibili.
Quando applichiamo il flexbox a un contenitore, esso posiziona automaticamente gli elementi lungo una linea retta (orizzontalmente) e quindi possiamo ottenere maggiori dettagli con altre proprietà di Flexbox.
Non avremo bisogno di usare flexbox troppo per il nostro sito Web, ma è importante pensare a Flexbox poiché è considerato il modo più moderno e appropriato per posizionare piccoli bit di contenuto su un sito web.
Il h1 e immagine della città all'interno del intestazione sono centrati sulla pagina. Ci sono diversi modi per centrare qualcosa con i CSS, ma per ora useremo allineamento del testo: centro; sul intestazione.
Punteremo l'intestazione usando il suo nome di classe che abbiamo aggiunto in precedenza:
.primary-header text-align: center;
Non dimenticare! Salva i documenti e aggiorna il browser per vedere le nostre modifiche mentre li facciamo!
La prima cosa che vorremmo fare alle nostre sezioni è rendere il contenuto, l'immagine e l'elenco, all'interno di ogni sezione, seduti uno accanto all'altro piuttosto che accatastati.
Per ottenere ciò useremo FlexBox. Flexbox viene applicato agli elementi all'interno di un elemento contenitore utilizzando display: flex; sul contenitore:
.sezione negozio display: flex; display: -webkit-flex; / * Questo è un prefisso del venditore! * /
Per riportare ciò a ciò di cui abbiamo parlato prima, l'immagine e div contenenti la lista dei negozi sono ora articoli flessibili, perché sono all'interno di questo contenitore flessibile.
Mentre ci sono molte opzioni per specificare esattamente dove un elemento dovrebbe andare, il comportamento predefinito di flexbox qui funziona perfettamente per noi - e la lista del nostro negozio ora vive a destra dell'immagine del negozio.
Poiché Flexbox è abbastanza nuovo, non tutti i browser hanno avuto la possibilità di includerlo correttamente. Per ovviare a questo, possiamo includere a prefisso del venditore alle proprietà di Flexbox, aggiungendo questo supporto mancante per il momento. Anche se per questo progetto ci concentriamo solo sulle versioni più recenti dei browser moderni, sarà comunque necessario includere a -webkit- prefisso del venditore per flexbox per assicurarsi che funzioni in "Safari".
Potremmo usare un po 'di spaziatura tra l'immagine e l'elemento che contiene tutto il testo, quindi nel nostro HTML aggiungiamo una classe di magazzini dettagli al div contenente il testo.
Dopo aver salvato questo, possiamo passare al nostro CSS e aggiungere questa spaziatura, ma solo a sinistra del div:
.store-details margin-left: 30px;
C'è una spaziatura a sinistra delle nostre liste non ordinate del negozio. Questo perché ce ne sono alcuni stile predefinito che viene fornito con l'utilizzo di un elenco HTML. A volte questo stile predefinito è OK, e altre volte potrebbe non produrre l'effetto che stiamo cercando.
Possiamo sbarazzarci di questa spaziatura di lista predefinita usando padding: 0; nella lista non ordinata, ma ciò farebbe sì che i nostri punti elenco si spostino troppo a sinistra rispetto al titolo della nostra lista.
Vogliamo un po 'di imbottitura qui, ma non tanto quanto previsto dallo stile di default della lista. Impostazione a padding-left di 15px sulla lista allineamo i nostri punti elenco con la voce abbastanza bene, quindi aggiungeremo questo oltre alle cose aggiunte all'elenco nella lezione precedente:
.store-list padding-left: 15px; / * styling aggiunto di recente * / color: # FFC122;
Abbiamo ancora la questione di cui abbiamo parlato nella lezione precedente con gli elementi della lista troppo ravvicinati. Per risolvere questo aggiungiamo una classe di nome del negozio a tutte le voci dell'elenco, , nel nostro HTML. Quindi aggiungeremo un piccolo margine al file parte inferiore di questi articoli.
.store-name margin-bottom: 10px;
È necessario aggiungere spaziature alle sezioni e centrarle sulla pagina. Lo faremo attraverso il margine e larghezza proprietà.
Di nuovo, aggiungeremo allo styling che abbiamo già scritto:
.sezione negozio display: flex; display: -webkit-flex; margine: 50px auto; larghezza: 450 px;
Il 50px valore all'interno margine qui sta applicando quella quantità di spazio al superiore di ogni sezione di negozio. Seguendo questo con auto dice al browser di considerare la larghezza dell'elemento (che abbiamo impostato su 450px) e centrarlo automaticamente nella finestra del browser.
Per noi footer centreremo il testo e aggiungeremo una piccola quantità di imbottitura per assicurarsi che questo testo non sia troppo vicino ai bordi del piè di pagina.
.primary-footer padding: 2px; allineamento del testo: centro; background-color: # FFC122;
Abbiamo parlato di stile predefinito un po 'quando stavamo mettendo in piedi le nostre liste. Il corpo l'elemento viene fornito con i propri stili predefiniti, uno dei quali è a margine che circonda l'intera pagina. Mentre a volte questo non è un problema, possiamo vedere che sta impedendo il colore di sfondo della nostra footer da allungare completamente ai lati della finestra del browser.
La soluzione qui è di tornare al corpo nel nostro documento CSS e aggiungere quanto segue:
body margin: 0;
In questo corso abbiamo implementato tutti i nostri elementi con le tecniche di layout CSS. Mentre di solito ci sono diversi modi per ottenere un layout specifico, ottenere più agio con il modello box CSS e la flexbox fornisce una comprensione molto solida di questi diversi approcci.
Dato che il nostro sito è completo (congratulazioni!) Parleremo di tutto design, tipografia, e colore nelle lezioni da seguire. Questo ti aiuterà a diventare un web designer a tutto tondo e informato.
Ci vediamo in giro per la città!
Accentsconagua