Ciao, oggi parleremo di selettori avanzati.
Fino a questo momento, quando abbiamo scritto le nostre regole,
abbiamo scritto le nostre regole per un tipo specifico di tag.
Abbiamo detto h1 o p o h2.
Quindi ci siamo concentrati su una cosa che copre tutti i diversi elementi di
quel tipo.
Ma cosa succede se non vuoi dare stile a tutti i link, solo alcuni di loro?
O non vuoi dare stile a tutte le tue liste,
vuoi solo modellarne alcuni?
Bene, ora parleremo di questo tipo di selettori avanzati
che ci permetteranno di fare proprio questo.
CSS ti darà così tante opzioni che in questa lezione cercherò di
coprirne il maggior numero possibile, ma sta ancora a te andare fuori e
cercare un po 'di più da solo come ne hai bisogno.
Quindi iniziamo con i selettori CSS che seguono il DOM.
Se si ricorda il modello di oggetti documento
è come il browser suddivide la pagina in una struttura ad albero.
Quindi, in questo modo, il browser sa effettivamente se un paragrafo arriva direttamente dopo un
tag h1 o se due paragrafi sono fratelli nella stessa sezione.
Stiamo andando a utilizzare che per lo stile solo alcune parti della tua pagina.
Quindi i selettori discendenti sono un modo per dire, hey, se sei all'interno di un tag di navigazione,
voglio che tu dia stile a tutti i collegamenti che si trovano all'interno del tag di navigazione.
Invece di farli tutti, solo quelli.
Se vuoi essere ancora più specifico, puoi usare i selettori figlio.
Questa regola è molto simile, tranne che dice,
tutti i collegamenti a devono essere ciò che chiamiamo discendenti diretti del link nav.
Se hai un paragrafo lì dentro e hai alcuni link lì dentro, ignoralo.
Devono essere direttamente sotto l'altro.
L' ultimo è fratello adiacente.
Non è uno che in realtà uso molto nella mia codifica, ma
volevo farti sapere di cosa si tratta perché c'è una buona probabilità
che lo vedrai se stai guardando il codice di altre persone.
Come funziona il fratello adiacente è che gli elementi devono essere
quello che chiamiamo lo stesso livello e seguirci a vicenda.
Quindi se hai una sezione che ha un h1 e
poi una lista ordinata, sarebbero fratelli.
Se avessi un h1 e poi alcune altre cose e
quella lista ordinata fosse all'interno di un paragrafo, non funzionerebbe in questo modo.
Successivamente, parleremo di ciò che chiamiamo selettori di id.
vengono utilizzati per identificare un singolo elemento nel DOM.
Il modo in cui funzionano gli id è che dovresti entrare, e
tu, nel tuo HTML, dire qualcosa sulla falsariga di id uguale all'intestazione, o
id uguale a piè di pagina è uno che usavano molto.
Quindi nel foglio di stile, utilizzando il simbolo cancelletto,
è possibile identificare quali stili si desidera.
Quindi in questo momento, c'è un piccolo movimento,
ma sta crescendo un po ', per uscire dall'uso di id dai CSS.
Stanno dicendo che non ha senso usarlo perché molte
persone usano davvero questo id per JavaScript e cose del genere.
Ma ancora una volta, questo è qualcosa che vedrai molto, quindi
voglio presentartelo.
Quindi vediamo un esempio molto rapidamente qui solo sullo schermo di come funziona.
Nel mio HTML, vorrei andare avanti e inserire la mia fonte, il mio tag alt,
ma anche ID = MainLogo».
Quindi, nel mio foglio di stile, usando il simbolo # insieme al nome id,
il browser saprà, oh, ogni volta che vedo una di quelle immagini,
voglio assicurarmi di aggiungere questo bordo e questo margine. I
selettori di classe sono simili agli id, ma la differenza è che le classi possono
applicarsi a un intervallo di elementi, non solo a un particolare elemento nel DOM.
Quindi, pensa alle immagini in miniatura o ai media dell'icona sociale.
E' questa idea che, sai cosa,
voglio essere in grado di modellare un grande gruppo di cose tutte allo stesso modo,
ma non voglio necessariamente modellarle tutte in quel modo.
Non vuoi che tutte le tue immagini siano miniature,
ma vuoi che siano molte.
Scriveresti questo codice in un modo molto simile.
Qui nel mio HTML, ho class = «thumb», class = pollice», class = pollice»,
class = pollice».
E nel mio CSS, invece di usare #, devi assicurarti di usare il punto o il
punto, insieme al nome della classe, e quindi puoi dargli qualsiasi regola.
E in questo modo, la pagina passerà attraverso e saprà che oltre a
qualsiasi stile che hai appena messo sulle immagini, vuoi anche questo stile per le miniature.
Quindi, solo per cercare di aiutarti a renderlo un po 'più chiaro,
qual è la differenza tra l'uso di classi e ID?
Beh, prima, vuoi assicurarti di conoscere la sintassi.
Il periodo è per le classi e la sterlina è per gli id.
Non puoi rovinare questo, perché il browser non lo risolverà
se metti la cosa sbagliata davanti alla tua classe o al tuo nome ID.
Vuoi ricordare che le classi possono essere utilizzate più volte.
Ha senso nel tuo codice HTML vedere class = «thumb», class = «thumb»,
class = «thumb» perché non dovrebbe essere una parte specifica della pagina.
Con gli id, dovrebbe essere univoco, dovresti vedere solo id uguali,
ad esempio, intestazione, che non stiamo nemmeno usando una volta.
Dovresti vedere id = «sezione principale» una sola volta.
Quindi di nuovo, pensiamo alle immagini e alle barre di navigazione.
È molto comune che tu voglia formattare numerose, ma
non tutte le immagini allo stesso modo.
E useresti le classi per questo.
Dove potresti usare un id, sono sicuro che sei stato in alcuni punti in cui sulla
pagina web, vedi la barra di navigazione e
la pagina che ti trovi attualmente è in stile leggermente diverso.
E questo ha senso perché puoi essere solo in una pagina alla volta, ed
è per questo che potresti scegliere di usare l'id.
Quindi andiamo avanti e passiamo attraverso un rapido esempio usando quella barra di navigazione.
Quindi ecco un file HTML di esempio,
in cui tutto ciò che ho fatto è mettere in quattro link che non vanno nemmeno da nessuna parte.
Ho commentato il foglio di stile solo in modo da
poter vedere come sarebbe senza alcun stile.
Vedete, ho la mia casa, interessi, curriculum, hobby, e
ho un altro link qui che ho chiamato molto male qui.
Quindi andiamo avanti e
proviamo ad aggiungere un po 'di stile usando questi selettori avanzati.
Vai qui.
Puoi vedere che ho usato l'elemento figlio di, in realtà,
solo una specie di discendente di, hey, tutti i collegamenti che sono nella barra di navigazione,
voglio stile in modo diverso, voglio dare loro un colore di sfondo diverso,
una larghezza diversa, cose del genere.
Inoltre, tutto ciò che è attuale di classe, voglio rendere anche
diverso da qualsiasi altro link o qualsiasi altra cosa che abbiamo visto in quel modo.
Quindi andiamo avanti e decommentare il foglio di stile.
Risparmiatelo.
Vai da questo a questo.
Puoi vedere che solo i collegamenti che si trovano all'interno della mia barra di navigazione sono in stile.
Questo è stato lasciato lo stesso.
E quello in cui ho classe = «current» sembra diverso dagli altri.
Quindi è davvero semplice usare queste cose, devi solo sapere su di loro.
Man mano che le pagine diventano più avanzate,
si sta andando a voler restringere l'ambito di alcune regole.
Vogliamo applicarli solo a certe cose.
E una delle notazioni che puoi usare per questo è il punto.
Quindi nel tuo foglio di stile, avresti effettivamente p.main.
Ciò significa andare e trovare tutti i paragrafi che stanno usando la classe main.
Oppure potresti avere l'intestazione img.special.
Ciò significherebbe trovare tutte le immagini che hanno immagine classica speciale
che appartengono nell'intestazione.
È solo un modo per ridurre davvero ciò che viene stilato.
Allo stesso tempo, puoi anche, quello che chiamiamo, espandere l'ambito.
Quindi, diciamo che c'è una sorta di stile che si desidera applicare sia all'
intestazione che al piè di pagina, o alle sezioni e agli articoli.
Non e' un problema.
Quello che fai è semplicemente scrivere l'elemento,
e includi una virgola proprio lì per farlo sapere.
Quindi, solo come una rapida recensione.
E questo è qualcosa di molto prima.
Devi pensare a cosa succede quando ci sono più regole per
lo stesso selettore.
Quindi potresti avere questo qui con il paragrafo in cui ha determinate
qualità che vuole condividere tra i paragrafi h1, l'id main e
la classe speciale.
Ma più tardi, se vuoi avere uno stile aggiuntivo per
un paragrafo, finché
lo metti da qualche parte sotto, sovrascriverà e si combinerà con tutto ciò che è più in alto.
Quindi, a meno che una regola non abbia il punto esclamativo importante dopo di essa,
usa sempre solo l'ultimo che ha visto, insieme a quelli precedenti che non sono in conflitto.
Oltre ai selettori di elementi e ai diversi selettori di relazione DOM, ne
abbiamo anche alcuni in più di cui voglio parlare brevemente.
Il primo è il selettore universale, che è la stella o
lo Shift otto sulla tastiera.
Quello che fa questo
è, applicherà il tuo stile a ogni singolo elemento della pagina.
E' assolutamente folle.
Non lo faro'.
Te lo lascio fare, ma vai avanti e metti una stella, e poi lo stile,
forse il confine, intorno a ogni elemento.
Colpisce tutto sulla tua pagina.
A volte, è bello per il debug.
Il prossimo che potresti voler usare sono quelli che chiamiamo
selettori di attributi.
Invece di andare sui tag, vai sugli attributi che vanno all'interno dei tag.
Quindi in questo caso, andrebbe avanti e vorrebbe stile ogni link in cui
hai href="info.html», e farò un rapido esempio di ciò in solo un secondo.
Ma prima di farlo, volevo menzionare altri due che vedremo più tardi,
che sono pseudo-classi e pseudo-elementi.
Solo un altro livello di distinguere solo alcune cose che vuoi stile
sulla tua pagina.
Ma prima, andiamo avanti e diamo un'occhiata all'uso di questi selettori di attributi.
Quindi il modo in cui funzionano i selettori di attributi è che cercano nel DOM
elementi che hanno l'attributo che stai cercando.
Quindi, per esempio, si potrebbe desiderare di guardare tutte le immagini che utilizzano file gif o
tutte le immagini che hanno testo alt vuoto o forse
tutti i link che vanno a siti governativi o siti non-profit o siti educativi.
È davvero facile per noi trovarli e andare avanti e
modellarli in modo un po 'diverso. Il
modo in cui lo facciamo è che usiamo gli operatori per
abbinare le diverse parti del testo alt che stai cercando.
Quindi quassù, in quello che chiamiamo il cursore, corrisponderà all'inizio.
Quindi in questo caso, corrisponderebbe a tutti quei link che iniziano con http://umich, e
non importa come finisce.
Il prossimo con il simbolo del dollaro corrisponderà esattamente alla fine.
Trovera' ogni file che finisce in .png.
Abbiamo anche il carattere jolly, dove stai andando e
dicendo che se vedi umich in qualsiasi parte di qualsiasi riferimento iper, applica questa regola.
Quindi quello che stiamo andando a guardare è che stiamo andando a guardare un file che ha
collegamenti diversi e ognuno ha un diverso tipo di estensione che vogliamo stile diverso.
Va bene.
Quindi quello che ho qui è solo un elenco di link.
Non ci sono lezioni.
Niente di speciale in questi, che va a diversi siti universitari, organizzazioni
, siti governativi, e se dai un'occhiata, per impostazione predefinita, apparirà come
i tuoi tradizionali collegamenti blu con sottolineato, il testo proprio lì.
Ma quello che voglio fare è che voglio entrare e dire,
sai una cosa, tutti quelli che finiscono in .org?
Fateli un colore unico.
Tutti quelli che sono .edu, un altro colore e
tutti quelli che terminano in .gov, un terzo colore.
Vediamo che aspetto ha.
Qui, puoi vedere che senza che io debba inserire alcuna informazione all'interno dei tag
stessi, il browser li ha colorati il colore corretto.
Ok, ho appena coperto un sacco di cose in un video molto breve.
Devi renderti conto che queste idee si fonderanno insieme.
Userai le classi,
userai gli ID, userai gli attributi.
E la cosa importante che voglio che tu sappia è che quando
aggiungi tutte queste cose insieme, l'ordine in cui scrivi classi e
ID diversi nel tuo testo non ha importanza.
Non importa se hai speciale precoce buio o buio precoce speciale.
Ciò che conta davvero è l'ordine in cui scrivi le tue regole nel tuo foglio di stile.
I browser inizieranno sempre verso l'alto e applicheranno ogni regola.
Ora la buona notizia da questa lezione è che voglio che tu capisca
che con il potere delle classi e degli ID e questo foglio di stile CSS è
che questo significa che puoi usare fogli di stile di altre persone per modellare il tuo codice.
E puoi semplicemente aggiungere una classe che cambia l'unico piccolo attributo
che forse non ti è piaciuto.
È possibile sovrascrivere questi fogli di stile e renderli propri.
Assicurati di collegare il foglio di stile per ultimo.
Ok, abbiamo coperto un sacco di cose e
spero di non averti sopraffatto con il video.
Voglio solo che tu ricordi che quando facciamo selettori di tipo e
il tipo di cose che ti farò fare in questa classe è che di solito
li aggiungiamo per restringere l'ambito di dove vengono applicate le regole.
Quindi non vogliamo dare stile a tutto.
Vogliamo solo modellare certe cose.
Un id viene utilizzato per specificare un elemento specifico in una pagina, e
le classi vengono utilizzate per associare elementi che in realtà tendono ad avere l'aspetto simile.
Così come andiamo avanti, so che avrò alcuni esempi di codice con-me.
Spero che ti fermerai, tirerai fuori il tuo portatile e
deciderai con me per avere un'idea di quanto possano essere potenti queste diverse cose.
Grazie.