Šis raksts ilustrēs stilu virsrakstu veidošanas metodi, pievienojot Tailwind bāzes stilu.
Kā veidot virsrakstus, izmantojot pamata stila tailwind?
Lai veidotu virsrakstu stilu programmā Tailwind, skatiet tālāk norādītās darbības.
- Atveriet projekta CSS failu.
- CSS failā pievienojiet pamata stilu virsrakstiem, izmantojot ' @slānis ' direktīva saskaņā ar ' @tailwind bāze; ” direktīvu.
- Izveidojiet HTML programmu un izmantojiet tajā virsraksta elementus.
- Palaidiet HTML programmu un pārbaudiet izvadi.
1. darbība: pievienojiet pamata stilu virsrakstiem CSS failā
Vispirms atveriet ' stils.css ” failu un pievienojiet pamata stilu tajā esošajiem virsrakstiem, izmantojot @slānis ” direktīvu. Piemēram, mēs esam pievienojuši bāzes stilu šādiem virsrakstiem:
@tailwind bāze ;
@slānis bāze {
h1 {
@piesakies teksts-6xl ;
}
h2 {
@piesakies teksts-5xl ;
}
h3 {
@piesakies teksts-4xl ;
}
h4 {
@piesakies teksts-3xl ;
}
h5 {
@piesakies teksts-2xl ;
}
}
@tailwind sastāvdaļas ;
@tailwind komunālie pakalpojumi ;
Šeit:
- ' @layer base { … } ” definē jaunu bāzes slāni un satur virsraksta komponentu stilus.
- ' h1 { @piemērot tekstu-6xl; } ” attiecas uz “ teksts-6xl ' komunālo pakalpojumu klase uz ' h1 ” elementi.
- Līdzīgi ' h2 ”, “ h3 ”, “ h4 ', un ' h5 ' elementu fontu lielums ir iestatīts, izmantojot ' @piesakies ” un attiecīgās lietderības klases (text-5xl, text-4xl, text-3xl un text-2xl).
2. darbība. Izveidojiet HTML tīmekļa lapu, izmantojot virsrakstus
Pēc tam izveidojiet HTML programmu un izmantojiet tajā esošos virsraksta elementus. Šeit mēs esam izmantojuši šādus virsraksta elementus:
< ķermeni >
< div klasē = 'h-screen justify-center text-center bg-violet-400' >
< h1 > 1. virsraksts < / h1 >
< h2 > 2. virsraksts < / h2 >
< h3 > 3. virsraksts < / h3 >
< h4 > 4. virsraksts < / h4 >
< h5 > 5. virsraksts < / h5 >
< / div >
< / ķermeni >
3. darbība: palaidiet HTML programmu
Visbeidzot, palaidiet HTML programmu un apskatiet tīmekļa lapu verifikācijai:
Iepriekš minētajā izvadē virsraksti ir parādīti tā, kā tie bija CSS faila stili.
Secinājums
Lai veidotu virsrakstu stilu programmā Tailwind, atveriet CSS failu un pievienojiet virsrakstiem pamata stilu, izmantojot ' @slānis ' direktīva saskaņā ar ' @tailwind bāze; ” direktīvu. Pēc tam izveidojiet HTML programmu un izmantojiet tajā virsraksta elementus. Visbeidzot, skatiet HTML tīmekļa lapu, lai pārbaudītu izvadi. Šis raksts ir izskaidrojis stilu virsrakstu metodi, pievienojot Tailwind pamata stilu.