de Kevin Kononenko

Selectoare CSS explicate prin cumparaturi de masini

Selectoare CSS explicate prin cumpărături de mașini

Dacă ați văzut vreodată un dealer auto, atunci puteți înțelege selectoarele CSS.

Când pășiți pe lotul unei reprezentanțe auto, sunteți instantaneu înconjurați de diferite mașini, culori și ani.

Și, desigur, există acel agent de vânzări agresiv. Dar să le lăsăm deoparte această simulare.

Mașinile – și caracteristicile mașinilor – pot fi clasificate folosind același sistem ca și selectoarele CSS. Deci, dacă puteți înțelege diferitele moduri de a segmenta mașinile într-un lot de reprezentanți, el comercializează, atunci puteți înțelege selectoarele CSS.

Selectoare CSS explicate prin cumparaturi de masini

Să începem prin a imagina o reprezentanță auto, folosind HTML:

Acum vom acoperi patru moduri diferite de a vă stiliza elementele HTML:

  1. După tipul de element, adică
  2. După clasă, adică „albastru”
  3. După id, adică „123xyz”
  4. Prin relația cu alte elemente

După tipul de element

În HTML-ul nostru de mai sus, fiecare

este într-adevăr o mașină de un fel. Ar putea fi un sedan, un camion sau un decapotabil. Dar acestea sunt doar variante ale mașinilor.

Dacă am vrea să adăugăm stil la fiecare mașină, ar trebui să ne gândim la lucrurile pe care fiecare mașină din acest lot le are în comun.

Iată câteva exemple de CSS:

Bine, fac acest lucru de bază pentru a începe, OK? Și da, am alcătuit câteva proprietăți CSS pentru a face acest lucru să funcționeze.

Oricum, ar fi corect să spunem că fiecare mașină din acest lot este fabricată din oțel, are 4 roți și are o înălțime maximă de 9 picioare. Deci, de fiecare dată când adăugăm un

la HTML-ul nostru, acesta va avea aceste proprietăți în mod implicit.

De fapt, putem duce acest concept de mașină și mai departe. Putem diviza interiorul mașinii și în HTML:

Care sunt unele proprietăți pe care scaunele și geamurile le-ar putea avea? Acestea trebuie împărțite de toate ferestrele și scaunele! Vom face o scufundare profundă în acest sens mai târziu în acest articol.

Utilizarea clasei

Consultați primul nostru fragment HTML, care acoperă toate mașinile de pe lot. Puteți vedea că fiecare mașină

are o serie de clase. Aceste clase sunt utilizate pentru a atribui proprietăți comune tuturor membrilor clasei.

Să presupunem că alocăm clasa „2005” diferitelor berline, camioane și decapotabile. Ei bine, care este o trăsătură pe care multe mașini o aveau în comun în 2005? CD playere! Deci, să facem asta în pseudo-CSS.

Ce se întâmplă dacă avem clasa „crewCab”? Camioanele cu cabine de echipaj au 2 rânduri de scaune, cu 5 locuri în total. Deci, s-ar putea să dorim să atribuim această clasă în mod special camioanelor. Putem combina clasele înșirându-le.

Cursurile sunt un mod mai specific de referință a elementelor HTML. Deci, să spunem că toate vehiculele sunt fabricate din oțel, în mod implicit. Dar vrei ca unele vehicule să fie din aluminiu. Puteți crea o clasă „aluminiu” care va suprascrie proprietatea materială a tuturor membrilor clasei.

Folosind ID

Elementele HTML pot avea un ID. Acesta este cel mai specific mod de a face referire la un singur element și acesta suprascrie toate celelalte stiluri. Acest identificator unic este cam ca placa de înmatriculare a elementului.

1611475026 760 Selectoare CSS explicate prin cumparaturi de masini

Deci, să presupunem că aveți o singură mașină și are plăcuța de înmatriculare „123 XYZ”. Această mașină are o culoare purpurie unică, deoarece din anumite motive proprietarul a cerut-o. Iată acel element din CSS.

Elementele au o relație 1 la 1 cu ID-uri. La fel ca în cazul mașinilor și al plăcuțelor de înmatriculare, nici două mașini nu pot avea aceeași plăcuță de înmatriculare. Acesta este, de asemenea, cel mai puternic mod de a identifica un element, astfel încât să puteți crea excepții unice la toate celelalte reguli pe care un element ar trebui să le respecte.

Relațiile dintre elemente

Să presupunem că doriți să vă asigurați că mașinile cu clasa „leatherSeats” au scaune din piele. Consultați al doilea fragment HTML din secțiunea „Tipul elementului”.

1611475026 340 Selectoare CSS explicate prin cumparaturi de masini

De asemenea, ați fi putut da fiecărui

cu clasa „scaun” și clasa „piele”. Dar iată: asta nu vă va permite să selectați doar mașinile cu scaune din piele în ansamblu. Ați putea selecta singuri locurile.

Așadar, dorim să oferim întregii mașini o clasă „piele” pentru a ne asigura că putem selecta întregul

și copiii acestuia.

CSS de mai sus va selecta toate elementele cu clasa „seat” într-un container „leatherSeats”.

Acum, să presupunem că doriți să vă asigurați că scaunul pasagerului din față are încălzitoare de scaune. Puteți utiliza selectorul „~”, cunoscut sub numele de selector pentru frați. Vă permite să atribuiți stiluri elementelor în raport cu vecinii lor.

Deci, puteți spune:

Iată un ultim exemplu. Să presupunem că o anumită marcă și model avea o caracteristică bizară, aleatorie. De exemplu, un camion Chevy din 2008 ar fi putut avea DVD playere pe banchetele din spate.

Iată cum ați transforma acest lucru în CSS:

  1. Trebuie să începeți cu mai multe clase, deoarece acesta este un tip de mașină foarte specific. Acesta ar putea fi „div.truck.chevy.year2008”.
  2. Apoi, gândiți-vă cum veți putea selecta locurile din spate, mai exact. Ați putea da rândului o clasă suplimentară, cum ar fi „.RowRow”. Sau, ai putea folosi : selector ultimul copil.
  3. În cele din urmă, trebuie să selectați singuri locurile.

Răspuns:

Dacă ți-a plăcut această postare, s-ar putea să te bucuri și de mine alte explicații de subiecte provocatoare CSS și JavaScript, cum ar fi poziționarea, Model-View-Controller și apeluri de apel.

Și dacă credeți că acest lucru ar putea ajuta alte persoane în aceeași poziție ca dvs., acordați-i o „inimă”!

#Selectoare #CSS #explicate #prin #cumpărături #mașini

Selectoare CSS explicate prin cumpărături de mașini

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.