Овај пост илуструје све могуће аспекте за додавање „основних стилова“ у Таилвинд ЦСС.
Како додати „основне“ стилове у Таилвинд?
„Таилвинд ЦСС“ долази са следеће три методе за додавање „базних“ стилова у цео ХТМЛ садржај или у одређени елемент:
- Користите „ЦСС“ да додате основне стилове у Таилвинд.
- Користите „Плугин“ да додате основне стилове у Таилвинд.
Хајде да их истражимо један по један.
Предуслови
Пре него што пређете на практичну имплементацију, прво погледајте новостворени пројекат под називом „Линукхинт“ који се користи за додавање „основних стилова“:
Структура датотеке пројекта
Сада идите до датотеке „индек.хтмл“ и погледајте њен ХТМЛ код:
< хтмл >< глава >
< линк хреф = '/дист/оутпут.цсс' рел = 'стилесхеет' >
< / глава >
< тело >
< х2 класа = „подвучени фонт у центру текста-подебљани текст-розе-600“ > Добродошли у Линукхинт! < / х2 >< бр >
< х3 класа = „фонт центар текста-подебљан текст–наранџаста-600“ > Водич: Додавање основних стилова у Таилвинд. < / х3 >< бр >
< / тело >
У горњим редовима кода:
Излаз
Излаз горњег кода је приказан овде:
Сада користите разматрани метод да прилагодите горњи ХТМЛ код додавањем основних стилова. Почнимо са Таилвинд „ЦСС“ методом.
Метод 1: Користите ЦСС да додате „основне стилове“ у Таилвинд
Најједноставнији и најлакши метод за додавање основног стила одређеном ХТМЛ елементу је да их додате у главну ЦСС датотеку пројекта. Урадимо овај задатак практично пратећи дате кораке.
Корак 1: Отворите ЦСС датотеку
Прво отворите главну ЦСС датотеку, тј. стиле.цсс ” који садржи уграђене слојеве „базе”, „компоненте” и „услужне програме” за задњи ветар:
Корак 2: Додајте ЦСС
Затим додајте „основни“ стил за специфичне „<х2>“ и „<х3>“ ХТМЛ елементе тако што ћете применити класе користећи „ @применити ” у „базном” слоју уз помоћ „ @слој ” кључна реч. Кључне речи „@лаиер“ додају дефинисане класе на наведени „базни“ слој:
х2 {
@аппли тект-3кл;
}
х3 {
@аппли тект-кл;
}
}
У горњим редовима кода, „ Величина фонта ” класа се примењује на елементе „<х2>” и „<х3>” да би се увећали до одређене величине, респективно:
Сачувајте (Цтрл + С) датотеку.
Корак 3: Излаз
Сада покрените код на живом серверу и погледајте излаз, на следећи начин:
Овде излаз показује да је класа Таилвинд „Величина фонта“ успешно примењена на наведени елемент у основном слоју.
Белешка : Исти приступ се користи за све остале Таилвинд ЦСС класе.
Метод 2: Користите додатак за додавање „основних стилова“ у Таилвинд
Још један користан метод за додавање „основних“ стилова је писање „ повезати ” и користите „ аддБасе() ” функција. Ова функција помаже да се региструју нове класе у „ база ” директива слојева. Ова функција се користи у Таилвинд „таилвинд.цонфиг.јс“ датотеци. Урадимо то практично.
Корак 1: Дефинишите функцију „аддБасе()“.
Прво идите на „ таилвинд.цонфиг.јс ” конфигурациону датотеку и додајте основне стилове из додатка и позовите функцију „аддБасе()”:
Сачувајте датотеку.
Корак 2: Излаз
На крају, покрените дати ХТМЛ код и погледајте излаз:
Као што се види, класа Таилвинд „Величина фонта“ дефинисана у функцији „аддБасе()“ као ЈаваСцрипт објекат се примењује на наведене ХТМЛ елементе.
Закључак
Басе стилови за задњи ветар могу се лако додати помоћу „ ЦСС ” класе у главној ЦСС датотеци и „ Повезати ' са ' аддБасе() ” функција у конфигурационој датотеци. Метода „ЦСС“ се сматра најједноставнијим методом јер само дефинише основне стилове у „базном“ слоју и аутоматски их имплементира на наведени елемент. С друге стране, одељак „додатак“ у „ таилвинд.цонфиг.јс ” датотека захтева функцију „аддБасе()“ да дефинише основне стилове као ЈаваСцрипт објекте. Овај пост је илустровао све могуће аспекте за додавање основних стилова у Таилвинд ЦСС.