Ciao, nella lezione di oggi, parleremo dello stile del tuo testo sulle tue pagine web. Uno dei modi migliori e più semplici per rendere davvero la tua pagina un aspetto un po 'diverso da quello predefinito standard è pensare a come potresti voler stile il tuo testo per ottenere il massimo impatto. Tante, tante opzioni e ne parleremo oggi. Una di queste opzioni è pensare fondamentalmente al tuo font. Alcune delle cose che è possibile definire sono la famiglia di caratteri, lo stile del carattere, la variante del carattere e la dimensione del carattere. Possiamo anche pensare allo stile del colore e dello sfondo del tuo font. Possiamo parlare anche di allineamento. E infine, parleremo molto brevemente dell'altezza della linea. Queste sono tutte e quattro le cose che si possono fare per solo davvero tipo di evidenziare o sottolineare le diverse cose che si desidera che il vostro stile di portare su. Quindi prima parliamo di famiglia di font. Le famiglie di caratteri sono solo diversi tipi di testo. Quindi, se hai usato Word prima, sei andato in, sei andato alla famiglia di font e puoi scegliere Arial o Wingdings o tutti questi diversi tipi di font. Puoi fare le stesse cose sulla tua pagina web. Quindi ho qui un paio di esempi per voi dei più comuni. Hai Helvetica, Corriere, Corriere Nuovo, Comic Sans, Corsivo o Verdana. Ho provato a inserire il tipo di carattere qui nella diapositiva, ma potrebbe essere difficile da vedere. E l'ho fatto apposta, perché quello che ti sembra ovvio quando stai progettando non sembra sempre ovvio per le persone che stanno guardando la tua pagina. Ho anche scelto questi particolari perché volevo mostrarvi che alcuni sono una sola parola, come Helvetica. Ma Comic Sans MS è più parole, quindi ho dovuto metterlo tra virgolette. Va bene. Quindi, come funziona è, ancora una volta, si utilizza la regola di sintassi. Hai il tuo selettore, la tua proprietà e quindi il tuo valore. Quindi in questo caso ho detto che ogni volta che vedi un'intestazione h1, non usare l'intestazione predefinita del browser, invece voglio che tu usi il carattere Arial. Quindi cambia leggermente il carattere per assomigliare a questo esempio qui. Ora ogni singolo browser non supporta tutto. L' abbiamo visto anche con HTML 5. Alcuni browser supportano del testo, altri no. Allo stesso modo alcuni browser supportano alcuni font e altri non lo fanno altrettanto. Quindi quello che puoi fare è fornire alternative. In questo esempio, ho dato al browser tre diverse alternative da usare. Sto praticamente dicendo, ogni volta che arrivi a un tag h1, voglio davvero che tu usi il font Courier. Ma se non hai il font Courier, usa il font Impact. Se non ce l'hai, vai avanti e usa Arial. Ora, una delle domande che potresti farti è, e se non avesse tre di questi caratteri? Non ha Courier, Impact o Arial. Bene, se ricordi, quando abbiamo parlato per la prima volta dei fogli di stile a cascata, abbiamo detto che se gli dai una regola e non può supportarla, tornerà sempre al default del browser. Quindi non devi preoccuparti che il font scompaia perché gli hai dato una cattiva famiglia di font. Ci arrivera' sempre. Quindi, quando scegli le tue famiglie di font, ci sono alcune cose a cui dovresti pensare. Il primo è forse il più importante, è che alcuni font sono molto più user friendly di altri. Ci sono fondamentalmente due categorie. Hai font serif e font sans-serif. I caratteri serif sono quelli che hanno il tipo di bordi fantasia lungo il lato che hai usato quando stavi imparando la calligrafia o cose diverse del genere. I font sans-serif sono molto puliti, non ci sono menu a discesa o qualcosa del genere. Quindi, quando arriva il momento che qualcuno ti faccia saltare in aria, entri davvero e sto cercando di pensare alla parola giusta, quando vuole entrare, e vuole farla sembrare piu' grande. I font Serif possono davvero diventare disordinati, quindi evitali quando possibile. Personalmente non uso font personalizzati da solo, ma non sono mai stato un tipo artistico di persona. Quindi, se decidi che vuoi avere il tuo font, o una sorta di font personalizzato per il web speciale, devi usare qualcosa di speciale qui chiamato una regola font-face. E quello che facciamo, è che puoi vedere nel primo esempio, tu dici, ehi, definirò il mio carattere personale. Mi capita di chiamarlo MySpecialFont. Puoi chiamarlo come vuoi chiamarlo, e poi devi dargli una fonte. Quindi quella fonte, questa è una nuova che non hai mai visto prima. Non stiamo usando href, non stiamo usando source, stiamo usando url. E l'url dice che questo è dove puoi trovare il file che definisce il mio carattere speciale. E una volta che lo fai, una volta che scrivi la regola del carattere una volta, durante il resto del foglio di stile puoi andare avanti e fare riferimento ad esso. Quindi ora ogni volta che uso un font h1, userai MySpecialFont. Quindi ora parliamo di stile del carattere. È una parola molto più fantasiosa di quanto ci si possa aspettare, ma stiamo semplicemente parlando di vuoi che il tuo font sembri normale, che è l'impostazione predefinita, o vuoi che sia corsivo? O vuoi che sia obliquo, che è fondamentalmente solo un tipo speciale di corsivo. Quindi il font normale accadrà non importa cosa succede se è solo come sta andando essere. Se qualcun altro ha scritto un foglio di stile e lo ha reso tutto corsivo, è allora che potresti voler dire, no, no, lo sovrascriverò e lo renderò normale. Il corsivo è sempre un certo tipo di magra, fondamentalmente, al tuo font. Un obliquo è quando vuoi davvero essere extra speciale e definire esattamente quale angolo vuoi avere il tuo testo inclinato. La variante del font, abbiamo davvero solo due opzioni qui. Abbiamo la normalità e abbiamo le piccole maiuscole. Le persone lo usano un bel po 'quando stanno cercando di fare un aspetto molto coerente e tuttavia un po 'elegante ad esso. Quindi qui ho detto di nuovo, usando sempre h1, voglio che la mia variante di font sia small caps. Così ora, quando guardi il mio testo, il mio testo h1 in basso, ho scritto <h1>Variazione maiuscole piccole. Ma quando il browser lo visualizza, lo mostrerà in maiuscole. Quindi questo ti impedisce di dover andare avanti e indietro per ricordare di cambiare tutto il tuo testo in maiuscolo o minuscolo. Non importa come lo scrivi, il browser lo mostrerà sempre in maiuscolo. Ora la dimensione del carattere è qualcosa di cui parleremo praticamente durante l'intero corso e in altri corsi che faremo pure, come il design reattivo, perché è davvero un sacco di modi diversi per farlo. Quindi iniziamo con il più semplice. Le opzioni sono, è possibile utilizzare la dimensione del carattere uguale a extra-extra-small, extra-small, small e small. Non mi piacciono molto, perché in realtà non mi dà un quadro di riferimento. Puoi avere medio, puoi avere grande, extra-large, xx-large e più grande. Pochissime persone usano queste opzioni, ma sono là fuori quindi volevo dirti cosa erano. Invece, quello che molte persone usano è che usano i pixel. Quindi, includerò sul sito questo bel tipo di tavolo per te che riferisce quanti pixel a un pollice, quanti pixel a picos, così puoi avere un'idea per questo. Ma la maggior parte delle persone fa qualcosa sulla falsariga di 20 pixel, 35 pixel, 80 pixel. E questo è un aspetto molto coerente ed è qualcosa che le persone possono tipo di sentire come dovrebbe apparire. Tuttavia, tendo ad usare invece le percentuali. Le percentuali ci permetteranno di cambiare la dimensione del carattere mentre ridimensioniamo lo schermo molto più facilmente. Quindi, se dovessi dire usa 100%, sarà la dimensione predefinita. Se dici di usare il 110% sarà leggermente più grande. Se dovessi usare il 75%, sarebbe tre quarti della dimensione. Quindi, parliamo di colore e colore di sfondo. L' attributo color è il colore del primo piano, che è la parola fantasia solo per il testo stesso. Va bene. Il colore di sfondo è il colore dello sfondo dietro il font che stiamo guardando. E a seconda del tipo di testo che stai disegnando, può sembrare molto diverso. Quindi, qui ho fatto una regola, e tu non l'hai mai visto prima. Ho intenzione di andare avanti e stile due diversi selettori. Ho intenzione di stile h1 e span. Quindi se metti una virgola proprio lì, ce l'ho proprio qui, tra l'h1 e lo span, puoi mettere tutte le virgole che vuoi e scrivere quanti selettori vuoi. In questo caso ho detto, hey, voglio che il mio colore sia blu, e voglio che il mio colore di sfondo sia grigio. E se non siete sicuri da dove venissero questi strani numeri, andate a guardare il video dei colori. Ti spieghera' tutto. Quindi ora sono entrato, e nel mio HTML, ho i colori in un tag h1, e ho la parola inline all'interno di un tag span. E quello che voglio che tu noti è che per l'h1, l'elemento di blocco, il colore di sfondo copre l'intera larghezza della pagina. Ma per span, per gli elementi in linea, il colore di sfondo va solo intorno all'elemento e al testo stesso. Quindi parliamo di allineamento del testo. Allineare il testo è semplice. Probabilmente è una delle cose più semplici che puoi fare in HTML. E sarai davvero felice. Perche' piu' tardi, quando deciderai di voler allineare altre cose, e' cosi' difficile e vorrai solo mettere tutto nel testo. Quindi le tue opzioni sono quando usi l'allineamento del testo puoi usare a sinistra, il che significa semplicemente allineare il testo a sinistra. E' quello che facciamo già. Puoi avere il diritto, il che significa allineare tutto a destra, al centro e giustificare. Centra tutto quanto te, lungo il centro di quella divisione. Giustificare cerca di diffonderlo per usare più spazio possibile. Quindi lascia che ti mostri alcuni esempi perché questo è davvero il modo migliore per capire cosa sta succedendo qui. Qui ho un allineamento a sinistra. Tutto si allinea lungo il lato sinistro dello schermo. Il prossimo che ho usato il testo in linea è uguale a destra. E puoi vedere che tutto è allineato a destra. Sembra davvero strano. Ci sono pochissime ragioni per usarla. A meno che tu non abbia qualcos'altro in mezzo qui. Il prossimo che faremo e' il centro. La gente usa il centro un bel po '. Lo usano quasi troppo, ma è un bel modo per rompere il testo e farlo sembrare un po 'diverso. Quindi giustificare è davvero difficile da spiegare, e anche quando si guarda per la prima volta, si potrebbe non notare cosa sta succedendo. Ma con giustificazione, il browser sta mettendo in piccoli pezzi di spazio extra per un po 'di aiuto a diffonderlo in modo che abbia la stessa esattamente larghezza lungo tutto il percorso. Quindi ti mostrero' il giustificato con la sinistra. E penso che questo sia il modo migliore per vedere la differenza, è che in pratica non hai lo spazio vuoto qui. L' hanno sparsa qui, quindi nessuno ha troppo spazio vuoto. Successivamente parleremo dell'altezza della linea e l' altezza della linea è davvero diversa perché non influisce sul carattere stesso. Non sta influenzando il tuo messaggio. Sta influenzando la quantità di spazio intorno al testo. Alcuni di voi potrebbero aver usato Word prima, e si può andare e solo quanto spazio c'è tra le righe. Forse vuoi che sia una linea, una linea e mezza, doppia spaziatura. E' di questo che stiamo parlando. Quindi il mio primo esempio ho detto l'altezza della linea pari al 50%. E il prossimo ho detto che l'altezza della linea è pari al 200%. Quindi, nella prima regola, è una regola piuttosto strana da scrivere perché sto dicendo che voglio che le cose si sovrappongano l'una con l'altra. Nella seconda regola sto dicendo che voglio che ti sparisca molto lontano. Oops, va bene, vado avanti e metterò un esempio più tardi online dove posso mostrarti esattamente come sarebbero queste cose. O ancora meglio, ho intenzione di trasformare questo in un momento insegnabile e ti faccio entrare e scriverlo tu stesso e guardare come queste due regole diverse influenzano il testo. Quindi rivediamo. So di aver esaminato un sacco di cose, e puo' essere travolgente. Quindi una delle cose più importanti è con tutto ciò che facciamo in questo corso, è prendere cinque, dieci minuti, digitare alcune cose, dare un'occhiata e vedere cosa succede. Commetti quanti più errori puoi, perché questo è il momento di commettere errori, quando hai qui me e il resto della folla per rispondere alle domande sulle diverse commissioni. Pratica sui problemi dei giocattoli. Non creare una pagina web enorme e cercare di stile. Crea una pagina con tre o quattro paragrafi, un paio di link, e pratica su quelli, perché non importa, non hai bisogno di esercitarti su una grande pagina, puoi esercitarti sui piccoli problemi e fa davvero una grande differenza. Infine, se decidi di essere pronti a codificare e di essere pronti a realizzare un progetto di grandi dimensioni, assicurati di progettare i tuoi progetti più grandi su carta. Non posso sottolineare abbastanza che se inizi a codificare e stilare senza avere un piano chiaro, sarai solo molto frustrato e speriamo, non si spera, diventerai molto frustrato e lascerai. E non voglio che tu lo faccia. Quindi pianifichi prima tutti i tuoi progetti su carta. Se segui questi suggerimenti, se ti alleni, fai pratica, se fai problemi con i giocattoli, se prima di saltare in grossi problemi lo schizzi prima, penso che ti divertirai molto, e avrai una pagina davvero fantastica di cui sarai orgoglioso.