Kelas jeung Gajah Mungkur Mantuan manjangkeun CSS anjeun
Gedong jaba dina Web dinten ieu merlukeun pamahaman jero ngeunaan CSS (Cascading Style cadar). Di handap ieu mangrupakeun parentah nu masihan ramatloka pikeun nangtukeun sabaraha éta bakal perenah di jandela browser. Panawaran runtuyan "gaya" pikeun dokumen HTML anjeun nu bakal nyieun tampilan na ngarasakeun tina Kalurahan Anjeun.
Aya loba cara nerapkeun pamadegan gaya disebut tadi di sakuliah dokumen, tapi oftentimes rék ngagunakeun gaya dina ukur sababaraha elemen dina dokumen, tapi teu sadayana instansi unsur éta.
Anjeun oge bisa hayang nyieun hiji gaya nu tiasa dilarapkeun ka sababaraha elemen dina hiji dokumén, tanpa ngabogaan ngulang aturan gaya pikeun tiap conto individu. Pikeun ngahontal ieu gaya dipikahoyong, anjeun bakal ngagunakeun kelas jeung atribut ID HTML. Atribut ieu atribut global nu bisa dilarapkeun ka ampir unggal tag HTML .That hartina naha anjeun bagean styling, paragraf, Tumbu, béréndélan atanapi salah sahiji buah séjén HTML dina dokumen, anjeun bisa giliran kelas na ID atribut kana mantuan Anjeun ngalengkepan ieu tugas!
kelas Selectors
Sejen kelas ngidinan Anjeun pikeun nangtukeun sababaraha gaya kana unsur anu sarua atawa tag dina dokumen a. Contona, Anjeun bisa hayang mibanda bagian nu tangtu téks anjeun disebut kaluar dina warna béda ti sesa téks dina dokumen éta. Ieu bagian disorot bisa jadi hiji "waspada" yen anjeun netepkeun kana kaca. Anjeun bisa ngadaptarkeun ayat Anjeun sareng kelas kawas kieu:
p {warna: # 0000ff; }
p.alert {warna: # ff0000; }
Gaya ieu bakal nangtukeun warna sadaya ayat ka biru (# 0000ff), tapi sagala ayat ku atribut kelas "waspada" gantina ku bakal styled beureum (# ff0000). Ieu alatan dina atribut kelas ngabogaan spésifisitas luhur batan aturan CSS kahiji, anu ngan ngagunakeun pamilihan tag.
Waktu digawe make CSS, aturan leuwih spésifik bakal override hiji kirang husus. Ku kituna dina conto ieu, aturan leuwih umum susunan warna kabeh ayat, tapi nu kadua, aturan anu leuwih spésifik ti overrides nu netepkeun wungkul dina sababaraha paragraf.
Di dieu nyaeta kumaha ieu bisa dipaké dina sababaraha aksara HTML:
ayat ieu bakal dipintonkeun di biru, nu ngarupakeun standar pikeun kaca.
ayat ieu oge bakal di bulao.
Tur ayat ieu bakal dipintonkeun beureum ti atribut kelas bakal nimpa ka warna bulao baku ti styling unsur pamilihan.
Dina conto éta, gaya "p.alert" ngan bakal dilarapkeun ka elemen eta ayat make nu "waspada" class.If nu rék ngagunakeun éta kelas sakuliah sababaraha elemen HTML, anjeun bisa kalayan gampang bakal dipiceun unsur HTML ti awal panggero gaya (ngan pastikeun ninggalkeun jaman () di tempat.), saperti kieu:
.alert {tukang-warna: # ff0000;}
kelas ieu ayeuna aya kana sagala unsur anu perlu éta. Sagala sapotong HTML Anjeun nu boga nilai atribut kelas "waspada" ayeuna bakal meunang gaya ieu. Dina HTML handap, urang kudu duanana mangrupa ayat sarta tingkat judul 2 nu nganggo "waspada" kelas. Duanana ieu bakal boga kasang tukang-Warna beureum dumasar kana CSS kami ngan némbongkeun.
ayat ieu bakal jadi ditulis dina beureum.
Jeung H2 ieu oge bakal beureum.
Dina situs web kiwari, atribut kelas anu mindeng dipaké dina paling elemen sabab gampang dipaké jeung ti sudut pandang spésifisitas yen Gajah Mungkur anu. Anjeun bakal manggihan paling kaca HTML ayeuna bisa ngeusi atribut kelas, ditambahan nu terus-terusan sababaraha kali dina dokumen jeung nu lianna nu bisa ngan muncul sakali.
ID Selectors
ID The pamilihan ngidinan Anjeun pikeun masihan ngaran ka gaya husus tanpa associating eta kalawan tag atanapi sejenna unsur HTML . Ucapkeun anjeun kungsi division dina aksara HTML anjeun nu ngandung émbaran ngeunaan hiji acara.
Anjeun bisa masihan division kieu ID hiji atribut tina "acara", lajeng lamun hayang outline division nu mibanda wates hideung lega 1-piksel anjeun nulis ID hiji kode jiga kieu:
#event {wates: 1px solid # 000; }
Tangtangan jeung selectors ID nyaeta aranjeunna teu bisa terus-terusan dina dokumen HTML. Maranéhanana kudu unik (anjeun tiasa nganggo sami ID on sababaraha kaca loka anjeun, tapi ngan sakali dina unggal dokumen HTML individual). Ku kituna lamun miboga 3 acara nu sagala diperlukeun wates ieu, anjeun bakal kedah masihan aranjeunna atribut ID tina "event1", "event2" jeung "event3" na gaya masing-masingna. Ieu bakal, kituna, loba gampang nganggo atribut kelas disebut tadi tina "acara" na gaya kabeh sakaligus.
Tantangan sejen kalawan ID atribut nyaeta aranjeunna boga spésifisitas luhur batan atribut kelas. Ieu ngandung harti yén lamun perlu kudu CSS yén overrides hiji gaya saméméhna ngadegkeun, bisa jadi hese ngalakukeun kitu lamun geus relied teuing beurat on Gajah Mungkur. Ieu kanggo alesan ieu nu loba pamekar web geus dipindahkeun jauh ti ngagunakeun Gajah Mungkur dina aksara maranéhanana, sanajan maranéhanana ngan maksudna nganggo nilai anu sakali, sarta geus gantina ngancik ka kelas kirang-spésifik atribut kanggo ampir sadayana gaya.
Hiji wewengkon mana ID atribut do datangna kana maén téh lamun rék nyieun kaca nu mibanda di-kaca Tumbu jangkar. Contona, lamun boga ramatloka gaya parallax nu ngandung sakabéh eusi dina kaca tunggal kalawan tumbu nu "luncat" pikeun sagala rupa penjuru kaca éta. Hal ieu dilakukeun ngagunakeun atribut ID na Tumbu téks nu nganggo Tumbu jangkar ieu.
Anjeun saukur bakal nambahan ajén atribut nu dimimitian ku # simbol, jeung atribut href sahiji link, kawas kieu:
Ieu link
Nalika diklik atanapi keuna, link ieu bakal luncat ka bagian tina kaca nu boga ID atribut ieu. Mun euweuh unsur dina kaca dipaké ID nilai ieu link moal bakal ngalakukeun nanaon.
Inget, lamun rék nyieun di-kaca linking dina situs a, pamakéan atribut ID bakal diperlukeun, tapi anjeun masih bisa giliran kelas keur kaperluan styling CSS umum. Ieu kumaha kuring ditandaan up Kaca dinten - I dipaké selectors kelas saloba mungkin na ngan giliran Gajah Mungkur nalika kuring butuh atribut nu meta teu ukur salaku hook pikeun CSS tapi ogé salaku hiji link di-kaca.
Aslina artikel ku Jennifer Krynin. Diédit ku Jeremy Girard on 8/9/17