டெயில்விண்டில் அடிப்படை பாணியைச் சேர்ப்பதன் மூலம் தலைப்புகளை ஸ்டைல் செய்யும் முறையை இந்த எழுதுதல் விளக்குகிறது.
பேஸ் ஸ்டைல் டெயில்விண்டைப் பயன்படுத்தி தலைப்புகளை ஸ்டைல் செய்வது எப்படி?
டெயில்விண்டில் தலைப்புகளை வடிவமைக்க, கொடுக்கப்பட்ட படிகளைப் பார்க்கவும்:
- திட்டத்தின் CSS கோப்பைத் திறக்கவும்.
- CSS கோப்பில், '' ஐப் பயன்படுத்தி தலைப்புகளில் அடிப்படை பாணியைச் சேர்க்கவும் @அடுக்கு ' உத்தரவு ' கீழ் @tailwind அடிப்படை; ” உத்தரவு.
- ஒரு HTML நிரலை உருவாக்கி அதில் தலைப்பு கூறுகளைப் பயன்படுத்தவும்.
- HTML நிரலை இயக்கி வெளியீட்டைச் சரிபார்க்கவும்.
படி 1: CSS கோப்பில் உள்ள தலைப்புகளில் அடிப்படை நடையைச் சேர்க்கவும்
முதலில், '' style.css ” கோப்பைப் பயன்படுத்தி அதில் உள்ள தலைப்புகளில் அடிப்படை பாணியைச் சேர்க்கவும் @அடுக்கு ” உத்தரவு. உதாரணமாக, பின்வரும் தலைப்புகளில் அடிப்படை பாணியைச் சேர்த்துள்ளோம்:
@வால்காற்று அடித்தளம் ;
@அடுக்கு அடித்தளம் {
h1 {
@விண்ணப்பிக்கவும் உரை-6xl ;
}
h2 {
@விண்ணப்பிக்கவும் உரை-5xl ;
}
h3 {
@விண்ணப்பிக்கவும் உரை-4xl ;
}
h4 {
@விண்ணப்பிக்கவும் உரை-3xl ;
}
h5 {
@விண்ணப்பிக்கவும் உரை-2xl ;
}
}
@வால்காற்று கூறுகள் ;
@வால்காற்று பயன்பாடுகள் ;
இங்கே:
- ' @லேயர் அடிப்படை {…} ” ஒரு புதிய அடிப்படை அடுக்கை வரையறுக்கிறது மற்றும் தலைப்பு கூறுகளுக்கான பாணிகளைக் கொண்டுள்ளது.
- ' h1 {@apply text-6xl; } ' பொருந்தும் ' உரை-6xl 'பயன்பாட்டு வகுப்புக்கு' h1 'கூறுகள்.
- இதேபோல், ' h2 ”,” h3 ”,” h4 ', மற்றும் ' h5 'உறுப்புகள் அவற்றின் எழுத்துரு அளவுகள் அமைக்கப்பட்டுள்ளன' @விண்ணப்பிக்கவும் ” மற்றும் தொடர்புடைய பயன்பாட்டு வகுப்புகள் (text-5xl, text-4xl, text-3xl மற்றும் text-2xl).
படி 2: தலைப்புகளைப் பயன்படுத்தி HTML வலைப்பக்கத்தை உருவாக்கவும்
பின்னர், HTML நிரலை உருவாக்கி, அதில் உள்ள தலைப்பு கூறுகளைப் பயன்படுத்தவும். இங்கே, பின்வரும் தலைப்பு கூறுகளைப் பயன்படுத்தியுள்ளோம்:
< உடல் >
< div வர்க்கம் = 'h-screen justify-center text-center bg-violet-400' >
< h1 > தலைப்பு 1 < / h1 >
< h2 > தலைப்பு 2 < / h2 >
< h3 > தலைப்பு 3 < / h3 >
< h4 > தலைப்பு 4 < / h4 >
< h5 > தலைப்பு 5 < / h5 >
< / div >
< / உடல் >
படி 3: HTML நிரலை இயக்கவும்
இறுதியாக, HTML நிரலை இயக்கவும் மற்றும் சரிபார்ப்புக்காக வலைப்பக்கத்தைப் பார்க்கவும்:
மேலே உள்ள வெளியீடு, தலைப்புகளை CSS கோப்பில் ஸ்டைலாகக் காட்டியது.
முடிவுரை
டெயில்விண்டில் தலைப்புகளை வடிவமைக்க, CSS கோப்பைத் திறந்து, '' ஐப் பயன்படுத்தி தலைப்புகளில் அடிப்படை பாணியைச் சேர்க்கவும் @அடுக்கு ' உத்தரவு ' கீழ் @tailwind அடிப்படை; ” உத்தரவு. பின்னர், ஒரு HTML நிரலை உருவாக்கி அதில் தலைப்பு கூறுகளைப் பயன்படுத்தவும். கடைசியாக, வெளியீட்டைச் சரிபார்க்க HTML வலைப்பக்கத்தைப் பார்க்கவும். இந்த எழுதுதல் டெயில்விண்டில் அடிப்படை பாணியைச் சேர்ப்பதன் மூலம் தலைப்புகளின் பாணிக்கான முறையை விளக்கியுள்ளது.