Kuidas CSS-i pärand toimib veebidokumentides

CSS-i veebisaidi kujundamise oluline osa on pärilikkuse mõiste mõistmine.

CSS pärimine määratakse automaatselt kindlaks kasutatava vara stiili järgi. Kui uurite stiili varunduse taustavärvi, näete jaotist pealkirjaga "Pärand". Kui olete nagu enamik veebidisainerid, ignoreerisite seda jaotist, kuid see on eesmärk.

Mis on CSS-i pärand?

Iga HTML-dokumendi element on osa puust ja kõigil elementidel, välja arvatud esialgsele -elemendile, on vanem element, mis seda ümbritseb. Ükskõik, milliseid stiile sellel põhielemendil rakendatakse, saab selle juurde kuuluvate elementide suhtes rakendada, kui need omadused on need, mida saab pärandada.

Näiteks allpool oleval HTML-koodil on märgist H1, mis lisab EM-märgendi:

See on suur pealkiri

EM elemend on element H1 laps ja kõik pärandatud H1-stiilid edastatakse ka EM-tekstile. Näiteks:

h1 {font-size: 2em; }

Kuna fondi suuruse vara on päritud, siis tekst, mis ütleb "Big" (mis on see, mis on ümbritsetud EM-sildidesse), on sama suur nagu ülejäänud H1-s. Seda seetõttu, et see pärib CSS-i vara määratud väärtust.

Kuidas kasutada CSS-i pärandit

Lihtsaim viis selle kasutamiseks on tutvuda CSS-i omadustega, mis on ja ei ole päritud. Kui vara on päritud, siis teate, et väärtus jääb dokumendi iga lapseelemendi jaoks samaks.

Parim viis selle kasutamiseks on määrata oma põhilised stiilid väga kõrgel tasemel elemendil nagu BODY. Kui määrate oma fontide perekonna keha vara, siis tänu pärimisele hoiab kogu dokument sama fontide perekonda. See on tegelikult väiksematele stiililehtedele, mida on lihtsam hallata, sest üldiste stiilide arv on väiksem. Näiteks:

keha {font-family: Arial, sans-serif; }

Kasuta päris stiili väärtust

Iga CSS-i vara sisaldab väärtust "pärida" võimaliku variandina. See ütleb veebibrauseris, et isegi kui vara tavaliselt ei päranda, peaks see olema võrdne vanemaga. Kui määrate stiili, näiteks varjatud, mis ei ole päritud, saate järgnevate omaduste pärandväärtust kasutada, et anda neile sama varu kui vanem. Näiteks:

keha {margin: 1em; } p {margin: pärida; }

Pärand kasutab arvutatud väärtusi

See on tähtis päritud väärtuste puhul, näiteks pikkusi kasutavad fontide suurused . Arvutatud väärtus on väärtus, mis on võrgulehekülje mõne teise väärtusega võrreldes.

Kui määrate oma BODY-elemendile font-size 1em, siis kogu teie leht ei ole ainult 1em suurune. Seda seetõttu, et elemendid nagu rubriigid (H1-H6) ja muud elemendid (mõned brauserid arvutavad lauaomadusi erinevalt) on suhtelise suurusega veebibrauseris. Teiste kirjasuuruste teabe puudumisel teeb veebibrauser alati pealkirja H1-le, mis on lehe suurim tekst, millele järgneb H2 ja nii edasi. Kui määrate oma BODY-elemendi kindlale kirjasuurusele, kasutatakse seda kui "keskmist" fondi suurust ja pealkirja elemendid arvutatakse selle põhjal.

Märkus pärandi ja taustaomaduste kohta

Mõned stiilid, mis on loetletud, pole W3C-s CSS-2-s päritud, kuid veebibrauserid pärinevad ikka veel väärtusi. Näiteks kui kirjutasite järgmise HTML-i ja CSS-i: