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