Šiame straipsnyje pateikiama įdomi ir svarbi tema, žinoma Atrinkėjai ir po to surengs praktinę demonstraciją. Tolimesni patarimai bus aptarti šiame straipsnyje,
- HTML elementų stilius
- CSS selektoriai
- CSS ID parinkiklis
- CSS klasės pasirinkimas
- CSS universalusis selektorius
- CSS grupės parinkėjai
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ų.
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.