Преглед ЦСС насљеђивања

Како наслеђивање ЦСС-а ради у Веб документима

Важан део стила веб локације са ЦСС-ом је разумевање концепта наслеђивања.

ЦСС наслеђивање се аутоматски одређује стилом коришћене својине. Када потражите стил боје позадине, видећете одељак под насловом "Наслеђивање". Ако сте као већина веб дизајнера, игнорирали сте тај одељак, али то служи сврси.

Шта је ЦСС насљеђивање?

Сваки елемент у ХТМЛ документу је део дрвета и сваки елемент, осим почетног <хтмл> елемента има родитељски елемент који га уграђује. Који год стилови се примјењују на тај родитељски елемент могу се примијенити на елементе који се налазе у њему, ако су својства они који се могу наследити.

На пример, овај ХТМЛ код у наставку има Х1 ознаку која садржи ЕМ ознаку:

<х1> Ово је <ем> Велики Хеадлине

ЕМ елемент је дијете елемента Х1, а сви стилови на Х1 који су наследјени ће бити пренети на ЕМ текст. На пример:

х1 {фонт-сизе: 2ем; }

Пошто је својство фонт-величине наслеђено, текст који пише "Биг" (што је оно што је затворено унутар ЕМ ознака) биће исте величине као и остатак Х1. То је зато што наслеђује вредност постављена у ЦСС својини.

Како користити ЦСС насљеђивање

Најлакши начин да га користите јесте да се упознате са особинама ЦСС-а која су и нису наслеђена. Ако је својство наследјено, онда знате да ће вриједност остати иста за сваки детски елемент у документу.

Најбољи начин да ово користите је да поставите своје основне стилове на веома висок ниво елемента, као што је БОДИ. Ако сте породицу фонта поставили на својство тела, онда ће захваљујући наслеђу читав документ задржати исти фонт-породица. Ово ће заправо учинити за мање стилове који су лакши за управљање јер има мање стилова у целини. На пример:

боди {фонт-фамили: Ариал, санс-сериф; }

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

Свака ЦСС својина укључује вредност "наслеђивање" као могућу опцију. Ово говори веб претраживачу, да чак и ако се својство обично не би наследило, требало би да има исту вриједност као и родитељ. Ако подесите стил као што је маргина која није наследјена, можете користити наследну вредност на наредним особинама да бисте им дали исту маргину као родитељ. На пример:

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

Наслеђивање користи израчунате вредности

Ово је важно за наслеђене вредности као што су величине фонтова који користе дужину. Рачуната вредност је вредност која је релативна на неку другу вредност на Веб страници.

Ако поставите величину фонта од 1ем на свој елемент БОДИ, ваша цела страница неће бити само 1ем по величини. Ово је зато што елементи попут заглавља (Х1-Х6) и других елемената (неки прегледачи различито израчунавају својства таблице) имају релативну величину у Веб претраживачу. У недостатку других информација о величини фонта, Веб претраживач ће увек направити наслов Х1 највећи текст на страници, затим Х2 и тако даље. Када поставите свој елемент БОДИ на одређену величину фонта, онда се то користи као "просечна" величина фонта, а из тога се израчунавају елементи наслова.

Напомена о наследју и својства позадине

Постоји велики број стилова који су наведени у ЦСС 2 на В3Ц, али Веб претраживачи још увек наслеђују вредности. На пример, ако сте написали следеће ХТМЛ и ЦСС:

<стиле типе = "тект / цсс"> х1 {бацкгроунд-цолор: иеллов; } <х1> Ово је <ем> Велики наслов

Реч "Биг" би и даље имала жуту позадину, иако се не би требало наследити својство позадине у боји. То је зато што је иницијална вриједност позадине својстава "транспарентна". Дакле, ви не видите боју позадине на <ем> већ да је боја сијала од родитеља <х1>.