Share
Benvenuti alla quinta lezione della nostra serie Web Design for Kids, interamente dedicata ai CSS.
Abbiamo lavorato molto duramente sul nostro contenuto HTML, quindi ora è il momento di farlo sembrare bello! Aggiungeremo delle cose alla nostra pagina HTML qui, così come l'avvio di un nuovo file: a CSS documento.
Dai un'occhiata al sito web che stiamo costruendo. I file per questa lezione possono essere scaricati qui e non dimenticare di porre domande nella sezione commenti in fondo a questa pagina.
Prima di iniziare a programmare, prima assicuriamoci di capire cos'è il CSS. CSS sta per Fogli di stile ed è un linguaggio che ci aiuta a cambiare il modo in cui appare la nostra pagina HTML.
Nell'immagine sopra, il browser a sinistra mostra un sito Web senza CSS, no messa in piega, mentre il sito web sulla destra ha uno stile. Lo stile è stato scritto all'interno di un file CSS-tanto meglio!
Il CSS è scritto all'interno di un file separato usando il nostro editor di testo. Il nostro documento HTML è stato salvato con a .html estensione, ma il nostro documento CSS verrà salvato con a .css estensione.
Avremo bisogno di iniziare un nuovo documento nel nostro editor di testo e salvarlo come "tutstown.css" in "tutsfolder"; accanto a "index.html" e alla cartella "images".
Affinché il nostro documento CSS applichi gli stili al nostro documento HTML, dobbiamo collegarli insieme. Questo viene fatto attraverso a elemento all'interno dell'elemento head nella parte superiore del nostro documento HTML.
Aggiungeremo questo link direttamente sotto il nostro titolo:
Città Tuts
Ci sono alcuni importanti attributi includere all'interno di questo elemento auto-chiusura, il primo dei quali è genere. L'attributo type dice al browser qual è il genere di contenuto che stiamo collegando. In questo caso è un text / css file.
Il secondo attributo che vediamo qui è rel, che dice al browser cosa la relazione è tra l'HTML e il documento collegato (il nostro CSS). Il documento CSS è a foglio di stile per il nostro HTML, quindi sarà quello che includiamo qui.
Infine, abbiamo il href che potresti ricordare dal nostro elementi. Indica da qualche altra parte. In questo caso sta dicendo al browser dove trovare il file CSS a cui ci siamo collegati.
Se tutto è collegato correttamente, la pagina apparirà diversa quando la aggiorni nel browser:
Nel nostro file CSS possiamo elencare gli elementi HTML che abbiamo usato e dire come vogliamo che siano visualizzati. Ci sono molti modi per indicare gli elementi che vogliamo, e Classi HTML sono uno di quei modi.
Classi HTML sono attributi che possiamo aggiungere agli elementi. Una volta che un elemento ha un nome di classe, possiamo usarlo nel nostro CSS.
Il nome della classe scelta deve essere una parola o una parola che descriva il contenuto di quell'elemento.
Aggiungere una classe al nostro potrebbe assomigliare a questo:
Le classi non sono uniche, quindi diversi elementi possono avere lo stesso nome di classe. Questo rende l'aggiunta degli stessi stili a molti elementi molto più semplici; vedremo questo in azione quando arriveremo alle immagini del nostro negozio!
Il modo in cui scrivi il codice è chiamato suo sintassi. Proprio come con HTML, i CSS devono essere scritti nel modo corretto per funzionare.
Passiamo al nostro file CSS e, solo per la pratica, cambia il colore di sfondo dell'intestazione a blu.
.primary-header background-color: blue;
Ci sono molti pezzi per avere ragione!Quindi il nostro CSS capisce che quello che stiamo designando è un nome di classe, dobbiamo fare alcune cose:
Accentsconagua
. prima del nome.colore di sfondo) è immediatamente seguito da due punti : blu in questo caso). ; Può essere molto facile dimenticarli!
Salva questo file CSS e aggiorna il browser; se non lo hai ancora aperto, puoi farlo facendo doppio clic sul file "index.html" nella cartella "tuts". Quanto è bello?!
Importante! Ora cancelliamo questo stile perché il nostro sito non avrà un'intestazione blu!
Il CSS ci consente anche di includere commenti nel nostro file che il browser ignorerà, ma sembreranno un po 'diversi dai nostri commenti HTML.
Un commento CSS è contenuto all'interno di questi simboli: / * * /
/ * Questo è un commento in CSS * /
Il documento CSS nei file degli esercizi conterrà alcuni commenti utili per spiegare ulteriormente le cose.
Il primo bit di stile reale che possiamo fare sul nostro sito web è cambiare il colore di sfondo a quel delizioso giallo chiaro. Ci sono alcuni valori di colore che possono essere scritti in CSS, come blu nel codice di esempio sopra, e il browser lo comprende. Per altri colori meno comuni dovremo includere i colori esadecimale, o esadecimale, numero invece.
Tutti i colori hanno un numero esadecimale da abbinare. I browser non comprendono molti colori quando sono scritti, ma capiscono molto bene i numeri esadecimali. Il numero esadecimale per il nostro colore giallo chiaro è # FAF8DA, e vogliamo applicarlo al , per riempire l'intera pagina.
body background-color: # FAF8DA;
Importante! Non c'è bisogno di un punto di fronte corpo qui perché non è un nome di classe. Invece, abbiamo indicato subito l'elemento del corpo.
Se sei curioso di conoscere il valore esadecimale di altri colori, questo sito color-hex può essere molto utile.
Possiamo anche impostare il font (lo stile delle lettere) per il nostro sito Web che utilizza corpo nel nostro CSS.
Tutto quello che dobbiamo sapere a questo punto è che dobbiamo collegamento un carattere da Google al nostro documento HTML. Una volta collegato, il browser capirà e potremo utilizzarlo.
Ecco uno sguardo al link che dobbiamo aggiungere all'interno di del nostro HTML (lo stesso posto in cui abbiamo collegato il nostro documento CSS!)
Quindi possiamo salvare questo e andare al nostro documento CSS:
body font-family: 'Open Sans';
Questo imposterà il carattere per tutto il testo sulla pagina come Apri Sans.
All'interno dell'intestazione cambieremo il colore e le dimensioni del testo, nonché le dimensioni dell'immagine della città.
Innanzitutto, dobbiamo aggiungere le giuste classi HTML agli elementi nell'intestazione, in modo che possiamo usarli nel nostro CSS.
All'interno dell'apertura tag aggiungiamo una classe di main-rubrica e all'interno del città-preview:
Benvenuti in Tuts + Town
Nel nostro documento CSS possiamo ora puntare a questi elementi attraverso i nomi delle classi che impostiamo e iniziamo lo styling.
Abbiamo impostato una dimensione del carattere piuttosto grande qui 70px. px, o pixel, è come un punto sullo schermo. Questo punto è riempito di colore e viene utilizzato come unità di misura. Anche l'immagine della nostra città è abbastanza grande, quindi la fisseremo a 650 px largo.
Il colore proprietà imposta il colore del testo, che qui (# 205D76) È un blu scuro.
.main-heading font-size: 70px; colore: # 205D76; .town-preview width: 650px;
Ricorda, all'interno del main abbiamo sezioni più piccole che contengono un'immagine e un testo. Dovremo impostare una dimensione su queste immagini e modellare le intestazioni e gli elenchi con i CSS.
La prima cosa che dobbiamo fare è impostare la dimensione delle immagini dell'edificio. Per impostare le dimensioni dell'immagine tutte insieme possiamo usare lo stesso nome di classe per diversi elementi.
Vogliamo aggiungere lo stesso nome di classe, costruzione, a tutte e tre le immagini del negozio nel nostro codice HTML, e poi ridimensionarle tutte contemporaneamente nel nostro CSS, in questo modo:
.building width: 200px;
Anche i nostri tre titoli più piccoli possono avere lo stesso nome di classe e lo useremo per cambiare il colore e dimensione del font del testo.
.category-heading color: # 205D76; font-size: 30px;
Dopo la voce all'interno di ogni sezione abbiamo le nostre liste di negozi non ordinate: le ricordi? Oltre a cambiare la dimensione e il colore dei link qui, dovremo anche cambiare il colore della lista elenco puntato.
Aggiungiamo una classe di store-list al negozio-link al nel nostro documento HTML e quindi salvarlo.
.store-list color: # FFC122; / * Colore punti elenco della lista modifiche * / .store-link color: # EA6E2F; font-size: 20px;
Potresti notare, guardando il nostro sito web nel browser, che non c'è molta distanza tra gli elementi della lista, rendendola un po 'affollata. Parleremo tutto della spaziatura e aggiungeremo alcuni qui nel tutorial di layout più avanti nella serie.
Dopo aver aggiunto una classe di primaria-footer a e creato da al elemento all'interno di questo footer possiamo dichiarare il colore di sfondo così come il testo colore e dimensione del font:
.primary-footer background-color: # FFC122; .created-by color: #FFFFFF; font-size: 20px;
In questa lezione abbiamo imparato tutto su come collegare un documento HTML e un documento CSS insieme e poi aggiungere incantevoli stili ai nostri elementi classi. A questo punto, ciò che vediamo nel nostro browser non corrisponderà ancora all'anteprima del sito web completamente progettata a cui abbiamo fatto riferimento, ma osservate quale differenza possono fare alcuni colori e dimensioni! Sta solo andando meglio.
Successivamente sposteremo il contenuto sullo schermo utilizzando un CSS più intelligente disposizione tecniche.
Ci vediamo in giro per la città!
