Међутим, овај чланак ће елаборирати две специфичне класе које су пропорционалне и табеларне бројке. Они се користе за стилизовање нумеричких вредности у Таилвинд-у и сређивање и представљање нумеричких података на начин који је привлачан дизајну документа.
Овај чланак ће разрадити пропорционалне и табеларне бројке у Таилвинд ЦСС-у користећи следећи преглед:
- Како користити пропорционалне бројке у Таилвинд ЦСС-у?
- Како користити табеларне фигуре у Таилвинд ЦСС-у?
- Разлика између пропорционалних и табеларних фигура
Како користити пропорционалне бројке у Таилвинд ЦСС-у?
Класа пропорционалних цифара ће елементу доделити конвенцију где сваки број нема исту ширину.
Синтакса
Синтакса за коришћење пропорционалних фигура у Таилвинд-у је следећа:
< див класа = 'пропорционални бројеви' >
< див / >
У горе наведеној синтакси, „ пропорционални-бројеви ” класа мора бити обезбеђена елементу да би се користиле пропорционалне бројке.
Погледајмо практичан пример пропорционалних фигура.
У доле наведеном коду, два „ стр ” елементи су садржани у „ див ” елемент који користи класу пропорционалних цифара:
< див класа = ' пропорционални-бројеви текст-центар бг-слате-200 текст-кл' >< стр > 121212 < / стр >
< стр > 838383 < / стр >
< / див >
Објашњење горе наведеног кода је следеће:
- „ див ” елемент користи „ пропорционални-бројеви ” класа која ће применити својство пропорционалне фигуре на бројеве.
- „ текстуални центар ” класа позиционира текст у центар елемента.
- „ бг-{цолор}-{нумбер} ” класа је одговорна за боју позадине елемента.
- „ текст-кл ” класа обезбеђује изузетно велику величину фонта за текст.
- Следеће, два ' стр ” се креирају елементи који садрже различите бројеве.
Излаз
На излазу се може видети да су бројеви у другом „ стр ” елемент има нешто већу ширину од првог. Ово је због класе пропорционалних цифара:
Како користити табеларне фигуре у Таилвинд ЦСС-у?
Табеларне фигуре у Таилвинд додељују конвенцију елементу где сваки број има исту величину ширине. Ово ствара симетричну репрезентацију бројева у облику табеле.
Синтакса
Синтакса за коришћење табеларних слика је следећа:
< див класа = 'табеларни бројеви' >< див / >
У горе наведеној синтакси, „ табеларни-бројеви ” класа је обезбеђена елементу да користи табеларне фигуре.
Погледајмо како је „ табеларни-бројеви ” утичу на нумеричке вредности у ХТМЛ документу. За ову демонстрацију два “ стр ” са нумеричким вредностима су креирани и садржани у „ див ” елемент који користи класу табеларне фигуре:
< див класа = ' табулар-нумс тект-центер бг-слате-200 тект-кл' >< стр > 121212 < / стр >
< стр > 838383 < / стр >
< / див >
У горњем коду, „ табеларни-бројеви ” класа је обезбеђена за “ див ” елемент који ће детету доделити стил табеларних фигура “ стр ” елементи.
Излаз:
У горњем излазу се може видети да су нумеричке вредности у оба елемента савршено усклађене због исте ширине цифара.
Информације о бонусу: разлика између пропорционалних и табеларних фигура у Таилвинд ЦСС-у
Хајде да погледамо демонстрацију која разликује ефекат табеларних и пропорционалних класа фигура на нумеричке вредности. У овој демонстрацији, елементима ће бити додељена класа пропорционалних цифара као подразумевана. Затим, користећи стање лебдења, елементима ће бити додељена класа табеларних фигура:
< див класа = ' пропортионал-нумс тект-центер бг-слате-200 тект-кл ховер:табулар-нумс' >< стр > 121212 < / стр >
< стр > 838383 < / стр >
< / див >
У горњем коду се може видети да је „ див ” елемент је опремљен са „ пропорционални-бројеви “, што ће бити подразумевана конвенција коју ће нумеричке вредности пратити.
Слично томе, због „ ховер:табулар-нумс ”, нумеричке вредности ће пратити конвенцију о табеларним сликама кад год корисник пређе курсором миша преко „див” елемента.
Излаз
У датом излазу ширина нумеричких вредности се мења када корисник пређе мишем преко елемента. Ово пружа визуелну разлику између пропорционалних и табеларних фигура у Таилвинд-у:
То је све о пропорционалним и табеларним цифрама у Таилвинд-у.
Закључак
Да бисте користили пропорционалне бројке у Таилвинд-у, „ пропорционални-бројеви ” се користи класа. Пропорционалне бројке користе конвенцију где свака нумеричка вредност има различиту величину ширине. Да бисте користили табеларне бројке у Таилвинд-у, „ табеларни-бројеви ” се користи класа. Табеларне слике користе конвенцију где свака нумеричка вредност има исту величину ширине. Овај чланак је дао процедуру за коришћење пропорционалних и табеларних фигура у Таилвинд-у.