Kako CSS nasljeđivanje radi u Web dokumentima
Važan deo stila web lokacije sa CSS-om je razumevanje koncepta nasleđivanja.
CSS nasleđivanje se automatski određuje stilom korišćene svojine. Kada potražite stil boje pozadine, videćete odeljak pod naslovom "Nasleđivanje". Ako ste kao većina web dizajnera, ignorirali ste taj odeljak, ali to služi svrsi.
Šta je CSS nasljeđivanje?
Svaki element u HTML dokumentu je dio stabla, a svaki element, osim početnog elementa ima roditeljski element koji ga ugrađuje. Koji se stilovi primjenjuju na taj roditeljski element može se primijeniti na elemente koji su u njemu ugrađeni ako su svojstva oni koji se mogu naslediti.
Na primjer, ovaj HTML kod u nastavku ima oznaku H1 koja obuhvata EM oznaku:
Ovo je Veliki Headline Element EM je dijete elementa H1, a svi stilovi na H1 koji su nasleđeni će se prenijeti i na EM tekst. Na primjer:
h1 {font-size: 2em; } S obzirom da je svojstvo font-veličine nasleđeno, tekst koji piše "Big" (što je ono što je zatvoreno unutar EM oznaka) biće iste veličine kao i ostatak H1. To je zato što nasleđuje vrijednost postavljena u CSS svojini.
Kako koristiti CSS nasljeđivanje
Najjednostavniji način upotrebe je upoznavanje sa osobinama CSS-a koja su i nisu nasleđena. Ako je svojstvo nasledjeno, onda znate da će vrijednost ostati ista za svaki detski element u dokumentu.
Najbolji način da to koristite je da postavite svoje osnovne stilove na veoma visok nivo elementa, kao što je BODY. Ako ste porodicu fonta postavili na svojstvo tela, onda će zahvaljujući nasleđu čitav dokument zadržati isti font-porodica. Ovo će zapravo učiniti za manje stilove koji su lakši za upravljanje, jer ima manje ukupnih stilova. Na primjer:
body {font-family: Arial, sans-serif; } Koristite vrijednost stila zadatka
Svaka CSS svojina uključuje vrijednost "nasleđivanje" kao moguću opciju. Ovo govori Veb pregledaču, da čak i ako se svojstvo obično ne bi nasledilo, trebalo bi da ima istu vrijednost kao i roditelj. Ako podesite stil kao što je margina koja nije nasledjena, možete koristiti naslednu vrednost na narednim osobinama da biste im dali istu marginu kao roditelj. Na primjer:
telo {margin: 1em; } p {margin: naslediti; } Nasleđivanje koristi kompjuterske vrednosti
Ovo je važno za nasleđene vrednosti kao što su veličine fontova koji koriste dužinu. Računata vrijednost je vrijednost koja je u odnosu na neku drugu vrijednost na Web stranici.
Ako postavite veličinu fonta od 1em na svoj element BODY, vaša cela stranica neće biti samo 1em po veličini. Ovo je zato što elementi kao što su zaglavlja (H1-H6) i drugi elementi (neki pregledači drugačije izračunavaju karakteristike tablice) imaju relativnu veličinu u Veb pregledaču. U nedostatku drugih informacija o veličini fonta, Web pretraživač će uvijek napraviti naslov H1 najveći tekst na stranici, a zatim H2 i tako dalje. Kada postavite svoj element BODY na određenu veličinu fonta, onda se to koristi kao "prosečna" veličina fonta, a iz toga se izračunavaju elementi naslova.
Napomena o nasledju i svojstva pozadine
Postoji niz stilova koji su navedeni u CSS 2 na W3C, ali Web pretraživači još uvijek nasleđuju vrijednosti. Na primjer, ako ste napisali sljedeći HTML i CSS: