Ciao. Benvenuti alla nostra prima lezione veramente tecnica nel nostro corso CSS. Si tratta di aggiungere stile alle tue pagine. Se sei venuto a questo corso con me dal nostro corso HTML, sai che so che puoi creare file HTML generali. Ma fino ad ora, potresti non averli in stile affatto. Quello che voglio che tu sappia prima ancora di iniziare lo styling, e inizi a mettere i tuoi piccoli colpi di scena sulle pagine, è che lo stesso file HTML può apparire diverso se visualizzato su browser diversi, e ci sono alcuni motivi per questo. Innanzitutto, alcuni tag non sono supportati in alcuni browser mentre sono in altri. Quindi, se hai mai usato il tag dettagli, puoi vedere che a volte la tua pagina avrà piccole frecce o piccole marcature su di loro e altre volte no. In modo che si riduce ai tag che sono supportati. Ma anche, ogni singolo browser ha il suo stile predefinito diverso. E quello che dice quello stile predefinito è che questo è il modo in cui voglio che le mie intestazioni H1 sembrino, o questo è quanto padding voglio attorno ai miei paragrafi. Quindi, se vai alla stessa pagina esatta su diversi browser, potrebbe essere difficile da dire, ma vedrai piccole differenze nel modo in cui le cose sono fatte. Ma in generale, questo aspetto predefinito è davvero semplice. E la maggior parte delle persone che conosco, non vogliono che le loro pagine sembrino chiare. Vogliono mettere un po' di stile. Quindi iniziamo a guardare i modi in cui puoi farlo. Un modo per aggiungere stile è pensare di aggiungerlo direttamente nel testo. Ora, man mano che l'HTML si è evoluto, siamo passati dall'avere tag che riguardavano chiaramente il colore e il centraggio diverso, e cose del genere. A dire no, no, non vogliamo tag che abbiano a che fare con lo stile. Vogliamo solo tag che hanno a che fare con i contenuti. La gente dice: «Ok, possiamo farlo, ma voglio renderlo carino. Quindi, come hanno fatto questo è che hanno aggiunto attributi di stile. Quindi in questo caso ho preso un tag h1 e aggiunto l'attributo style e ho semplicemente detto «colore: blu». E quello che sta per fare è che sta andando a rendere questa particolare intestazione h1 avere carattere blu ad esso. Quindi è molto semplice. È un bel modo per entrare e aggiungere uno stile semplice alla tua pagina. Tuttavia, questo tipo di rompe ancora la nostra regola di voler separare i contenuti dallo stile. Perché se vuoi cambiarlo in rosso o verde o qualcosa del genere più tardi, dovrai entrare e cambiare il tag, perché dovrai cambiare l'attributo. Quindi ho davvero provato a fare del mio modo per non usarlo affatto, e invece, ho l'abitudine di fare le cose nel modo giusto. E il modo giusto per modellare le tue pagine è usare i CSS. I fogli di stile CSS sono fondamentalmente un modo per scrivere regole che indicano come si desidera applicare lo stile a tutti i paragrafi, come si desidera definire lo stile di tutte le intestazioni o come si desidera applicare lo stile ad alcune delle immagini. E 'un modo davvero bello, specifico che tutti possono seguire per fare queste scelte di stile. E le regole sono impostate in questo modo. Per prima cosa devi mettere il tuo selettore, e il selettore è solo un modo elegante di dire cosa vuoi stile. Nel nostro caso, inizieremo semplicemente dando al selettore nomi di tag diversi come h1 o paragrafo. Una volta trovato quale tag è che si desidera stile, si dice quale proprietà è che si desidera modificare. Così possiamo guardare cose come il colore, il colore di sfondo, quanto spazio ci mettiamo intorno, copriremo tutti. Ma per ora, inizieremo molto semplici e ci occuperemo dei colori. Quindi, devi dare ad ogni proprietà un valore, dicendo quale colore vuoi che sia. Quindi, da un lato, abbiamo il molto generico, come scriviamo una regola. E dall'altro, ho scritto una regola molto specifica che dice, hey, ogni volta che vedi un titolo h1, voglio che tu renda il colore del carattere blu. Quindi abbiamo fatto esattamente quello che abbiamo fatto quando abbiamo incorporato usando il tag di stile, ma ora è molto generico, e non stiamo parlando di un titolo specifico. Non stiamo parlando di un tag specifico. Quindi, quando scrivi quelle regole, la sintassi è molto importante. Un sacco di volte, quando scrivi HTML, il browser è davvero bello con te e se ti dimentichi di chiudere un tag dice, va bene, so cosa vuole che io faccia e andrà avanti e mettere la pagina in ogni caso. Quando stai facendo CSS, se sei sciatto con ciò che chiamiamo la tua sintassi, finirai nei guai. Quindi, le parentesi e i punti e virgola sono molto importanti. Quindi, lascia che ti mostri di nuovo quando torniamo qui, puoi vedere che ho una parentesi iniziale e una parentesi di chiusura, e ho questo punto e virgola proprio alla fine. Devi ricordarti di includerli. E uno dei motivi per cui parlo è che quando inizi a scrivere il tuo codice, quando scegli un buon editor, e la maggior parte degli editor è abbastanza buona, come Sublime o TextWrangler, TextEdit, Notepad ++, metteranno i colori per te. Quindi all'improvviso se stai guardando le tue regole CSS e sei tipo, woah, mi aspettavo che le cose fossero di colori diversi, ma invece tutto è bianco o tutto è rosso. Ti dà questo suggerimento che hai incasinato la sintassi della tua regola. Nella stessa riga, voglio solo buttare qui che quando stai scrivendo la tua regola puoi inserire commenti per aiutarti a eseguire il debug e aiutarti a spiegare a te stesso cosa stai andando. E questo è il modo in cui i commenti vengono fatti in CSS. Basta fare di nuovo il /*, */. Quindi cosa succede se vuoi fare più di una sola proprietà? Cosa succede se invece di dire solo che vuoi che il colore sia blu, vuoi anche che il colore di sfondo sia giallo? Beh, nessun problema. È possibile avere tutte le combinazioni di valori di proprietà che si desidera. Devi solo ricordarti di separarli con il punto e virgola. Quindi in questo caso, di nuovo, ho impostato il colore su blu e il colore di sfondo su giallo. Ok, ora che sai scrivere una regola, come facciamo a farli funzionare? Beh, ci sono due modi e il primo modo in cui ti dirò è chiamato usando un foglio di stile interno. Quindi, come puoi vedere qui nel mio codice, ho il modello di base del nostro file. E all'interno dei tag head, ho inserito questo tag di stile, ecco dove vorrai mettere le tue regole, sono definite proprio all'interno di quello stile. Quindi ora, all'interno del tag di stile, ho aggiunto l'h1, il colore blu, e ho terminato il mio tag di stile. Quindi quello che succede ora è che quando il browser apre la tua pagina, arriva alla sezione principale che dice, oh fantastico , ha scritto alcune regole, vediamo cosa vuole che faccia. E saprà passare attraverso la tua pagina e applicare questa regola a tutti i tag H1. E se hai più regole tra cui paragrafi, immagini, cose del genere, saprà, voglio applicarlo a tutte le istanze dell'intero file. Ok. Ora c'è una buona probabilità che tu faccia un casino perché faccio questo 80% delle volte in cui mi sto sviluppando in classe, e quello che faccio è che dimentico di chiudere questo tag di stile. E se dimentichi di chiudere quel tag di stile in basso, beh, in realtà la tua pagina potrebbe finire per essere vuota. Quindi non dare di matto quando inizi a farlo se la tua pagina è vuota, probabilmente significa che hai dimenticato di chiudere il tag di stile. Va bene. Quindi, i fogli di stile interni sono davvero belli quando stai solo cercando di modellare una pagina. Tutto bene? E lo faccio spesso solo per poter tenere tutto il mio codice in un file invece di andare avanti e indietro e avanti e indietro. Ma immaginate di avere un sito in cui si sta andando avere 10,20, un 1.000 pagine diverse e si desidera che tutti abbiano un aspetto molto coerente su di loro. Non vuoi dover entrare e dire che se vuoi cambiare un colore, non devi entrare e aprire ognuno di quei file in modo da poter cambiare il colore in rosso o verde. Invece quello che vuoi usare è che vuoi usare qualcosa chiamato fogli di stile esterni. Il modo in cui funziona con un foglio di stile esterno è che si inseriscono le regole in un file diverso. Quindi apri un file, lo salverai qualcosa come mystyle con un'estensione.css. Quindi ora il browser sa, oh tutto in HTML, questo è il contenuto. Tutto in .css, questo è il layout. Ora, quando crei il tuo foglio di stile esterno, sembra proprio come abbiamo appena fatto nell'interno, tranne che non usi un tag di stile. Quindi, una volta inserite le regole in un file separato, tutto quello che dovete fare è aggiungere un link nella sezione head. Quindi in questo caso, sono entrato, ho messo il mio link, ho bisogno di fargli sapere la relazione cuz del foglio di stile. E devi ricordarti di inserire il nome del file. quindi ancora una volta questo è dove sarà molto importante che tu stia nominando le cose in modi che fanno da allora a te. È possibile collegare a tutti i fogli di stile diversi come si desidera, la maggior parte delle volte iniziamo con uno. Quindi Ora che abbiamo avuto quel foglio di stile, ogni singolo file che si collega ad esso condividerà tutti quel foglio di stile. Ricordi quando ti ho detto che potresti avere un sito con 10, 20, 1000 pagine e decidi di cambiare quel colore da blu a rosso o verde o qualcosa del genere? Questo è fantastico. Tutto quello che devi fare è aprire style.css, cambiare una riga di codice, e ora hai appena cambiato potenzialmente migliaia di pagine Ok, quindi parliamo un secondo di questa idea di fogli di stile CSS. Cosa significa che stiamo andando a cascata? Beh, quando il browser fa la tua pagina, la prima cosa che guardera' e' andare, va bene, forse non mi stanno dicendo niente. Come faccio normalmente a creare intestazioni h1? Quanto grande faccio quel font? Avere il proprio tipo di valori predefiniti. Ma poi va e sembra e dice, oh ci sono fogli di stile esterni. Perché se è così, sovrascriverò le impostazioni predefinite del browser e inserirò le regole che si trovano in questo foglio di stile esterno. Successivamente controllerà lo stile interno. Quello stile che hai nella sezione della testa. Perché in generale, il browser pensa, hm, forse c'è qualcosa di veramente speciale in questa particolare pagina, e qui vuole che io faccia queste regole invece. Infine, uno di quegli stili in linea in cui usi il tag attributo, quelli avranno la precedenza più alta di tutti. Quindi può essere davvero confuso, perché potresti iniziare a scrivere regole diverse e non riesci a capire perché alcuni stanno funzionando e altri no. Qui è dove la parte a cascata entra di nuovo in gioco. Per prima cosa esamina i valori predefiniti, quindi esterni, quindi interni e quindi inline. Ecco perché vuoi davvero evitare di usare qualsiasi stile in linea perché annulla praticamente tutte le tue regole di stile. Va bene, quindi sappiamo come vanno quei quattro, ma cosa succede se hai un selettore e, hai collegato a due o tre fogli di stile diversi, e quello stesso H1 è stato definito come blu, verde e giallo, ma in file diversi. Come fa il browser a sapere cosa fare? Bene, come funziona è che le regole del file più recente hanno la precedenza. E quello che intendo con il file più recente, significa che va nella sezione principale e va uno, due, tre, e guarda in che ordine li hai elencati, e l'ultimo che hai elencato è quello che avrà la precedenza. Va bene? Beh, cosa succede se hai un selettore nello stesso file e hai scritto H1 più volte. Questo può effettivamente accadere un bel po '. Specialmente se decidi di andare a far parte di una grande azienda di sviluppo, scrivi un codice, e poi qualcun altro scrive del codice, o, come dico ai miei studenti, forse sei uscito e ti sei divertito una sera, e sei tornato a casa e hai deciso che sto codificando! E dimentichi di aver già scritto alcune regole. Beh, se questo è il caso, ancora una volta, il browser sta andando a guardare quello che ha visto per ultimo. Quindi, in questo caso, ho due regole per h1. Si scrive al colore blu. E ho detto: «Ehi, voglio che usi questa famiglia di caratteri aerei». E poi, dopo, potrebbe esserci un sacco di cose qui, potrebbe non essere niente, e io dico ehi, voglio che usi una famiglia di font Times. Come il browser sta andando a guardare questo è che andrà giù, doo-doo-doo-doo-doo-doo-doo e dire, farò tutto il font blu, e farò la famiglia di font Times. E 'solo che sta sempre andando a usare l'ultimo che ha visto. Quindi, ancora una volta, la regola più recente ha la precedenza, se fosse all'interno del tuo codice o provenisse da file diversi. C' è, tuttavia, un modo per sovrascriverlo. Supponiamo che tu stia scrivendo qualcosa e che tu sappia che vuoi che qualcosa sia cosi'. Non ti importa se qualcun altro lo sovrascrive. Vuoi davvero assicurarti che la gente non usi lo stile in linea, cose diverse del genere. Quello che puoi usare è che puoi usare il! Attributo importante proprio qui. Quindi proprio qui ho la famiglia dei font, Arial, e ho qualcosa di importante proprio qui. Quindi, anche se più tardi decido di sovrascriverlo con i tempi, il browser sta per dire no, so che lei voleva davvero che io usi Arial, e funziona. Quindi andiamo avanti e guardiamo un esempio di cosa intendo con tutti quei precedenti. So che ascoltarmi puo' essere un po' travolgente, quindi ho un rapido esempio che ti mostra i diversi modi e poi concludero' questa lezione. Quindi iniziamo usando l'attributo style. Come puoi vedere qui, ho scritto il codice e ho usato l'attributo style per questa intestazione h1 e questo paragrafo. Quindi in questo caso, voglio che la mia intestazione h1 sia blu, e il mio paragrafo sia rosso. E quello che voglio davvero mostrarvi è che l'unico paragrafo che è stato cambiato in testo rosso o carattere rosso è stato il primo. L' altro e' ancora nero. Quindi l'unico modo per lo stile è se entri e cambi ogni tag per farlo sembrare come vuoi. Se volessi che tutti i paragrafi fossero rossi, dovrei andare lì e mettere stile uguale, stile uguale. In questo esempio ce ne sono solo due, ma puoi immaginare come sarebbe diventato davvero fastidioso se ne avessi un sacco, ok. Nel nostro prossimo esempio abbiamo uno stile interno. In questo caso, ho inserito il mio tag di stile in alto e ho aggiunto regole per paragrafi e intestazioni H1, e dovrebbe gestire entrambi. Quindi ora non c'e' piu' niente qui dentro, la mia targhetta e' tutta da sola. E se guardi il risultato, andiamo qui. Puoi vedere che ora, anche se il mio HTML non ha alcun tipo di stile , entrambi i paragrafi sono rossi qui e così è l'intestazione. Tutto bene? L' ultimo esempio che ho avuto per te è che ho preso queste stesse regole e le ho rimandate in un foglio di stile esterno. Di nuovo, non c'è nessun tag di stile qui. Sono solo le regole stesse. E poi ho dovuto tornare al file HTML, e puoi vedere proprio qui, vicino alla parte superiore, ho hey, colleghiamo al foglio di stile che voglio. Ora, voglio fartelo notare con molta attenzione. Se noti, ho un foglio CSS/ExternalStyle. Ciò significa che il mio foglio di stile si trova in una cartella speciale chiamata css. Gli sviluppatori sottolineano davvero che lo fai, perché vuoi che il tuo codice sia organizzato in parti diverse. Quindi, ancora una volta, allo stesso modo, ora ho una pagina che utilizza fogli di stile esterni e sembra davvero buona. Quindi tutto questo codice sara' disponibile per te per guardarlo, ma voglio che tu ci giochi il piu' possibile. Ma voglio usare questo ultimo esempio per aiutarti a capire come funziona la cascata. Quindi proprio qui, ho il mio foglio di stile esterno. Vado qui solo per un secondo. Vai al mio, e ho intenzione di aggiungere, un'ultima cosa. Scusa, sara' imbarazzante. E diro' che sai una cosa? Invece, voglio che quel font sia di nuovo nero, e lo finisco. Ti faccio vedere cosa succede quando fai un casino in fretta. Lo salvero', ricarichero' la mia pagina e tutto e' scomparso. Era di questo che parlavo. Vuoi davvero assicurarti di includere quel tag di stile. Fallo. Assicurati di chiuderlo. Va bene. Quindi ora quello che sto succedendo qui è che il mio browser ha il suo browser predefinito. Ha un foglio di stile esterno e ora ne ha anche uno interno. Quindi vediamo di che colore sarà, se sarà blu o se sarà nero. E come puoi vedere, è nero. Quindi, quando si inizia lo styling, sarà molto importante esaminare diversi modi per separare il contenuto dalla formattazione. Oltre a guardare i diversi modi in cui puoi fare quella formattazione. Quindi, una delle prime cose a cui voglio che pensiate è come questa idea di fogli di stile esterni e interni giochi davvero nella separazione del contenuto dalla formattazione. E allo stesso tempo voglio che tu capisca che non seguiamo sempre tutte le regole. All' inizio dobbiamo sempre iniziare con esempi davvero semplici per aiutarvi ragazzi a solidificare ciò che sta succedendo con i CSS. Quindi ho intenzione di concludere questo ora con una breve e breve demo da un esempio che hanno su csszengarden.com perché penso che porti davvero a casa l'idea che i CSS possono essere molto potenti. Quindi diamo un'occhiata. Così in questo sito, CSS Zen Garden, Hanno effettivamente fatto un ottimo lavoro di mostrare tutti i diversi modi in cui è possibile formattare esattamente lo stesso file, ma in modi diversi. Quindi quassù, se dai un'occhiata, puoi vedere che questo è un foglio di stile di una persona per decorare o modellare questo documento. Ora, senza cambiare nulla dell'HTML, qualcun altro è entrato e ha detto, ehi, sai una cosa, è bello, ma ho intenzione di stile in questo modo. Sembra completamente diverso. È lo stesso esatto HTML ma sembra completamente diverso. Allo stesso modo, abbiamo questo proprio qui, stesso esatto HTML. Ma non potresti sembrare diverso, perché hanno aggiunto alcuni CSS e JavaScript che è diverso. Allora, vieni con me. Codificeremo molto in questo corso. Giocheremo molto con questo corso. Farai un sacco di casino in questo corso. Ma non vedo l'ora che tu sviluppi qualcosa che rifletta davvero come vuoi che la tua pagina appaia. Grazie.