CSS Herentzia Orokorra

Nola funtzionatzen duen CSS oinarriak Web dokumentuetan

CSSren webgunea diseinatzeko zati garrantzitsu bat ondarearen kontzeptua ulertzen ari da.

CSS oinordetza automatikoki definitzen da jabetza erabiltzen ari denaren arabera. Estilo-atzeko planoaren kolorea begiratzen duzunean, "Herentzia" izeneko atala ikusiko duzu. Web diseinatzaile gehienak bazara, atal hau bazter utzi duzu, baina helburu bat du.

Zer da CSS Herentzia?

HTML dokumentu baten elementu bakoitza zuhaitz baten zati da eta elementu bakoitzak elementua izan ezik elementu nagusi bat du. Estilo horretako gurasoei aplikatzen zaizkien edozein elementu atxikitako elementuei aplikatu ahal zaie, ondasunak heredatu ahal izateko.

Adibidez, beheko HTML kode hau H1 etiketa bat dauka EM tag batekin:

Hau Big Headline da

EM elementua H1 elementuaren ume bat da, eta heredatuaren H1 estilo guztiei EM testuari ere pasatuko zaio. Adibidez:

h1 {font-size: 2em; }

Letraren tamainaren propietatea heredatu denez geroztik, "Big" esaten duen testua (hau da, EM seinaleen barruan sartzen dena) gainerako H1aren tamaina berdina izango da. Honek CSS propietatean ezarri den balioa heredatzen duelako.

Nola erabili CSS oinordetza

Erabili beharreko modurik errazena CSS propietateak eta heredatu ez direnak ezagutzea da. Jabetza heredatu bada, orduan badakizue balioa dokumentu bakoitzaren haurraren elementu berdina dela.

Horretarako modu egokiena zure oinarrizko estiloak oinarri altuko elementu bat ezartzea da, BODY bezala. Zure letra-familia gorputzaren propietatean ezartzen baduzu, herentziari esker, dokumentu osoa letra-familia bera mantentzen du. Honek errazago kudeatuko dituen estilo-orri txikiagoak sortuko ditu, estilo orokor gutxiago baitago. Adibidez:

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

Erabili Heredearen estiloaren balioa

CSS propietate bakoitzak "heredatu" balioa aukera posible gisa hartzen du barne. Horrek Web arakatzaileari kontatzen dio, nahiz eta jabetza ez litzateke heredatu, gurasoaren balio bera izan beharko luke. Estilo bat ezartzen baduzu, heredatu ez den marjina bat badago, ondorengo propietateak heredatu ahal izango dituzu, gurasoaren marjina bera izateko. Adibidez:

gorputza {marjina: 1em; } p {marjina: heredatu; }

Herentziak balio informatikoak erabiltzen ditu

Hau garrantzitsua da heredatutako balioak, luzerak erabiltzen dituzten letra-tamaina bezalakoak . Konputazioaren balioa Web orriko beste balio batzuei dagokien balioa da.

1em-en letra-tamaina bat ezarrita badago zure gorputz-atalean, zure orrialde osoa ez da 1em-eko bakarra izango. Hementxeak (H1-H6) eta beste elementu batzuek (nabigatzaile batzuek mahaiaren propietateak modu ezberdinean kalkulatzen dituztenak) Web arakatzailean tamaina erlatiboa dute. Beste letra-tamainaren informazio faltagatik, web-arakatzaileak orriaren testurik handiena H1 titularra egingo du beti, H2ren ondoren, eta abar. Zure gorputz-elementua letra-tamaina jakin bati ezartzen bazaio, orduan "letra-tamaina" "batezbeste" gisa erabiliko da eta titulu-elementuak kalkulatuko dira.

Herentziari eta atzeko planoko propietateei buruzko ohar bat

Zerrendan dauden hainbat estilo ez dago CSS 2an heredatu W3C-n, baina Web arakatzaileak oraindik ere heredatzen ditu. Adibidez, HTML eta CSS hauek idatzi badituzu: