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

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

CSS наследяването автоматично се определя от стила на използвания имот. Когато погледнете цвета на фона на собственост на стила, ще видите секция, озаглавена "Наследяване". Ако сте като повечето уеб дизайнери, сте пренебрегнали тази секция, но тя служи за цел.

Какво е наследството на CSS?

Всеки елемент в HTML документ е част от дърво и всеки елемент освен началния елемент има родителски елемент, който го огражда. Каквито и да са стиловете, които се прилагат към този родителски елемент, могат да бъдат приложени към прилежащите към него елементи, ако собственостите са такива, които могат да бъдат наследени.

Например, този HTML код по-долу има маркер H1, който обхваща ЕМ маркер:

Това е заглавие Big

ЕМ елементът е дете на елемента H1 и всички стилове на H1, които са наследени, ще бъдат предадени и на ЕМ текст. Например:

h1 {шрифт-размер: 2em; }

Тъй като собствеността на размер на шрифта се наследи, текстът "Голям" (който е включен в ЕМ таговете) ще бъде със същия размер като останалата част от H1. Това е така, защото наследява стойността, зададена в собствеността на CSS.

Как да използваме CSS наследяване

Най-лесният начин да го използвате е да се запознаете с CSS свойствата, които са и не са наследени. Ако имотът е наследен, тогава знаете, че стойността ще остане една и съща за всеки детски елемент в документа.

Най-добрият начин да използвате това е да настроите основните си стилове на елемент с много високо ниво, подобно на ТЯЛОТО. Ако зададете своето семейство шрифт върху собствеността на тялото, тогава, благодарение на наследството, целият документ ще запази същото семейство шрифтове. Това всъщност ще направи за по-малки стилове, които са по-лесни за управление, защото има по-малко цялостни стилове. Например:

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

Използвайте стойността на стила на наследството

Всяка собственост на CSS включва стойността "наследи" като възможна опция. Това казва на уеб браузъра, че дори ако собствеността обикновено не е наследена, тя трябва да има същата стойност като родителя. Ако зададете стил като марж, който не е наследен, можете да използвате стойността на наследяването за следващите свойства, за да им дадете същия марж като родителя. Например:

тяло {margin: 1em; } p {марж: наследяване; }

Наследството използва изчислените стойности

Това е важно за наследените стойности като размери на шрифтове, които използват дължини. Изчислената стойност е стойност, която е относителна към друга стойност на уеб страницата.

Ако зададете размер на шрифта от 1 брой на елемента си "БОЙ", цялата ви страница няма да е само с 1 брой. Това е така, защото елементи като заглавия (H1-H6) и други елементи (някои браузъри изчисляват свойствата на таблицата по различен начин) имат относителен размер в уеб браузъра. При липса на друга информация за размера на шрифта уеб браузърът винаги ще направи H1 заглавието най-големия текст на страницата, последван от H2 и т.н. Когато зададете елемента BODY на определен размер на шрифта, той се използва като "среден" размер на шрифта и елементите от заглавието се изчисляват от него.

Забележка за наследствеността и свойствата на фона

Има няколко стила, които са изброени, не е наследил в CSS 2 на W3C, но уеб браузърите все още наследяват стойностите. Например, ако сте написали следните HTML и CSS: