Як Успадкоўванне CSS працы ў вэб-дакументаў

Важная частка стылізацыі сайта з дапамогай CSS з'яўляецца разуменне канцэпцыі ў спадчыну.

CSS ўспадкоўванне аўтаматычна вызначаецца стылем уласнасці выкарыстоўваецца. Калі вы глядзіце на стыль уласнасці колер фону, вы ўбачыце раздзел пад назвай «Спадчына». Калі вы падобныя на большасць вэб-дызайнераў, вы ігнаруеце гэты раздзел, але гэта не служыць мэты.

Што такое Успадкоўванне CSS?

Кожны элемент у HTML - дакуменце з'яўляецца часткай дрэва і кожны элемент , акрамя элемента зыходнага мае бацькоўскі элемент , які акружае яго. Незалежна стылі прымяняюцца да гэтага бацькоўскаму элементу можа быць прыменена да элементаў, заключаных у ім, калі ўласцівасці з'яўляюцца тыя, якія могуць быць перанятыя.

Напрыклад, гэты HTML код ніжэй мае H1 тэг які зачыняе тэг EM:

Гэта <ет> Big Загаловак

Элемент EM з'яўляецца нашчадкам элемента H1, і любыя стылі на H1, якія ўспадкоўваюцца будуць перададзеныя да тэксту ЕМ, а таксама. Напрыклад:

h1 {памер шрыфта: 2em; }

Паколькі ўласцівасць памеру шрыфта успадкоўваецца, тэкст, які кажа «Big» (які з'яўляецца тое, што заключана ўнутры тэгаў EM) будзе мець той жа памер, як і астатнія часткі H1. Гэта таму, што ён успадкоўвае значэнне, усталяванае ва ўласцівасці CSS.

Як выкарыстоўваць CSS Успадкоўванне

Самы просты спосаб , каб выкарыстоўваць яго, каб азнаёміцца з ўласцівасцямі CSS , якія і ня спадчыннымі. Калі ўласцівасць успадкоўваецца, то вы ведаеце, што значэнне застанецца тым жа самым для кожнага даччынага элемента ў дакуменце.

Лепшы спосаб выкарыстаць гэта, каб усталяваць вашыя асноўныя стылі на элемент вельмі высокага ўзроўню, як і цела. Калі ўсталяваць сямейства шрыфтоў на ўласцівасці цела, а затым, дзякуючы ўспадкоўванні, увесь дакумент будзе трымаць тое ж сямейства шрыфтоў. Гэта будзе на самой справе зрабіць для невялікіх табліц стыляў, якія лягчэй кіраваць, таму што ёсць менш агульныя стылі. Напрыклад:

цела {сямейства шрыфтоў: Arial, без засечак; }

Выкарыстоўвайце Успадкоўваўшы Style Value

Кожнае ўласцівасць CSS ўключае ў сябе значэнне «спадчыну» у якасці аднаго з магчымых варыянтаў. Гэта кажа вэб-браўзэр, што нават калі ўласцівасць звычайна не ўспадкоўваюцца, ён павінен мець такое ж значэнне, як бацька. Калі задаць стыль, такія як запас, які не успадкоўваецца, вы можаце выкарыстоўваць значэнне ў спадчыну на наступныя ўласцівасці, каб даць ім той жа запас у якасці аднаго з бацькоў. Напрыклад:

Цела {поле: 1em; } Р {поле: ўспадкоўванне; }

Ўспадкоўванне Выкарыстанне вылічаных значэнняў

Гэта важна для атрыманых у спадчыну каштоўнасцяў , такіх як памер шрыфта , якія выкарыстоўваюць даўжыні. Вылічанае значэнне з'яўляецца значэннем, якое з'яўляецца адносна некаторага іншага значэння на вэб-старонцы.

Калі вы ўсталюеце памер шрыфта ў 1em на вашым элеменце BODY, уся ваша старонка не будзе ўсё толькі 1em ў памеры. Гэта адбываецца таму , што такія элементы , як загалоўкі (H1-H6) і іншыя элементы (некаторыя браўзэры вылічыць ўласцівасць табліцы па- рознаму) маюць адносны памер у інтэрнэце - браўзэры. Пры адсутнасці іншай інфармацыі аб памеры шрыфта, вэб-браўзэр заўсёды будзе зрабіць H1 загаловак самым вялікім тэкстам на старонцы, а затым Н2 і гэтак далей. Калі вы ўсталюеце элемент BODY ў пэўны памер шрыфта, тое, што выкарыстоўваецца ў якасці «сярэдняга» памеру шрыфта, а загаловак элементы вылічаюцца з гэтага.

Заўвага аб атрыманнi спадчыны і ўласцівасці фону

Ёсць цэлы шэраг стыляў, якія пералічаныя не успадкоўваецца ў CSS-на W3C, але вэб-браўзэры па-ранейшаму ўспадкуюць значэнне. Напрыклад, калі вы напісалі наступны HTML і CSS:

<Тып стыль = "тэкст / CSS"> h1 {фонавага колеру: жоўты; }

Гэта <ет> Big загаловак

Слова «Вялікі» будзе па-ранейшаму мець жоўты фон, нават калі ўласцівасць колер фону не павінен быць успадкаваны. Гэта таму, што пачатковае значэнне фону ўласцівасці з'яўляецца "празрыстым". Такім чынам, вы не бачыце колер фону на а што колер прасвечвае ад

з бацькоў.