Како наследување на CSS работи во веб-документи

Важен дел од стилизирањето на веб-страница со CSS е разбирање на концептот на наследување.

CSS наследување автоматски се дефинира според стилот на имотот што се користи. Кога ќе ја погледнете бојата на позадината, ќе видите дел со наслов "Наследување". Ако сте како повеќето веб-дизајнери, го игнориравте тој дел, но тоа не служи за цел.

Што е наследување на CSS?

Секој елемент во HTML-документ е дел од дрво и секој елемент, освен почетниот елемент , има родителски елемент кој го затвора. Кои стилови се применуваат на тој родителски елемент може да се применат на елементите што се залепени во него, ако својствата се оние кои можат да се наследат.

На пример, оваа HTML-код подолу има ознака H1 што ја содржи ознаката EM:

Ова е Биг Наслов

ЕМ елементот е дете на елементот H1, а сите стилови на H1 кои се наследени ќе бидат пренесени и на EM-текстот. На пример:

h1 {фонт-големина: 2em; }

Бидејќи својството на font-size е наследено, текстот што вели "Биг" (кој е она што е затворен во EM-ознаките) ќе биде со иста големина како и остатокот од H1. Ова е затоа што ја наследува вредноста поставена во CSS сопственост.

Како да се користи наследување на CSS

Најлесен начин да го користите е да се запознаете со својствата на CSS кои се и не се наследени. Ако имотот е наследен, тогаш знаете дека вредноста ќе остане иста за секој дете елемент во документот.

Најдобар начин да го користите ова е да ги поставите вашите основни стилови на елемент на многу високо ниво, како што е BODY. Ако го поставите вашиот фонт-семејство на имотот на телото, тогаш, благодарение на наследството, целиот документ ќе го задржи истиот фонт-семејство. Ова, всушност, ќе направи за помали стилски листови кои се полесно да се управуваат, бидејќи има помалку стилови. На пример:

тело {font-family: Arial, sans-serif; }

Користете ја вредноста на наследениот стил

Секој CSS сопственост ја вклучува вредноста "наследи" како можна опција. Ова му кажува на веб-прелистувачот, дека дури и ако имотот обично не е наследен, треба да ја има истата вредност како и родителот. Ако поставите стил како маргина која не е наследена, можете да ја користите наследената вредност на подоцнежните својства за да им дадете иста маргина како и родителот. На пример:

тело {маргина: 1em; } p {маргина: наследете; }

Наследството користи пресметани вредности

Ова е важно за наследените вредности како големината на фонтот кои користат должини. Пресметаната вредност е вредност која е релативна на некоја друга вредност на веб-страницата.

Ако поставите големината на фонтот од 1em на вашиот елемент BODY, целата ваша страница нема да биде само 1em во големина. Ова е затоа што елементите како насловите (H1-H6) и други елементи (некои пребарувачи различно ги пресметуваат својствата на табелата) имаат релативна големина во прелистувачот. Во отсуство на други информации за големината на фонтот, веб прелистувачот секогаш ќе го направи H1 насловниот најголем текст на страницата, проследен со H2 и така натаму. Кога ќе го поставите елементот ТЕЛО на одредена големина на фонт, тогаш тоа се користи како "просечна" големина на фонтот, а елементите од насловот се пресметуваат од тоа.

Забелешка за наследување и заднинско својство

Постојат бројни стилови кои се наведени не се наследени во CSS 2 на W3C, но веб прелистувачите сè уште ги наследуваат вредностите. На пример, ако го напишавте следниов HTML и CSS: