Š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,
- HTML elementu veidošana
- CSS atlasītāji
- CSS ID atlasītājs
- CSS klases atlasītājs
- CSS universālais atlasītājs
- CSS grupas atlasītāji
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.
Ļ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.