Si funksionon Trashëgimia e CSS në Dokumentet Web
Një pjesë e rëndësishme e styling një faqe interneti me CSS është të kuptuarit e konceptit të trashëgimisë.
Trashëgimi CSS përcaktohet automatikisht nga stili i pronës që përdoret. Kur të kërkoni ngjyrën e sfondit të pronës së stilit, do të shihni një pjesë të titulluar "Trashëgimia". Nëse jeni si shumica e web designers, ju keni injoruar atë pjesë, por ajo i shërben një qëllimi.
Cila është Trashëgimia CSS?
Çdo element në një dokument HTML është pjesë e një peme dhe çdo element përveç elementit fillestar ka një element prind që e mbyll atë. Çfarëdo stili që aplikohet për këtë element prind mund të zbatohet tek elementet e mbyllura në të nëse pronat janë ato që mund të trashëgohen.
Për shembull, ky kod HTML më poshtë ka një tag H1 që bashkon një tag EM:
Ky është një i madh titull Elementi EM është një fëmijë i elementit H1 dhe çdo stil në H1 që trashëgohen do të kalojë edhe tek teksti EM. Për shembull:
h1 {font-size: 2em; } Meqenëse trashësia e font-size është trashëguar, teksti që thotë "Big" (që është ajo që është e mbyllur brenda tags EM) do të jetë e njëjtë me madhësinë e pjesës tjetër të H1. Kjo për shkak se ajo trashëgon vlerën e vendosur në pronën CSS.
Si të përdorësh trashëgiminë CSS
Mënyra më e lehtë për ta përdorur është njohja me pronat CSS që janë dhe nuk janë të trashëguara. Nëse prona është e trashëguar, atëherë ju e dini që vlera do të mbetet e njëjtë për çdo element të fëmijës në dokument.
Mënyra më e mirë për të përdorur këtë është që të vendosni stilet tuaja themelore në një element shumë të nivelit të lartë, si TRUPI. Nëse e vendosni familjen tuaj të shkronjave në pronën e trupit, atëherë, në sajë të trashëgimisë, i gjithë dokumenti do të mbajë të njëjtën familje të shkronjave. Kjo në të vërtetë do të bëjë për stylesheets më të vogla që janë më të lehtë për të menaxhuar, sepse ka më pak stile të përgjithshme. Për shembull:
trupi {font-family: Arial, sans-serif; } Përdorni vlerën e stilit të trashëgimisë
Çdo pronë CSS përfshin vlerën "trashëgoj" si një mundësi të mundshme. Kjo tregon shfletuesin e uebit, që edhe nëse prona nuk normalisht do të trashëgohet, ajo duhet të ketë të njëjtën vlerë si prindi. Nëse vendosni një stil të tillë si një diferencë që nuk trashëgohet, mund të përdorni vlerën e trashëguar në pronat e mëvonshme për t'u dhënë atyre diferencë të njëjtë si prindi. Për shembull:
trupi (diferencë: 1em; } p {margin: trashëgoj; } Trashëgimia përdor vlerat e llogaritura
Kjo është e rëndësishme për vlerat e trashëguara si madhësitë e shkronjave që përdorin gjatësinë. Një vlerë e llogaritur është një vlerë që është e lidhur me ndonjë vlerë tjetër në faqen Web.
Nëse vendosni një madhësi font-i 1em në elementin tuaj BODY, faqja juaj e tërë nuk do të jetë vetëm 1em në madhësi. Kjo për shkak se elementët si titujt (H1-H6) dhe elementët e tjerë (disa shfletues llogaritin pronat e tabelave ndryshe) kanë një madhësi relative në shfletuesin e uebit. Në mungesë të informatave të tjera të madhësisë së shkrimit, shfletuesi web gjithmonë do të bëjë një titull H1 teksti më i madh në faqe, i ndjekur nga H2 dhe kështu me radhë. Kur vendosni elementin tuaj BODY në një madhësi specifike të shkronjave, atëherë kjo përdoret si madhësia e shkronjave "mesatare", dhe elementët kryesorë llogariten nga ajo.
Një shënim rreth trashëgimisë dhe pronave të sfondit
Ka një numër stilesh që janë të listuara nuk kanë trashëguar në CSS 2 në W3C, por shfletuesit Web ende trashëgojnë vlerat. Për shembull, nëse keni shkruar HTML dhe CSS në vijim: