Oggi parleremo di link di stile e liste di stile.
Quando arriva il momento di stile i link sulla tua pagina,
è davvero importante che ti ricordi che i link sono ciò che compongono un sito web.
È l'interconnettività che aiuta le persone ad acquisire conoscenza.
È ciò che aiuta i motori di ricerca a collegare il tuo testo e il tuo
contenuto al testo e ai contenuti di qualcun altro.
Quindi, oggi parleremo specificamente di link
perché voglio che tu pensi a come stai styling.
In generale, quando vai allo stile di un link puoi usare
tutti gli stessi attributi diversi che hai usato per tutto il resto.
Le tue intestazioni, i tuoi paragrafi, cose del genere.
Tuttavia, i collegamenti hanno una speciale proprietà aggiuntiva
chiamata text-decoration.
Quindi, in questo esempio qui, quello che sto succedendo è che
invece di avere i miei collegamenti in linea, il che significa che vanno uno accanto all'altro,
dico, hey, voglio che i miei collegamenti siano separati, uno sopra l'altro.
Quindi, si spera, la maggior parte di questo codice ti sembra familiare.
Hai questa idea che il display è blocco, andrà sotto l'altro.
Il peso del carattere, voglio che sia un po 'audace.
Ho impostato un nuovo colore e un nuovo colore di sfondo.
Ora ho impostato una larghezza e, se provi a impostare una larghezza e
non funziona, ricorda, i collegamenti per impostazione predefinita sono in linea e
non prendono una larghezza a meno che non li modifichi in blocco o in blocco inline.
Ho anche intenzione di allineare il testo, aggiungere un po 'di imbottitura, e questa decorazione di testo,
nessuno, questo è nuovo.
Questo dice, ehi,
voglio liberarmi di quella sottolineatura che di solito si presenta sotto i link.
Quindi sono passato da questo qui nell'angolo in alto
a qualcosa che un po 'più in stile qui in basso.
In realtà, quasi non sembra nemmeno un collegamento.
Quindi parliamo di questo.
A volte quando si installano i loro collegamenti,
le persone cercano davvero di farlo sembrare molto più simile ai pulsanti.
E vogliamo evitarlo perché vogliamo essere semantici.
Se vuoi un pulsante, usa invece un elemento button.
E puoi farlo molto semplicemente inserendo il tag button invece
del tag anchor.
E ancora, allo stesso modo puoi modellarlo in molti modi diversi.
Ma quello che voglio che tu capisca è che ci sono così
tante cose diverse che puoi fare con i link e così tanto stile che puoi fare con
loro, assicurati che le persone capiscano che è un link che stanno guardando.
Oppure, se usano un lettore di schermo, è un link di cui stanno sentendo parlare.
Quindi, un'altra cosa nuova sui collegamenti,
che non abbiamo mai visto prima, è questa idea che i collegamenti hanno stati.
Hai mai notato che, quando vai su una pagina web,
a volte alcuni dei link sono blu, e alcuni di loro sono viola?
E, ti rendi conto, dopo un po', di
quelli che sono viola, sono lì perché li hai visitati, prima.
Quindi, quello che abbiamo, è che abbiamo questi diversi stati.
E li esaminerò molto velocemente e più tardi,
quando parleremo di quelle che vengono chiamate pseudo classi, ne parleremo ancora di più.
Ma rapidamente, un a con questo due punti proprio qui link
dice semplicemente che questo è solo un link normale, l'hai visto prima, a
; visitato dice qui è un link e il mio browser mi dice.
Sa che ci ho già cliccato sopra.
Per impostazione predefinita del browser, sarà un colore diverso.
Abbiamo anche un collegamento con l'attività del passaggio del mouse su di esso.
Quindi probabilmente l'hai visto quando tieni il mouse su qualcosa,
un po' come se avessi la penna qui.
E' che fara' qualcosa di folle.
Forse cambierà il colore o cose diverse del genere.
Quindi il passaggio del mouse viene attivato tenendo premuto il mouse su un link.
Che tipo di solleva una domanda interessante su
questo funziona sui touch screen?
Quando stai sviluppando la tua pagina è necessario ricordare che hover non necessariamente
funzionerà se le persone stanno accedendo su un telefono o un tablet o qualcosa del genere.
Il che mi porta in un altro stato chiamato «focus».
Quindi lo stato di messa a fuoco è quello che succede quando qualcuno sta tabulando la tua pagina.
Mentre colpiscono la scheda salterà da un elemento all'altro.
E quando arrivera' a questo particolare collegamento, sapra' che sono a fuoco, quindi
se vuoi fare qualcosa di diverso, forse la stessa cosa che fai quando le persone si spostano,
e' cosi' che puoi innescare quell'attivita'.
Ok, e l'ultimo è quello che penso davvero sia il più strano di tutti,
forse lo definirei stupido, ma non ho creato Internet e HTML e
rispetto, ma è davvero strano, perché quello che dice è hey,
questo è il link proprio come faccio clic su di esso.
E la ragione per cui penso che sia strano è perché per la maggior parte di noi,
quando clicchiamo su un link, stiamo andando a una nuova pagina, quindi
non vedremo nemmeno cosa sia successo lo styling.
Tutto bene?
Andiamo avanti e parliamo di come facciamo.
Ma prima di farlo, ancora una volta torniamo a questa idea di precedenza. I
fogli di stile a cascata sono molto grandi su questo.
Se si decide di utilizzare questi stati diversi, è
necessario ricordare un paio di regole quando si scrivono i fogli di stile.
Uno, se hai intenzione di utilizzare a: hover deve venire dopo un: link.
E dopo, a:visitati e a:attivi devono venire dopo un:hover.
Quindi è solo questa gerarchia che sta succedendo mentre stai rivestendo le tue pagine.
Quindi diamo un'occhiata a un esempio ora di un codice e di come sto disegnando i miei link.
In questo esempio,
quello che ho qui è che ho solo tre link che non ho stilato in alcun modo.
Ho un link all'introduzione al web design,
un link all'Università del Michigan e un link alla Kent State University,
dove ho fatto la mia laurea.
Ma cosa succede quando vado avanti e aggiungo alcuni CSS?
Quassù in cima ho tutte le cose tipiche di cui abbiamo parlato prima,
la larghezza e il colore.
Ho aggiunto la decorazione del testo, e
quello che volevo anche aggiungere è questa idea di margine in cui posso centrare ciascuno dei miei collegamenti
uno sopra l'altro con un po 'di spazio tra di loro.
Va bene, allora diamo un'occhiata a come sembra e
potete vedere che ogni link sembra molto diverso, ok?
E potete vedere quando vedo la mia penna,
quando passo il mouse su ognuna di queste, quello che succede sono i cambiamenti di colore. Il
modo in cui l'ho fatto funzionare e' proprio qui.
Ogni volta che il mio link entra in uno stato di passaggio del
mouse, sa cambiare il colore di sfondo e il colore del carattere.
Ok, beh, cos'è un:messa a fuoco, e quello che ho qui un po ', a:attivo?
Quello che sta succedendo qui è che ho messo in a: focus per
quelle persone che stanno tabulando attraverso la mia pagina.
Così come mi guardi scheda, si può vedere Introduzione al Web Design va a
fuoco, e poi l'Università del Michigan,
e poi Kent State, e lo sto facendo tabulando attraverso la pagina.
L' ultima regola, la regola attiva, e' una cosa che ti mostrero' e
poi mi stacchero' da li'.
Come funziona il funzionamento attivo è che quando si sta effettivamente facendo clic su una pagina,
si sta andando ad aggiungere un bordo intorno a quel link.
Ora, la cosa strana e' che appena avro' finito di
cliccare andremo a una nuova pagina.
Quindi si interrompe, non si riesce a vedere quel confine, a
meno che non lo tenga premuto molto deliberatamente, proprio così.
Quindi, in questo esempio ho provato a mostrarti i due diversi modi in cui puoi
stilare i link.
Ora andiamo avanti e pensiamo a questo in modo un po 'più dettagliato.
Quando stile questi link, ancora una volta non posso sottolineare abbastanza l'importanza dell'
accessibilità, vogliamo assicurarci che i tuoi link siano link e
che le persone sappiano che sono lì.
Una volta che hai finito di giocare con i link, andiamo avanti e
iniziare a pensare agli elementi della lista di stile.
Quando gli elenchi di stile, tipo di proprietà predefinite hanno tutti lo stesso aspetto.
Hai uno, due, tre o il cerchio, cerchio, cerchio, cerchio, ma
possiamo cambiare tutto questo, possiamo cambiare le cose oltre il carattere e
il margine per guardare lo stile che le tue liste stanno assumendo.
Quindi alcune delle cose che possiamo guardare sono il tuo tipo di lista-style-type,
la tua list-style-image.
La posizione dello stile dell'elenco e solo lo stile dell'elenco stesso.
Il tipo di stile elenco dice fondamentalmente come vuoi che indichi le diverse
voci dell'elenco?
Per impostazione predefinita, per gli elenchi ordinati di nuovo, abbiamo uno, due, tre, ma
è possibile dare valori diversi.
Puoi dire che voglio che sia un numero romano inferiore, un numero romano superiore, un
numero alfa inferiore, puoi giocare con questi per ottenere la sensazione che vuoi.
Quindi in questo caso siamo passati da 1 e 2 a A e B.
E se invece avessi fatto alfa inferiore, avremmo avuto una minuscola a e minuscola b.
Quando fai list-style-type per liste non ordinate, tipicamente quello che hai, e
dipende dal tuo browser, è il piccolo cerchio o il piccolo disco.
Possiamo cambiarlo, e
possiamo inserire esattamente quello che vuoi assicurarti che sia.
Un' altra opzione con cui puoi giocare è questa idea di eliminare
completamente quei marcatori predefiniti, e
invece, usare un'immagine personalizzata invece di quel marcatore tradizionale.
E quando lo fai, questo
tipo di riporta a questa idea della posizione in stile lista.
Molte volte sposterai la tua posizione, a
seconda dello stile di elenco che stai usando.
Quaggiù ho un esempio di dove sto dicendo che voglio la mia immagine di stile elenco.
Ho quadrato prima, questo dice, ehi, se non riesci a trovare la foto vai avanti e
usa quadrato, altrimenti voglio che tu usi questa foto proprio qui.
Tutto bene? Quindi andiamo avanti e
guardiamo un altro esempio.
Nel file list.html, quello che ho inserito qui sono due diversi tipi di lista,
una lista non ordinata e una lista ordinata.
E li ho semplicemente compilati con informazioni diverse.
E quando guarderai questo schermo, che rendero' un po' piu' grande per
te qui, se posso.
Si può vedere che gli elenchi non ordinati stanno solo usando i cerchi, e
gli elenchi ordinati stanno usando i numeri predefiniti.
Quindi, giochiamo con questo ora.
Andiamo avanti e mettere in un foglio di stile.
Nel mio foglio di stile, sono andato lì dentro detto, quello che voglio fare con i miei
stili di lista è che voglio passare in alto romano e numerale e anche usare un quadrato invece.
Quindi, questo è quello che sembrava prima, e questo è quello che assomigliamo dopo.
Quindi, potete vedere, c'è qualcosa in più.
E, questo è un modo molto semplice per cambiare la tua pagina
da come le altre persone fanno solitamente la loro pagina.
Un' altra opzione che volevo solo mostrarti,
perché a tutti piace molto questo, è l'idea di usare l'immagine di stile elenco.
Quindi, andro' quaggiu' e decommentero' questo codice.
E se ti ricordi, se stai prestando attenzione a questa idea che quando hai la
precedenza questa nuova regola quaggiù sovrascriverà tutte le regole sopra di essa.
Quindi andiamo avanti e assicuriamoci di aver salvato la mia pagina, e andiamo avanti e ricaricare.
E ora, in questo caso, quello che è successo è che abbiamo rimosso quei normali indicatori
e ho messo dentro il mio piccolo fulmine.
Quindi, fare cose del genere non è difficile, ma
ad essere onesti ci vuole un po 'di tempo, specialmente se stai usando le immagini,
per assicurarti di avere tutto scritto esattamente allo stesso modo. Gli
errori di battitura sono davvero l'assassino.
Non si tratta di essere difficili,
si tratta solo di essere molto attenti quando si fanno queste cose.
Ok, allora andiamo avanti e rivediamo quello di cui abbiamo parlato finora.
E non solo in questa lezione, ma nel corso che abbiamo ottenuto oggi.
E quello che voglio sottolineare è che fino ad ora, abbiamo stilato tag, e
questi tag possono sempre prendere queste coppie di valori di proprietà e
puoi trasformare la tua pagina in qualcosa di veramente fantastico.
Stiamo per entrare in qualcosa di nuovo e un po' diverso.
Parleremo di pseudo-classi, ID e selettori.
E voglio assicurarmi che tu stia a
tuo agio a costruire queste regole diverse da solo prima di progredire.
Ora essere a tuo agio non significa che tu sia perfetto.
Non significa che tu sappia fare tutto.
Ciò che significa è che sei abbastanza fiducioso per uscire e
iniziare a utilizzare alcuni degli strumenti che sono là fuori per migliorare il tuo sito.
Ne sto elencando due proprio qui solo perché sono entrambi molto noti nel
caso del sito Chris Pederick, o personalmente li ho trovati davvero utili.
Un' altra opzione è solo ricordare che si può andare là fuori e
si può fare una ricerca web per gli strumenti di sviluppo.
Non sei il primo, e non sarai l'ultima persona a incontrare
problemi quando stai disegnando la tua pagina.
La mia speranza generale sarebbe che tu andassi davvero ai forum nel corso di
Coursera o in qualsiasi classe in cui ti trovi e chiedessi aiuto ai tuoi compagni.
Perché in realtà, l'unico modo per imparare è
praticare, praticare, incontrare problemi, ottenere aiuto e andare avanti.
Mentre fai sempre più web design, spero che tu stia guadagnando la fiducia
per contribuire a rendere qualcosa di davvero cool di cui sarai orgoglioso.
Quindi resta li' dentro.
Grazie.