Ciao a tutti.
Bentornato.
E' tempo per noi di iniziare il nostro progetto finale.
Spero davvero che quando avrai finito con questo, avrai qualcosa di
cui ti senti davvero orgoglioso e che vorrai condividere.
Ancora una volta, il nostro obiettivo è quello di scrivere un foglio di
stile e stile tre diversi file HTML.
Ora, quando
comincerai, presumo che tu abbia fatto il secondo incarico peer-graded.
Puoi sentirti libero di modificarlo quanto vuoi, ma
ho bisogno di sapere che quei cambiamenti sono completati.
Va bene, lascia che ti mostri il nostro prima e il nostro dopo per
dove andremo con questo progetto finale.
Quindi diamo un'occhiata a quello che abbiamo fatto finora in questo corso.
Abbiamo avuto la nostra prima vista HTML.
Il prossimo, l'abbiamo reso molto chiaro.
Il nostro terzo, dove abbiamo aggiunto uno stile diverso.
E infine,
sul nostro quarto, potrebbe non sembrare molto diverso in questa prima pagina, ma
dove ho intenzione di concentrarti è sulla pagina Squadre, e su questo tavolo.
Sarai in grado di vedere che sono davvero uscito e ho
messo un sacco di styling in questo tavolo.
E la ragione per cui ho scelto i tavoli è perché questa sarà una possibilità per noi di entrare e
usare quelle pseudo classi.
Usa quegli pseudo elementi, usa alcuni gradienti,
tutte quelle piccole cose che possono essere un po 'difficili da raggiungere,
ma una volta fatto, sembra davvero buono.
Quindi parliamo di ognuna di queste piccole parti.
Quindi ancora una volta, solo un piccolo promemoria, crea un singolo foglio di stile.
Non voglio un foglio di stile diverso per
ogni pagina, ne vuoi uno che coprirà tutti.
E useremo pseudo-elementi e pseudo-classi.
Quindi, se sembri un po 'confuso su questo, non dimenticare,
abbiamo diapositive che coprono questo e alcuni dei nostri esempi di codice insieme.
Quindi iniziamo con la tabella perché questa è la maggior parte della pagina.
Come minimo, voglio che tu vada avanti e stile il carattere, la larghezza
e il margine.
Ora, quando si stile il carattere, ci sono molte opzioni diverse che si possono guardare.
È possibile avere diverse famiglie di caratteri.
È possibile modificare le dimensioni, lo spessore e l'altezza della linea.
Uno dei motivi per cui raccomando l'altezza della riga, è che quando
lo fai, è molto più facile centrare il testo all'interno delle righe se hai reso
l'altezza della riga uguale alla dimensione del testo.
Per la tua larghezza, non voglio che il tuo tavolo occupi l'intera pagina.
Voglio che occupi da qualche parte probabilmente tra il 75 e il 90 percento.
E uno dei motivi per cui voglio che tu lo faccia,
e' perche' voglio che tu metta al centro il tavolo.
Voglio che giochi con quella proprieta' del margine.
E scopri come puoi occupare la giusta quantità di spazio e
metterla dove vuoi.
Poi guarderemo l'intestazione del tavolo.
Quindi l'intestazione della tabella sembra un po 'diversa dalle altre righe, e
ha davvero quell'importante significato semantico.
Quindi, usando i tag di intestazione della tabella, saremo in grado di raddoppiare su questa
idea che lo stiamo disegnando in modo diverso e significa qualcosa di diverso.
Quindi, prima, cambia il colore di sfondo.
Una volta che lo fai funzionare,
voglio che provi a inserire un colore di sfondo sfumato.
Ora non dimenticare per usare il gradiente,
dovrai inserire alcuni prefissi del browser.
Quindi, aggiungi un bordo ma voglio solo arrotondare i due angoli superiori,
non l'intera cosa, e quindi rendi anche il bordo inferiore più spesso.
Infine, quando hai finito con questo, vai avanti e
aggiungi solo almeno un'altra proprietà, qualcosa che pensi sembrerebbe fantastico.
Una volta che hai fatto l'intestazione della tabella, andiamo avanti e mettere in un po 'di stile per
le righe della tabella.
La prima cosa che voglio che tu faccia, e c'è una ragione per questo,
è che voglio che tu imposti l'opacità delle righe della tabella su un valore di circa 0,8.
Da qualche parte laggiu'.
Dove puoi ancora leggere il testo, ma è un po 'sbiadito.
Successivamente, voglio che tu ti assicuri che la prima colonna di ogni riga della tabella
sia allineata a sinistra e gli altri due siano centrati.
Ora, puoi fare questo stile all'interno degli elementi della riga della tabella, o
potresti farlo all'interno degli elementi della tabella, quei TD.
Dipende davvero da come si salta dentro e si tenta di stile questo.
Infine, voglio che tu vada avanti e metta un'altra pseudo-classe.
Dove quando qualcuno passa sopra una qualsiasi delle righe,
cambierà da una sorta di sbiadito a un colore più scuro.
E ti mostrerò un esempio di questo prima di andare avanti.
Quindi, se si nota in questa tabella,
il testo è un po 'sbiadito dal colore del carattere nero solido.
Ecco dove entra in gioco l'opacità.
Ora, quando passo il mouse sopra il nome di ogni squadra,
vedrai che il carattere diventa un po' più scuro.
Non ho cambiato il colore del carattere qui, non ho cambiato la famiglia di caratteri, o
il tipo, o qualcosa del genere.
Invece, quello che ho cambiato è l'opacità per impostarlo su 1.
Quindi ora, quando il mio hover si
spegne, torna a quel tipo originale di valore sbiadito.
Ciascuno degli elementi della tabella può richiedere qualsiasi quantità di stile che si
desidera dargli.
Ma quello che voglio vederti fare è che voglio vederti stile il padding, il colore
del carattere e il colore di sfondo.
E voglio che tu imposti il raggio del bordo su due pixel.
Non saresti mai in grado di vedere quel tipo di
differenza indistinguibile o sottile sul tavolo.
Quindi voglio che tu lo metta dentro, cosi' quando ti dico di farlo,
ti accorgi che c'e' un vero cambiamento.
Finalmente, questa sarebbe una grande occasione per
te di fare qualcosa che non ho coperto da solo.
Parte dell'essere un web designer è imparare ad andare là fuori e
cercare proprietà diverse con cui si può giocare.
Quindi ti incoraggerei ad uscire a guardare l'ombra del testo.
È qualcosa che uso nel mio esempio.
Quindi, se vuoi davvero provare a replicarlo, vai avanti e prova a usarlo da solo.
Ancora una volta, useremo la valutazione peer per questa assegnazione.
E i gradi saranno basati sia sul livello di completamento che su un certo livello di estetica.
Gli standard di codifica corretti verranno sempre applicati, ma
è possibile specificare la dimensione dello schermo preferita.
Quindi, se qualcuno decide di prendere il tuo CSS e applicarlo all'HTML,
puoi fargli sapere che questo sembra davvero meglio su un grande schermo o un piccolo dispositivo mobile.
Ora, ci sono in realtà molti,
molti modi in cui è possibile modificare questo foglio di stile intorno.
E quindi non voglio che ti preoccupi di superare ogni singolo standard.
Ma se si decide di qualcosa di un po' folle, un po' diverso, e
qualcosa che gli altri potrebbero non capire.
Ti consiglio davvero di metterlo vicino alla parte inferiore del foglio di stile. In
modo che le persone che guardano il tuo codice possano davvero concentrarsi sui requisiti reali
e poi essere stupite dalle tue innovazioni davvero interessanti.
Quindi spero che questo sia qualcosa che possa davvero aiutare a consolidare la tua
comprensione dei CSS.
Se ti imbatti in problemi, dovresti sentirti libero di usare le aree di discussione e
chiedere davvero alle persone tutto ciò che non sei del tutto sicuro su.
O semplicemente condividi qualcosa di figo che devi lavorare.
Buona fortuna.