Viskas, ką reikia žinoti apie CSS parinkiklius

Šis straipsnis iškelia įdomią ir svarbią temą, vadinamą CSS selektoriais, ir ją papildo praktine demonstracija.

Šiame straipsnyje pateikiama įdomi ir svarbi tema, žinoma Atrinkėjai ir po to surengs praktinę demonstraciją. Tolimesni patarimai bus aptarti šiame straipsnyje,

Taigi pradėkime tada,





HTML elementų stilius

Supraskime, kas yra CSS, prieš patekdami pas CSS pasirinkėjus. Jei HTML turi būti laikomas griaučiu, tai CSS (kaskadinio stiliaus lentelės) yra kaip raumenys ir oda. Smegenys yra „JavaScript“. Taigi, tinklalapio CSS stiliai iš esmės yra išdėstymas ir dizainas. Nuo pat vaizdų ir teksto padėties iki šrifto dydžio ir fono spalvos CSS kontroliuoja, kaip HTML elementai atrodo naršyklėje.

Galite geriau suprasti CSS, jei gerai suprantate, kokie yra CSS selektoriai. Šie parinkikliai leidžia taikyti pagal konkrečius HTML elementus, kad galėtumėte jiems pritaikyti tinkamą stilių.



Pavyzdys - CSS selektoriai - „Edureka“Supraskime, kaip galime pasirinkti HTML elementus,

Kaip pasirinkti elementus?

Tarkime, norite, kad tam tikros antraštės stilius skirtųsi nuo likusio tinklalapio turinio. Dabar, naudodamiesi CSS parinkikliais, galite taikyti HTML elementą, kad jis būtų kitaip stiliaus. CSS selektoriai padeda apibrėžti elementus, kuriems taikomas tam tikras CSS taisyklių rinkinys. Yra įvairių tipų CSS selektorių, kurie leidžia tiksliai pasirinkti elementus, kuriuos norite stilizuoti. Galite suteikti visam tinklalapiui bendrą stilių ir tada stenkitės stilizuoti kitus puslapio elementus.

Selektoriai yra CSS taisyklės dalis, ir šie selektoriai pateikiami prieš pat CSS blokų deklaravimą. Norėdami geriau suprasti, galite kreiptis į paveikslėlį žemiau.



Toliau su straipsniu „CSS selektoriai“

CSS selektoriai

Šis parinkiklis leidžia pasirinkti HTML elementą pagal jo pavadinimą.

Apsvarstykite toliau pateiktą kodą:

p {text-align: centro spalva: purpurinė}

Šis stilius bus taikomas kiekvienoje pastraipoje.

1 dalis

2 dalis

Šis kodas suteiks jums tokią išvestį:

Šis stilius bus taikomas kiekvienoje pastraipoje

1 dalis

2 dalis

Pirmiau pateiktame kode HTML elementai buvo sulygiuoti centre ir jų spalva yra „purpurinė“.

rasti masyvo javascript ilgį

Toliau su straipsniu „CSS selektoriai“

CSS ID parinkiklis

Pasirinkę HTML elemento atributą, galite pasirinkti tą konkretų elementą. Kadangi ID yra unikalus puslapyje, galite pasirinkti tinkamą elementą naudodami atributą id.

HTML elementą galite pasirinkti naudodami „#“, po kurio nurodomas to elemento ID. Pavyzdžiui, „#firstname“ parenka elementą, kurio ID yra „firstname“.

Apsvarstykite šį kodą:

# para1 {text-align: centro spalva: oranžinė}

Labas pasauli

Ši pastraipa neturės įtakos.

Minėto kodo išvestis yra:

Labas pasauli

Ši pastraipa neturės įtakos.

Kaip matote aukščiau pateiktame išvestyje, įtraukdami id = ”para1 ″, mes sugebėjome pakeisti to elemento spalvą į oranžinę. Kitas elementas, kuris to neturi, lieka nepaveiktas.

Toliau su straipsniu „CSS selektoriai“

CSS klasės pasirinkimas

Naudodami klasės parinkiklį galite pasirinkti HTML elementus, turinčius konkretų klasės atributą. Pasirinkiklį galite apibrėžti naudodami tašką (taško simbolis), po kurio nurodomas klasės pavadinimas. Pavyzdžiui, .intro parenka elementus, kurių klasė yra „intro“. Reikia nepamiršti, kad niekada negalite pradėti klasės pavadinimo skaičiumi.

Apsvarstykite šį kodą:

.center {text-align: centro spalva: rožinė}

Ši antraštė yra rausva ir lygi centrui.

Ši dalis yra rausva ir lygi centrui.

kaip naudoti apdailos metodą java

Minėto kodo išvestis yra:

Ši antraštė yra rausva ir lygi centrui.



Ši dalis yra rausva ir lygi centrui.

Konkrečiam elementui galite naudoti CSS klasės parinkiklius. Jei norite, kad būtų sukurtas tik vienas konkretus elementas, galite naudoti elemento pavadinimą kartu su klasės parinkikliu.



Pavyzdžiui, apsvarstykite šį kodą:

p.center {text-align: centro spalva: rožinė}

Ši antraštė neturi įtakos

Ši dalis yra rausva ir lygi centrui.

Minėto kodo išvestis yra:



Ši antraštė neturi įtakos



pitonas konvertuoti dešimtainį skaičių į dvejetainį

Ši dalis yra rausva ir lygi centrui.

Kaip matote išvestyje, antraštės h2 stilius neturi įtakos. Kadangi mes nurodėme „p.center“, stilius veikia tik pastraipą.



Toliau su šiuo CSS selektorių straipsniu,

CSS universalusis selektorius

Šis tipo parinkiklis gali būti laikomas pakaitos simboliu, kuris parenka visus puslapio elementus. Jis parenka visus puslapio elementus ir jį nurodo „*“.

Pavyzdžiui, apsvarstykite žemiau pateiktą kodą:

* {spalva: tamsiai žalias šrifto dydis: 30 taškų}

Tai yra testas (mažesnis šriftas)

Tai yra pastraipa.

Minėto kodo išvestis yra:

Labas pasauli

Tai yra testas (mažesnis šriftas)

Tai yra pastraipa.

Kaip matote išvestyje, visi elementai, kurie apibrėžti naudojant grupės parinkiklį, turi tą patį stiliaus apibrėžimą - jie yra sulygiuoti centre ir šrifto spalva yra žydra.

Tai priveda prie šio straipsnio pabaigos.

Patikrinkite mūsų kuris ateina su instruktorių vedamomis tiesioginėmis treniruotėmis ir realių projektų patirtimi. Šie mokymai leidžia išmokti dirbti su „back-end“ ir „front-end“ interneto technologijomis. Tai apima mokymus apie žiniatinklio plėtrą, „jQuery“, „Angular“, „NodeJS“, „ExpressJS“ ir „MongoDB“.

Turite mums klausimą? Prašau tai paminėti straipsnio komentarų skyriuje ir mes su jumis susisieksime.