Kumaha CSS Pewarisan Works di Dokumén Web
Bagian penting tina styling ramatloka kalayan CSS ieu pamahaman konsép warisan.
CSS pusaka anu otomatis diartikeun ku gaya harta dipake. Lamun anjeun tingali nepi harta gaya latar tukang-warna, Anjeun bakal ningali hiji bagian judulna "Pewarisan Nilai". Mun anjeun geus kawas paling web désainer, anjeun geus dipaliré bagian anu, tapi hancana ngawula Tujuan a.
Naon CSS Pewarisan?
Unggal unsur dina dokumen HTML mangrupakeun bagian tina hiji tangkal sarta unggal unsur iwal awal unsur boga unsur indungna nu mungkus eta. Naon gaya anu dilarapkeun ka nu unsur indungna bisa dilarapkeun kana elemen enclosed di dinya lamun sipat anu leuwih nu bisa diwariskeun.
Contona, kode HTML ieu dihandap boga hiji tag H1 enclosing hiji tag EM:
Ieu Big headline The EM unsur nyaéta anak ti unsur H1, sarta sagala gaya dina H1 nu diwariskeun bakal diliwatan on kana téks ÉM ogé. Salaku conto:
h1 {font-ukuran: 2em; } Kusabab harta font-ukuran anu diwariskeun, téks nu nyebutkeun "Big" (nu kumaha ieu enclosed jero tag EM) bakal ukuran sarua salaku sesa H1. Ieu sabab inherits nilai disetél dina harta CSS.
Kumaha Paké CSS Pewarisan
Cara panggampangna pikeun ngagunakeun éta jadi wawuh jeung pasipatan CSS anu na teu diwariskeun. Lamun harta anu diwariskeun, teras anjeun terang yen nilai bakal tetep sami keur unggal unsur anak dina dokumen éta.
Cara pangalusna pikeun migunakeun ieu pikeun ngeset gaya dasar anjeun dina unsur-tingkat tinggi pisan, kawas awak. Lamun diatur Anjeun font-kulawarga dina sipat awak, lajeng, berkat pusaka, sakabéh dokumén bakal tetep nu sarua font-kulawarga. Ieu sabenerna bakal nyieun pikeun stylesheets leutik anu gampang pikeun ngatur lantaran aya gaya sakabéh pangsaeutikna. Salaku conto:
awakna {font-kulawarga: Arial, sans-serif; } Nganggo inherit Style Niley
Unggal sipat CSS ngawengku nu nilai "inherit" salaku pilihan mungkin. Ieu ngabejaan browser web, éta sanajan harta bakal teu normal jadi warisan, sakuduna boga nilai sarua salaku indung. Lamun diatur gaya a kayaning margin anu henteu diwariskeun, anjeun tiasa nganggo nilai inherit on sipat saterusna méré eta margin sarua salaku indung. Salaku conto:
awakna {margin: 1em; } P {margin: inherit; } Warisan Mangpaat Nilai diitung
Ieu penting keur diwariskeun nilai kawas ukuran font nu make tebih. A nilai itunganna mangrupakeun nilai nu geus relatif ka sababaraha nilai lianna dina kaca Wéb.
Lamun nyetel font-ukuran 1em on unsur awak anjeun, sakabéh kaca anjeun moal janten sadayana mung 1em dina ukuranana. Ieu kusabab elemen kawas lulugu (H1-H6) jeung lianna elemen (sababaraha panyungsi ngitung sifat tabel béda) boga ukuran relatif dina browser Web. Dina henteuna informasi ukuran font sejen, browser Web bakal salawasna nyieun hiji H1 headline téks panggedena dina kaca, dituturkeun ku H2 jeung saterusna. Nalika geus disetel unsur awak anjeun ka ukuran font husus, teras anu digunakeun salaku "rata" ukuran font, sarta elemen headline nu diitung tina éta.
Hiji Catetan Ngeunaan Pewarisan jeung Latar Pasipatan
Aya sababaraha gaya nu didaptarkeun teu diwariskeun di CSS 2 on W3C, tapi nu panyungsi Web masih inherit nilai. Contona, lamun nulis HTML jeung CSS handap:
h1 {tukang-warna: konéng; } Ieu Big headline Kecap "Big" masih bakal boga kasang tukang konéng, sanajan harta tukang-warna henteu sakuduna dituju bisa diwariskeun. Ieu alatan dina nilai awal sipat tukang nyaeta "transparan". Sangkan nu nuju teu ningali warna latar dina tapi rada warna anu bersinar liwat ti indungna.