Kelas lan ID nglebokake CSS Sampeyan
Situs web bangunan ing Web dinten iki mbutuhake pangerten jero CSS (Cascading Style Sheets). Iki minangka pandhuan sing menehi situs web kanggo nemtokake cara bakal nggawe layout ing jendhela browser. Sampeyan nggunakake seri "gaya" menyang dokumen HTML sampeyan bakal nggawe katon lan aran saka kaca web sampeyan.
Ana akeh cara kanggo ngaplikasi gaya kasebut sajrone document, nanging kerep nggunakake gaya mung kanggo sawetara unsur ing sawijining dokumen, nanging ora kabeh conto saka unsur kasebut.
Sampeyan uga pengin nggawe gaya sing bisa digunakake kanggo saperangan unsur ing dokumen, tanpa kudu ngulang aturan gaya kanggo saben instance. Kanggo entuk gaya sing dikarepake, sampeyan bakal nggunakake atribut kelas lan ID HTML. Atribut iki minangka atribut global sing bisa diterapake ing saklawasé saben tag HTML .Sing tegese manawa sampeyan nggayutake bagean, paragraf, pranala, dhaptar utawa potongan HTML liyane ing dokumen sampeyan, sampeyan bisa nguripake atribut kelas lan ID menyang mbantu sampeyan ngrampungake tugas iki!
Pemilih Kelas
Pemilih kelas ngidini sampeyan nyetel gaya akeh menyang unsur utawa tag sing padha ing sawijining dokumen. Contone, sampeyan bisa uga pengin duwe bagean tartamtu ing teks sing diarani nganggo werna sing beda saka sisa teks ing dokumen kasebut. Bagian sing disorot iki bisa dadi "tandha" sing nyetel ing kaca. Sampeyan bisa menehi paragraf kanthi kelas kaya iki:
p {color: # 0000ff; }
p.alert {color: # ff0000; }
Gaya iki bakal nyetel warna kabeh paragraf menyang biru (# 0000ff), nanging paragraf kanthi atribut kelas "tandha" bakal tinulis kanthi werna abang (# ff0000). Iki amarga atribut kelas nduweni kekhususan sing luwih dhuwur tinimbang aturan CSS pisanan, sing mung nggunakake pemilih tag.
Nalika nggarap CSS, aturan sing luwih spesifik bakal ngilangi siji sing luwih spesifik. Dadi ing conto iki, aturan sing luwih umum nyetel warna kabeh paragraf, nanging aturan liyane sing luwih spesifik tinimbang ngganggu setelan kasebut mung ing sawetara paragraf.
Punika babagan iki bisa digunakake ing sawetara markup HTML:
Paragraf iki bakal ditampilake ing werna biru, sing minangka standar kanggo kaca kasebut.
Paragraf iki uga dadi biru.
Lan paragraf iki bakal katon ing werna abang amarga atribut kelas bakal nimpa warna biru standar saka styling selector.
Contone, gaya "p.alert" mung bakal ditrapake kanggo elemen alinea sing nggunakake "tandha" kelas. Yen sampeyan pengin nggunakake kelas kasebut ing sawetara elemen HTML, sampeyan mung bakal mbusak elemen HTML saka awal gaya telpon (mung mesthekake ninggalake wektu (.) ing panggonan), kaya iki:
.alert {background-color: # ff0000;}
Kelas iki saiki kasedhiya ing sembarang elemen sing perlu. Saben potongan HTML sing nduweni nilai atribut kelas "tandha" saiki bakal entuk gaya iki. Ing HTML ing ngisor iki, kita duwe loro paragraf lan level 2 sing nggunakake "tandha" kelas. Loro-lorone iki bakal duwe warna latar mburi abang adhedhasar CSS kita mung nuduhake.
Paragraf iki bakal ditulis nganggo werna abang.
Lan h2 iki uga bakal dadi abang.
Ing situs web saiki, atribut kelas kerep dipigunakaké ing sapérangan unsur amarga luwih gampang digarap saka perspèktif spesifik sing ID. Sampeyan bakal nemokake kaca HTML sing paling anyar kanggo diisi karo atribut kelas, sawetara sing diulang kaping pirang-pirang ing dokumen lan liya-liyane sing mung bisa katon sapisan.
ID Pilihan
Pemilih ID ngidini sampeyan menehi jeneng menyang gaya tartamtu tanpa nggabungake karo tag utawa unsur HTML liyane. Ngomong duwe pembagian ing markup HTML sing ngemot informasi babagan acara.
Sampeyan bisa menehi divisi iki dadi atribut ID saka "acara", lan yen sampeyan pengin njelasake manawa divisi kanthi watesan ireng 1-piksel ireng sampeyan nulis kode ID kaya iki:
#event {border: 1px solid # 000; }
Tantangan karo pemilih ID iku ora bisa diulang ing dokumen HTML. Wong kudu unik (sampeyan bisa nggunakake ID sing padha ing pirang-pirang halaman situs sampeyan, nanging mung sapisan ing saben dokumen HTML individu). Dadi yen sampeyan duwe 3 acara sing kabeh mbutuhake wates kasebut, sampeyan kudu menehi atribut ID acara "event1", "event2" lan "event3" lan gaya saben wong. Mulane, dadi luwih gampang nggunakake atribut kelas kasebut ing "acara" lan gaya kabeh kasebut bebarengan.
Tantangan liyane karo atribut ID yaiku nduweni kekhususan luwih dhuwur tinimbang atribut kelas. Iki tegese yen sampeyan kudu duwe CSS sing ngatasi gaya sing wis ditemtokake sadurunge, bisa dadi angel yen sampeyan kudu migunakake ID banget. Mulane, akeh pangembang web sing wis dipindhah saka nggunakake ID ing markup, sanajan mung arep nggunakake nilai kasebut sepisan, lan malah nguripake atribut kelas sing kurang spesifik kanggo kabeh gaya.
Siji area sing atribut ID sing diputer yaiku nalika sampeyan pengin nggawe kaca sing nduweni pranala jangkar ing-kaca. Misale, yen sampeyan duwe situs web gaya parallax sing ngemot kabeh isi ing kaca siji kanthi pranala sing "mlumpat" menyang maneka bagean saka kaca kasebut. Iki rampung kanthi nggunakake atribut ID lan pranala teks sing nggunakake pranala jangkar iki.
Sampeyan mung bakal nambah nilai saka atribut kasebut, sadurungé kanthi simbol #, menyang href attribute of the link, kaya iki:
Iki minangka tautan
Nalika diklik utawa disentuh, pranala iki bakal mlumpat menyang bagean kaca sing nduweni atribut ID iki. Yen ora ana unsur ing kaca sing digunakake ID iki, pranala bakal ora nindakake apa-apa.
Elingi, yen sampeyan pengin nggawe link ing situs ing situs, sampeyan kudu nggunakake atribut ID, nanging sampeyan isih bisa nguripake kelas kanggo tujuan gaya CSS umum. Iki minangka tandha titik ing dina iki - Aku milih pemilih kelas minangka akeh lan mung nguripake ID nalika aku butuh atribut kanggo tumindak ora mung minangka pancing kanggo CSS nanging uga minangka link ing kaca.
Artikel asli dening Jennifer Krynin. Diedit dening Jeremy Girard ing 8/9/17