Ciao a tutti, bentornati.
Una delle cose che voglio sottolineare in questo corso Introduzione al CSS è che
c'è questa necessità di fermarsi e praticare e rivedere ciò che abbiamo imparato finora.
Quindi mi assicurero' di includere piccole cose che chiamero' «
Codice Insieme».
Quindi, se stai guardando questo in questo momento, e non hai il tuo laptop accanto a te o
qualsiasi cosa tu stia usando per codificare, spero davvero che ti fermerai, vai a prenderlo, e
codice insieme a me perché solo ascoltando con me non ti dà
la vera esperienza di cui hai bisogno per digitarlo e commettere errori mentre andiamo insieme.
Ok, allora andiamo avanti e cominciamo.
Quello che ho intenzione di fare in questo video è che ho intenzione di tornare a un vecchio ma
un goodie che abbiamo fatto in HTML cinque.
E voglio che entriamo insieme e lo stile.
Va bene, iniziamo facendo il nostro file CSS.
Ho intenzione di andare avanti e crearne uno nuovo ora,
andare qui per file, nuovo file, o si può fare il comando N.
E la prima cosa che si vuole fare è che si desidera salvare questo come un file.CSS,
quindi in questo modo il vostro editor sa colorare le cose come si desidera che colorino.
Ora, ogni volta che sto progettando pagine,
tengo tutti i miei file HTML in una cartella e i miei file CSS in un'altra cartella.
E ti incoraggio davvero a fare la stessa cosa.
Quindi, vado avanti e vado nella mia cartella CSS.
E io chiamerò questo, chiamiamolo together-1.css.
È davvero importante che ti ricordi di inserire quell'estensione del file, o
le cose non funzioneranno.
Ok, ecco la mia vecchia e noiosa pagina.
Quello che le persone fanno in genere è lo stile dalla parte superiore della pagina e
lavorare verso il basso.
Quindi, voglio che tu scelga i tuoi valori, ma andiamo insieme avanti e
modelliamo la mia intestazione.
Ops, cosa sbagliata qui.
E possiamo dargli uno sfondo.
Provo a B3B3B3.
Possiamo dargli un carattere più grande, se vuoi.
Diro' la dimensione del carattere.
Facciamolo al 150%.
Solo un po' qualcosa di diverso.
Lo salvero', e incoraggio sempre gli studenti a fare piccole modifiche
al loro codice e poi a controllare e vedere cosa e' successo.
Vediamo se abbiamo cambiato qualcosa qui.
E così ora lo ricaricherò e vedrò cosa è successo, e
se notate, non è successo nulla.
Bene, il problema è che non ho collegato correttamente il foglio di stile al file HTML.
Ricordi come ti ho detto che penso sempre di mettere le cose in una cartella chiamata CSS?
Devo includerlo.
Va bene, torna indietro.
Ricarica.
Oh, ehi! Ho un po' di
qualcosa in ballo.
Tutto bene?
Quindi, ora andiamo avanti e aggiungiamo solo un paio di cose.
So che non assomiglia esattamente al mio esempio.
Ma una delle cose che voglio fare dopo è, voglio andare avanti e stile, vediamo,
la mia testa.
Diamo all'intera intestazione un colore di sfondo.
Va bene.
Puoi scegliere tutto quello che vuoi.
E ho intenzione di scegliere sfondo: penso di avere 66666, va bene.
E andiamo avanti e voglio davvero allineare quel testo.
Quindi lo chiamerò text-align: al centro.
Salva, aggiorna.
Oh, ci stiamo arrivando!
La pagina sta iniziando a sembrare leggermente diversa per tutto il tempo.
Ora, l'unica cosa che mi confonde è che non sembra piaccia il mio background.
Quindi se torno indietro, mi renderò conto, oh, ho dimenticato quel cartello proprio davanti.
E fare uno, due, tre, quattro, cinque, sei.
Risparmiatelo qui.
Aggiorna.
Ci siamo.
Ora questi colori sono davvero brutti e davvero difficili da vedere.
E me ne rendo conto.
Quindi andiamo avanti e giochiamo con le cose per renderlo un po' più facile da vedere.
Andiamo avanti e mettiamoci dentro.
Cambiamo l'h1 in modo che sia un colore diverso e
andiamo avanti e cambiamo la navigazione.
In modo che abbiamo, ho intenzione di cambiare il font, proviamo la variante del font.
Mi piace la variante del font.
Ti permette di mettere le cose in lettere maiuscole, minuscole, diverse cose del genere.
Abbiamo anche la dimensione del carattere.
Non sono ancora soddisfatto della dimensione, quindi ho intenzione di farlo 150%,
e l'ultimo che ho intenzione di fare è la famiglia di caratteri.
Ora, se ricordi, con font-family è molto consuetudine dargli più di
un valore perché non tutti i browser supportano ogni famiglia di caratteri.
Quindi, nel mio caso, provero' a mettere Arial,
Times New Roman.
Se si dispone di un font composto da più parole,
è necessario inserirli tra virgolette.
E poi finalmente solo Serif.
Ora questo è il modo in cui codice.
Ho programmato di commettere errori.
Io codice con errori di battitura.
Ad essere onesti, raramente codice in una camicia button down che sembra così scomoda.
Il modo di codificare è comodamente con una coca e un bar Hershey in modo
che quando hai finito avrai questi piccoli morsi celebrativi di cioccolato.
Ma per ora, faro' del mio meglio per guidarti.
Ho cambiato un sacco di cose.
Vediamo cos'e' successo.
Vedete che faro' un po' piu' grande, stiamo iniziando ad arrivarci.
Abbiamo i colori dello sfondo, abbiamo le cose del genere.
Quindi andiamo avanti e mettiamo insieme un paio di cose,
e poi continueremo a imparare un po' di più.
Mi piacerebbe vederti scegliere le tue cose per h2.
Quindi h2 ho intenzione di scegliere un colore diverso,
proviamo lo stesso colore 666666 e uno sfondo diverso.
Ho intenzione di utilizzare 00B7EA.
Allora, ha importanza?
Importa se lo scrivo come EA maiuscola, minuscola?
Non importa affatto.
La cosa importante è per voi di solito essere coerente in modo da
non rovinare te stesso come si sta andando avanti e indietro.
Tutto bene?
Ci rinfregheremo di nuovo.
Va bene.
Sta iniziando a sembrare molto diverso.
Questo non è molto stile.
E' solo uno, due, tre, quattro, cinque.
Cinque regole e abbiamo già un aspetto molto diverso.
Vado avanti e rendere lo schermo più piccolo perché quando inserisco
quella dimensione del carattere 150%, fa una grande differenza.
Va bene.
Un tipo di ultima cosa interessante che vorrei che provassi a fare è andare avanti e
provare a modellare il riassunto nei dettagli.
Perché se voglio fare solo il, Sono cresciuto in parte Ashtabula Ohio,
come si può fare che corsivo, ma non il resto?
Va bene, quindi se ti ricordi come appare il codice HTML,
lascia che ti mostri un rapido esempio, è che proprio qui ho il mio tag di dettagli e
se non l'hai visto prima, ho messo la parola aperta in
cui significa che per impostazione predefinita mostra che è aperto, quindi nessuno deve fare clic su di esso.
Ho i miei dettagli.
Ho il mio riassunto dove e' arrivata la parte La Mia Infanzia, e
poi ho tutta questa parte.
Quindi, se vuoi fare quel corsivo, e solo questo, come fai a farlo?
Va bene.
Cominceremo con il tag dei dettagli.
E io scorro un po' qui, cosi' che voi ragazzi possiate vedere un po' meglio,
si spera.
E quello che sto per dire è che voglio rendere tutto corsivo, e
il modo in cui lo fai è andare a mettere in stile font: corsivo. Ce
l'ho?
Ora questo non sara' esattamente cio' che volevamo, perche' quello che ho fatto e' che ho messo
tutto in corsivo.
Quindi ora vuoi tornare indietro e dire, ma sai una cosa?
Non voglio il riassunto.
Non voglio il riassunto in corsivo.
Ops, torna qui.
Riepilogo e posso dire carattere.
Oops, stile font.
Beh, come lo fai in modo che non sia corsivo,
per impostazione predefinita la maggior parte delle cose non lo sono, puoi effettivamente inserire la parola normale.
Va bene.
Quindi questo è tutto.
Ora abbiamo questa parte in corsivo e questa parte in grassetto.
Per la maggior parte abbiamo finito, ma ho intenzione di aggiungere una piccola cosa,
perché è davvero comune per le persone di stile la loro intestazione e il
loro piè di pagina in un modo molto simile.
Quindi andiamo e aggiungiamo stile il mio piè di pagina.
E quello che voglio fare è dargli lo stesso colore di sfondo
che aveva la mia intestazione.
Quindi sfondo, uno, due, tre, quattro, cinque, sei, boom.
Ed eccoti qui.
Quindi quello che abbiamo fatto ora è che siamo passati da un semplice file HTML di base e
abbiamo iniziato ad aggiungere solo un po' di colore, un po' di dimensione dei caratteri,
cose un po' diverse del genere.
Lasciate che vi mostri di nuovo com'era il file originale e
li guarderemo uno accanto all'altro.
Commenterò il mio foglio di stile.
Lo apro e vedrete che queste sono due pagine molto diverse.
Ma sono esattamente lo stesso HTML.
Ok, grande, queste sono le cose che dovrai fare per
i compiti in questa sezione.
Quindi esercitati qui, torna indietro e guardami,
se ti aiuta a superare un po' le gobbe.
Ma la cosa importante è, codice, codice, codice, buona fortuna.