Quindi in questo video ci concentreremo su tre selettori CSSA.
Quelli sono l'ID dell'elemento in classe.
Quindi ci sono molte più opzioni per selezionare gli elementi.
Ne parleremo più tardi, ci concentreremo solo su questi tre per iniziare.
E quando dico che il selezionatore ripensa a questa regola generale di cui abbiamo parlato all'inizio, quando
ha avviato CSSA alcuni video fa, dove abbiamo un selettore e quindi parentesi graffe e poi alcune proprietà.
Quindi vedremo alcuni selettori diversi che possiamo mettere qui.
E il modo in cui lo faremo in realtà creeremo insieme una lista di cose davvero semplice da fare.
Quindi ho intenzione di creare un nuovo file.
Lo salverò e lo chiamerò per fare una lista di HMO una
volta che avremo che poi andremo avanti e aggiungeremo l'HMO.
E il modo in cui funzionerà sarà
un H1 e poi avremo un pozzo con gli alleati.
Ma in ogni alleato avremo un po 'di testo e avremo una piccola casella di controllo, quindi vedi se riesci
a ricordare come fare la casella di controllo è il tipo di input equivale alla casella di controllo e poi al di sotto di quella o dopo avremo il
nostro testo .
Quindi avremo una camminata arrugginita, quindi ho intenzione di duplicarlo.
Quindi avremo tre di loro qui a spasso Rusty solo per comprare generi alimentari.
E poi
finire la registrazione, vedi valutare Phidias.
Quindi se lo apriamo in un browser vedremo una versione blanda e in stile del nostro prodotto finale,
ma lo scheletro è lì.
Abbiamo i nostri due do e ognuno dei quali è una piccola casella di controllo accanto.
OK.
Quindi la prossima cosa che vogliamo fare è connettere un foglio di stile.
Quindi, per fare questo, iniziamo collegando un foglio di stile non esistente e poi andremo avanti e creeremo un
foglio di stile.
Quindi alcune persone chiamerebbero questo sviluppo guidato da errori dove scriviamo qualcosa che sappiamo che non
funzionerà e poi lo faremo funzionare in seguito.
Quindi chiamerò questo per fare la valutazione introdurre C vedere valutare che non esiste.
La prossima cosa che faremo è andare avanti e rendere quel file a Dewes che C valuta.
E questo deve essere nello stesso posto in cui fare uno studio.
Tim lo salverò e solo per assicurarmi che sia connesso.
Facciamo qualcosa come lo sfondo del corpo arancione e sai che questo è in realtà ciò di cui stavo
parlando nel video a colori.
Questa è una delle uniche volte in cui vorrei usare un colore come l'arancione.
A prescindere dall'insegnamento, lo userei solo per assicurarmi che qualcosa sia collegato. Voglio solo un colore brillante.
Voglio vedere se questo per usare che C Ss viene referenziato correttamente qui.
Quindi se siamo freschi.
Ok, grandi cose sono collegate.
Quindi, quello che faremo è tornare alle diapositive qui e parlare del selettore degli elementi che è
quello che abbiamo dedicato molto tempo alla preparazione.
È fondamentalmente il tipo di attacco quando si specifica div o paragraph o body e quindi selezionerà tutti
gli elementi corrispondenti tutte le istanze corrispondenti.
Quindi in questo caso abbiamo due div e ogni div ha due paragrafi e quindi impostiamo tutti i div che in
viola per lo sfondo otteniamo due dispositivi viola, impostiamo tutti i paragrafi in COLORE GIALLO otteniamo quattro paragrafi gialli.
Quindi questo è quello che stiamo facendo qui quando selezioniamo il corpo.
Potremmo anche farlo per tutti gli ALWIS e dare loro un ordine o cinguettiamo il bordo di due pixel rosso fisso.
Ora, naturalmente, funziona su tutti gli alleati.
OK.
Quindi la prossima cosa che potremmo voler fare è individuare un alleato o una H-1 o un'istanza di qualcosa.
Quindi in questo esempio selezioniamo la terza bugia e la facciamo diventare gialla.
E il modo in cui lo facciamo è in realtà alterando leggermente la squadra e poi usando un amo che aggiungiamo
alle H T M L e R C Ss facciamo riferimento ad esso e lo ingialliscono.
Quindi il primo passo è aggiungere quel gancio che è chiamato ID.
E quindi il modo in cui funziona un'idea ti aggiunge come attributo a qualsiasi ID di elemento uguale.
E poi tra virgolette qualsiasi nome che vuoi possa essere qualsiasi cosa.
E poi quello che facciamo è riferirsi a quello più tardi scrivendo Octa Thorpe o il segno di hash e
poi il nome dell'ID e che selezionerà l'elemento che corrisponde a quel nome ID.
Quindi, ad esempio, diciamo che voglio che questo alleato finale qui abbia un aspetto leggermente diverso.
Quello che potrei fare è andare qui ad Ally e dargli un ID.
E questo può essere un nome qualsiasi.
speciale non è
davvero un gran nome, ma ti mostra che il punto di utilizzo di un ID è quello di individuare qualcosa.
Chiamiamo questo speciale e il motivo per cui sto dicendo che lo sto chiamando
È un modo per indirizzare un singolo elemento e una nota su un ID.
Può apparire solo su una pagina una volta.
Quindi se faccio questo e poi provo a dare l'ID speciale a due elementi che in realtà sono HMO non validi.
Quindi dovrebbe sempre essere lì una volta sulla pagina.
È puramente usato per separare un singolo elemento.
Possiamo tuttavia avere più ID su una pagina purché non compaiano più di una volta.
OK.
Quindi andiamo con questo speciale.
Ora facciamolo diamo un'occhiata qui.
È quest'ultimo qui.
Diamo un colore di sfondo.
Quindi per farlo Id Il nome è speciale.
Andiamo al nostro file CSSA e scriviamo speciali e mettiamo un'ottava davanti e questo
ci dice che stiamo parlando di un ID.
Quindi tutto ciò che facciamo è scrivere o C S S qui, quindi facciamo il colore di sfondo e rendiamolo giallo.
Salva l'aggiornamento del file e puoi vedere solo questo quando è giallo.
Quindi ci sono alcune cose che voglio sottolineare.
Il primo è che questo codice funziona ancora.
Trasforma tutti gli alleati.
Dà loro un bordo rosso incluso quello finale.
E poi aggiungeremo uno sfondo giallo solo all'ultimo basato su questo hook
che abbiamo aggiunto e chiamato in ID.
un elemento, puoi utilizzare un ID solo una volta per pagina, ma possiamo avere quanti ID vogliamo su una pagina.
Quindi, per riassumere un'idea come metodo per individuare
Quindi gli ID sono grandi per individuare singoli elementi, ma spesso vogliamo avere più elementi che
sembrano simili ma non vogliamo tutti gli alleati, per esempio.
Diciamo che volevo dare uno stile alla metà degli alleati e metà di loro un altro modo in cui
potevamo usare una classe per ottenerlo.
Quindi il modo in cui una classe funziona è come un ID, tranne che si chiama classe e possiamo applicarlo
a qualsiasi numero di elementi in una pagina.
e poi ci riferiamo ad essa nel nostro successo con un punto invece di un'ottava Thorpe.
Quindi come puoi vedere qui stiamo applicando una classe chiamata highlight al primo paragrafo e al terzo paragrafo
Quindi, ancora una volta per contrastare che qui per selezionare un ID usiamo il cancelletto o l'ottava Thorpe qui per selezionare
una classe.
Usiamo il punto.
Altrimenti funzionano allo stesso modo.
Quindi facciamo un esempio.
Aggiungerò una lezione e il modo in cui voglio che funzioni, farò finta che questi due
siano spuntati.
Quindi voglio che ci sia una linea attraverso il testo.
Quindi, quando guardiamo i generi alimentari e camminiamo verso il basso, ci dovrebbe essere uno sciopero attraverso
il testo ma non l'ultimo.
Quindi il modo in cui lo facciamo o un modo per farlo è con la classe.
Quindi, al volo, vado avanti e aggiungo una classe e la chiamerò completata e un'altra
classe sarà completata e io lo salverò e se aggiornerò.
Non succede niente perché non ho stili.
sul mio punto C e ho il punto giusto e poi il nome della classe ha completato le parentesi graffe e ora lo stile.
Così ora vado
Quindi presenterò qualcosa di nuovo che si chiama decorazione del testo e la decorazione del testo è un
modo per aggiungere una linea.
Ma ci sono alcune cose che puoi fare.
Puoi aggiungere una sottolineatura e puoi aggiungere una sottolineatura ondulata Apparentemente non sapevo che una
linea attraverso e una linea che è proprio come una sottolineatura, tranne in cima.
Quindi useremo la linea e dovrebbe essere così.
Quindi se mi rinfresco.
Tieni d'occhio questi due top.
Ora passiamo una linea.
Grande.
Una nota veloce mentre sono qui è che se voglio che queste checkbox siano spuntate quando la pagina viene caricata.
Quindi adesso non sono controllati e devo controllarli manualmente, ma se voglio che i primi
due siano controllati posso andare qui e aggiungere un attributo chiamato controllato.
E questo funziona sugli input della casella di controllo.
Così facendo, se fossi fresco Ora, quando la pagina viene caricata, vengono controllati.
Quindi non vediamo davvero la valutazione, ma è importante sapere che puoi farlo.
OK.
Quindi concludiamo molto rapidamente.
Abbiamo il selettore di elementi per selezionare tutto un determinato elemento.
Tutti gli ALWIS divengono tutti i paragrafi.
Abbiamo il selettore ID che selezionerà l'elemento con l'ID corrispondente e abbiamo sempre bisogno di usare
un'ottava per quello.
O un simbolo di hash.
E poi abbiamo il selettore di classe che è molto simile al selettore ID tranne che selezioniamo in base al nome di
una classe e una classe può verificarsi tutte le volte che vogliamo su una determinata pagina a differenza di un ID che è
solo una volta