Како креирати Зебра пруге са ЦСС

Коришћење: нтх-оф-типе (н) са табелама

Да би се таблице лакше читале, често је корисно стајати редове са променљивим бојама позадине. Један од најчешћих начина за стилове табела је подешавање боје позадине сваког другог реда. Ово се често назива "зебра пругама".

То можете постићи подешавањем сваког другог реда помоћу ЦСС класе и дефинирањем стила за ту класу. Ово функционише, али није најбољи или најефикаснији начин за то.

Приликом коришћења овог метода сваки пут када треба да уредите ту таблицу, можда ћете морати да измените сваки ред у таблици како бисте били сигурни да је сваки ред у складу са променама. На примјер, ако убаците нови ред у вашу табелу, сваки други ред испод њега мора промијенити класу.

ЦСС олакшава стајање таблица са зебра пругама. Не морате додавати никакве додатне атрибуте ХТМЛ или ЦСС класе, само користите: нтх-оф-типе (н) ЦСС селектор .

: Нтх-оф-типе (н) селектор је структурна псеудо-класа у ЦСС-у која вам омогућава да створите елементе засноване на њиховим односима са родитељима и сестрама. Можете га користити за одабир једног или више елемената на основу њиховог извора налога. Другим речима, може се подударати са сваким елементом који је нтх дијете одређене врсте његовог родитеља.

Писмо н може бити кључна реч (као чудно или чак), број или формула.

На пример, да бисте створили сваку другу ознаку пасуса са жутом бојом позадине, ваш ЦСС документ би укључио:

п: нтх-оф-типе (чудно) {
позадина: жуто;
}

Почните са ХТМЛ таблицом

Прво, створите своју таблицу као што бисте нормално написали у ХТМЛ-у. Немојте додавати посебне редове у редове или ступце.

На својој листи стилова додајте следећи ЦСС:

тр: нтх-оф-типе (чудно) {
бацкгроунд-цолор: #ццц;
}

Ово ће створити сваки други ред сивом бојом позадине почевши од првог реда.

Стил Алтернативе Цолумнс на исти начин

Исту врсту стила можете учинити колонама у вашим столовима. Да бисте то урадили, једноставно промените тр у својој ЦСС класи на тд. На пример:

тд: нтх-оф-типе (чудно) {
бацкгроунд-цолор: #ццц;
}

Коришћење формула у нтх-оф-типе (н) селектору

Синтакса за формулу која се користи у селектору је + б.

На пример, ако желите да поставите боју позадине за сваки трећи ред, ваша формула би била 3н + 0. Ваш ЦСС може изгледати овако:

тр: нтх-оф-типе (3н + 0) {
бацкгроунд: слатеграи;
}

Корисни алати за коришћење нтх-оф-типе селектора

Ако се осећате помало застрашујуће по аспекту коришћења псеудо-класе нтх-оф-типе селектора, покушајте: нтх Тестер сајт као користан алат који вам може помоћи да дефинишете синтаксу како бисте постигли изглед који желите. Помоћу падајућег менија изаберите нтх-оф-типе (такође можете експериментисати и са другим псевдокласама, као што је нтх-цхилд).