Viss, kas jums jāzina par CSS atlasītājiem

Šis raksts izvirza interesantu un svarīgu tēmu, kas pazīstama kā CSS atlasītāji, un pēc tam to papildina ar praktisku demonstrāciju.

Šis raksts izvirza interesantu un svarīgu tēmu, kas pazīstama kā Atlasītāji un seko tam ar praktisku paraugdemonstrējumu. Šajā rakstā tiks apskatīti šādi norādījumi,

Tad ļaujiet mums sākt darbu,



HTML elementu veidošana

Pirms nonākam pie CSS atlasītājiem, sapratīsim, kas ir CSS. Ja HTML jāuzskata par skeletu, tad CSS (Cascading Style Sheets) ir kā muskuļi un āda. Smadzenes ir JavaScript. Tātad tīmekļa lapai CSS stili būtībā ir izkārtojums un dizains. Tieši no attēlu un teksta pozicionēšanas līdz fonta lielumam un fona krāsai CSS kontrolē HTML elementu izskatu pārlūkprogrammā.

Jūs varat labāk izprast CSS, ja labi pārzināt CSS selektorus. Šie atlasītāji ļauj jums atlasīt noteiktus HTML elementus, lai jūs varētu tiem piemērot pareizo stilu.

Paraugs - CSS atlasītāji - EdurekaĻaujiet mums saprast, kā mēs varam atlasīt HTML elementus,

Kā izvēlēties elementus?

Pieņemsim, ka vēlaties, lai noteiktu virsrakstu veidotu atšķirīgi no pārējā tīmekļa lapas satura. Tagad, izmantojot CSS atlasītājus, varat atlasīt HTML elementa mērķauditoriju, lai to veidotu atšķirīgi. CSS atlasītāji palīdz noteikt elementus, uz kuriem attiecas noteikts CSS noteikumu kopums. Ir dažādi CSS selektoru veidi, kas ļauj precīzi izvēlēties stila elementus. Jūs varētu piešķirt visai tīmekļa lapai vispārīgu stilu un pēc tam strādāt, lai veidotu citus lapas elementus.

Atlasītāji ir daļa no CSS kārtulas, un šie atlasītāji nāk tieši pirms CSS bloku deklarēšanas. Lai labāk izprastu, varat atsaukties uz zemāk redzamo attēlu.

Pāreja ar rakstu CSS Atlasītāji

atrast masīva java lielāko elementu

CSS atlasītāji

Šis atlasītājs ļauj izvēlēties HTML elementu pēc tā nosaukuma.

Apsveriet zemāk redzamo kodu:

p {text-align: centra krāsa: fuksīna}

Šis stils tiks piemērots katrai rindkopai.

1. punkts

2. punkts

Šis kods sniegs jums šādu izvadi:

Šis stils tiks piemērots katrai rindkopai

1. punkts

2. punkts

Iepriekš minētajā kodā HTML elementi ir izlīdzināti centrā un to krāsa ir “purpursarkana”.

Pāreja ar rakstu CSS Atlasītāji

CSS ID atlasītājs

Atlasot HTML elementa atribūtu id, varat atlasīt konkrēto elementu. Tā kā id ir unikāls lapai, varat atlasīt pareizo elementu, izmantojot atribūtu id.

HTML elementu varat atlasīt, izmantojot “#”, kam seko šī elementa ID. Piemēram, “#firstname” atlasa elementu, kura ID ir “firstname”.

Apsveriet šādu kodu:

# para1 {text-align: centra krāsa: oranža}

Sveika pasaule

Šis punkts neietekmēs.

Iepriekš minētā koda izeja ir:

Sveika pasaule

Šis punkts neietekmēs.

Kā redzat iepriekš minētajā izvadā, iekļaujot id = ”para1”, mēs varējām mainīt šī elementa krāsu uz oranžu. Cits elements, kam tā nav, paliek neskarts.

Pāreja ar rakstu CSS Atlasītāji

CSS klases atlasītājs

Izmantojot klases atlasītāju, varat atlasīt HTML elementus, kuriem ir noteikts klases atribūts. Atlasītāju var definēt, izmantojot punktu (pilnas apstāšanās simbolu), kam seko klases nosaukums. Piemēram, .intro atlasa elementus, kur klase ir “intro”. Viena lieta, kas jāpatur prātā, ir tas, ka jūs nekad nevarat sākt klases nosaukumu ar numuru.

Apsveriet šādu kodu:

.center {text-align: centra krāsa: rozā}

Šī virsraksts ir rozā krāsā un izlīdzināts centrā.

Šis punkts ir rozā krāsā un izlīdzināts centrā.

Iepriekš minētā koda izeja ir:

Šī virsraksts ir rozā krāsā un izlīdzināts centrā.

Šis punkts ir rozā krāsā un izlīdzināts centrā.

Konkrētam elementam varat izmantot CSS klases atlasītājus. Ja vēlaties veidot tikai vienu konkrētu elementu, varat izmantot elementa nosaukumu kopā ar klases atlasītāju.

Piemēram, apsveriet šādu kodu:

p.center {text-align: centra krāsa: rozā}

Šī virsraksts netiek ietekmēts

Šis punkts ir rozā krāsā un izlīdzināts centrā.

Iepriekš minētā koda izeja ir:

Šī virsraksts netiek ietekmēts

Šis punkts ir rozā krāsā un izlīdzināts centrā.

Kā redzat izvadē, stilu neietekmē virsrakstu h2. Tā kā mēs esam norādījuši “p.center”, stils ietekmē tikai rindkopu.

Turpinot šo CSS atlasītāju rakstu,

CSS universālais atlasītājs

Šāda veida atlasītāju var uzskatīt par aizstājējzīmi, kas atlasa visus lapas elementus. Tas atlasa visus lapas elementus, un to norāda “*”.

Piemēram, apsveriet šādu kodu:

* {krāsa: tumši zaļš fonta izmērs: 30 pikseļi}

Šis ir tests (mazāks fonts)

Šī ir rindkopa.

Iepriekš minētā koda izeja ir:

Sveika pasaule

Šis ir tests (mazāks fonts)

Šī ir rindkopa.

system.exit (1) java

Kā redzat izvadē, visiem elementiem, kas definēti, izmantojot grupas atlasītāju, ir vienāda stila definīcija - tie ir izlīdzināti centrā un fontu krāsa ir ciāna.

Tas mūs noved pie šī raksta beigām.

Pārbaudiet mūsu kas nāk ar instruktoru vadītu tiešraides apmācību un reālās dzīves projektu pieredzi. Šīs apmācības ļauj jums prasmīgi strādāt ar aizmugurējām un priekšējām tīmekļa tehnoloģijām. Tas ietver apmācību par Web izstrādi, jQuery, Angular, NodeJS, ExpressJS un MongoDB.

Vai mums ir jautājums? Lūdzu, pieminējiet to raksta komentāru sadaļā, un mēs ar jums sazināsimies.