டெயில்விண்டில் விகிதாசார மற்றும் அட்டவணைப் புள்ளிவிவரங்களை எவ்வாறு பயன்படுத்துவது?

Teyilvintil Vikitacara Marrum Attavanaip Pullivivarankalai Evvaru Payanpatuttuvatu



டெயில்விண்ட் என்பது CSS கட்டமைப்பாகும், இது டெவலப்பர்களை திறமையான மற்றும் தகவமைப்பு வடிவமைப்பு தளவமைப்புகளை உருவாக்க அனுமதிக்கிறது. இது முன் வரையறுக்கப்பட்ட வகுப்புகளின் வரம்பைப் பயன்படுத்தி செய்யப்படுகிறது, இது உறுப்புகளின் நிலைப்பாடு மற்றும் உறுப்புகளின் பாணியைக் கட்டுப்படுத்த பயன்படுகிறது.

இருப்பினும், இந்த கட்டுரை விகிதாசார புள்ளிவிவரங்கள் மற்றும் அட்டவணை புள்ளிவிவரங்கள் ஆகிய இரண்டு குறிப்பிட்ட வகுப்புகளை விவரிக்கும். டெயில்விண்டில் உள்ள எண் மதிப்புகளை வடிவமைக்கவும், ஆவணத்தின் வடிவமைப்பை ஈர்க்கும் வகையில் எண் தரவுகளை ஒழுங்கமைக்கவும் பிரதிநிதித்துவப்படுத்தவும் இவை பயன்படுத்தப்படுகின்றன.

இந்தக் கட்டுரையானது டெயில்விண்ட் CSS இல் உள்ள விகிதாசார மற்றும் அட்டவணைப் புள்ளிவிவரங்களை பின்வரும் அவுட்லைனைப் பயன்படுத்தி விவரிக்கும்:







டெயில்விண்ட் CSS இல் விகிதாசார புள்ளிவிவரங்களை எவ்வாறு பயன்படுத்துவது?

விகிதாசார எண்கள் வகுப்பானது, ஒவ்வொரு எண்ணுக்கும் ஒரே அகலம் இல்லாத ஒரு மாநாட்டை உறுப்புக்கு ஒதுக்கும்.



தொடரியல்



டெயில்விண்டில் விகிதாசார எண்களைப் பயன்படுத்துவதற்கான தொடரியல் பின்வருமாறு:





< div வர்க்கம் = 'விகிதாசார எண்கள்' >

< div / >

மேலே வழங்கப்பட்ட தொடரியலில், ' விகிதாசார-எண்கள் விகிதாசார எண்களைப் பயன்படுத்த உறுப்புக்கு வகுப்பு வழங்கப்பட வேண்டும்.

விகிதாசார புள்ளிவிவரங்களின் நடைமுறை உதாரணத்தைப் பார்ப்போம்.



கீழே கொடுக்கப்பட்டுள்ள குறியீட்டில், இரண்டு ' 'கூறுகள் ஒரு' இல் அடங்கியுள்ளன div ” விகிதாசார எண்ணிக்கை வகுப்பைப் பயன்படுத்தும் உறுப்பு:

< div வர்க்கம் = 'விகிதாசார-எண்கள் உரை-மையம் bg-slate-200 text-xl' >
< > 121212 < / >
< > 838383 < / >
< / div >

மேலே கொடுக்கப்பட்ட குறியீட்டின் விளக்கம் பின்வருமாறு:

  • ' div 'உறுப்பு' பயன்படுத்துகிறது விகிதாசார-எண்கள் 'எண்களுக்கு விகிதாசார எண்ணிக்கை சொத்தை பொருந்தும் வர்க்கம்.
  • ' உரை மையம் 'வகுப்பு உரையை உறுப்பு மையத்தில் நிலைநிறுத்துகிறது.
  • ' bg-{color}-{number} 'உறுப்பின் பின்னணி நிறத்திற்கு வர்க்கம் பொறுப்பு.
  • ' text-xl ” class ஆனது உரைக்கு கூடுதல் பெரிய எழுத்துரு அளவை வழங்குகிறது.
  • அடுத்து, இரண்டு' ” உறுப்புகள் வெவ்வேறு எண்களைக் கொண்டதாக உருவாக்கப்படுகின்றன.

வெளியீடு

இரண்டாவது எண்களில் இருப்பதை வெளியீட்டில் காணலாம். ” உறுப்பு முதல் ஒன்றை விட சற்று பெரிய அகலத்தைக் கொண்டுள்ளது. இது விகிதாசார புள்ளிவிவரங்களின் வகுப்பின் காரணமாகும்:

டெயில்விண்ட் CSS இல் அட்டவணைப் புள்ளிவிவரங்களை எவ்வாறு பயன்படுத்துவது?

டெயில்விண்டில் உள்ள அட்டவணை புள்ளிவிவரங்கள், ஒவ்வொரு எண்ணும் ஒரே அகல அளவைக் கொண்ட ஒரு உறுப்புக்கு மாநாட்டை ஒதுக்குகின்றன. இது எண்களின் சமச்சீர் அட்டவணை போன்ற பிரதிநிதித்துவத்தை உருவாக்குகிறது.

தொடரியல்

அட்டவணை புள்ளிவிவரங்களைப் பயன்படுத்துவதற்கான தொடரியல் பின்வருமாறு:

< div வர்க்கம் = 'அட்டவணை எண்கள்' >

< div / >

மேலே வழங்கப்பட்ட தொடரியலில், ' அட்டவணை எண்கள் அட்டவணை புள்ளிவிவரங்களைப் பயன்படுத்த உறுப்புக்கு வகுப்பு வழங்கப்படுகிறது.

எப்படி என்று பார்ப்போம் ' அட்டவணை எண்கள் HTML ஆவணத்தில் உள்ள எண் மதிப்புகளைப் பாதிக்கும். இந்த ஆர்ப்பாட்டத்திற்கு, இரண்டு ' 'எண் மதிப்புகள் உருவாக்கப்பட்டு, அதில் அடங்கியுள்ளன' div அட்டவணை புள்ளிவிவரங்கள் வகுப்பைப் பயன்படுத்தும் உறுப்பு:

< div வர்க்கம் = ' அட்டவணை-எண்கள் உரை-மையம் bg-slate-200 text-xl' >
< > 121212 < / >
< > 838383 < / >
< / div >

மேலே உள்ள குறியீட்டில், ' அட்டவணை எண்கள் 'வகுப்பு வழங்கப்படுகிறது' div 'அட்டவணை உருவங்களின் பாணியை குழந்தைக்கு ஒதுக்கும் உறுப்பு' 'கூறுகள்.

வெளியீடு:

இரண்டு உறுப்புகளிலும் உள்ள எண் மதிப்புகள், இலக்கங்களின் ஒரே அகல அளவுகள் காரணமாக சரியாக சீரமைக்கப்பட்டிருப்பதை மேலே உள்ள வெளியீட்டில் காணலாம்.

போனஸ் தகவல்: டெயில்விண்ட் CSS இல் விகிதாசார மற்றும் அட்டவணை புள்ளிவிவரங்களுக்கு இடையே உள்ள வேறுபாடு

எண் மதிப்புகளில் அட்டவணை மற்றும் விகிதாசார எண்களின் வகுப்புகளின் விளைவை வேறுபடுத்தும் ஒரு ஆர்ப்பாட்டத்தைப் பார்ப்போம். இந்த ஆர்ப்பாட்டத்தில், உறுப்புகள் இயல்புநிலையாக விகிதாசார எண்கள் வகுப்பிற்கு ஒதுக்கப்படும். அடுத்து, மிதவை நிலையைப் பயன்படுத்தி, உறுப்புகளுக்கு அட்டவணை புள்ளிவிவரங்கள் வகுப்பு ஒதுக்கப்படும்:

< div வர்க்கம் = 'விகிதாசார-எண்கள் உரை-மையம் bg-slate-200 text-xl மிதவை: அட்டவணை-எண்கள்' >
< > 121212 < / >
< > 838383 < / >
< / div >

மேலே உள்ள குறியீட்டில் இதை காணலாம் ' div 'உறுப்பு' உடன் வழங்கப்படுகிறது விகிதாசார-எண்கள் ”, இது எண் மதிப்புகள் பின்பற்றப்படும் இயல்புநிலை மரபாக இருக்கும்.

இதேபோல், ' மிதவை:அட்டவணை-எண்கள் 'வகுப்பு', 'div' உறுப்பு மீது பயனர் மவுஸ் கர்சரை நகர்த்தும்போது, ​​எண் மதிப்புகள் அட்டவணை புள்ளிவிவரங்களின் மரபைப் பின்பற்றும்.

வெளியீடு

கொடுக்கப்பட்ட வெளியீட்டில், பயனர் உறுப்பு மீது சுட்டியை நகர்த்தும்போது எண் மதிப்புகளின் அகலம் மாறுகிறது. இது டெயில்விண்டில் உள்ள விகிதாசார மற்றும் அட்டவணை புள்ளிவிவரங்களுக்கு இடையேயான காட்சி வேறுபாட்டை வழங்குகிறது:

இது டெயில்விண்டில் உள்ள விகிதாசார மற்றும் அட்டவணை புள்ளிவிவரங்களைப் பற்றியது.

முடிவுரை

டெயில்விண்டில் விகிதாசார எண்களைப் பயன்படுத்த, ' விகிதாசார-எண்கள் 'வகுப்பு பயன்படுத்தப்படுகிறது. விகிதாசார புள்ளிவிவரங்கள் ஒவ்வொரு எண் மதிப்பும் வெவ்வேறு அகல அளவைக் கொண்டிருக்கும் மாநாட்டைப் பயன்படுத்துகின்றன. டெயில்விண்டில் அட்டவணை புள்ளிவிவரங்களைப் பயன்படுத்த, ' அட்டவணை எண்கள் 'வகுப்பு பயன்படுத்தப்படுகிறது. அட்டவணை புள்ளிவிவரங்கள் ஒவ்வொரு எண் மதிப்பும் ஒரே அகல அளவைக் கொண்டிருக்கும் மாநாட்டைப் பயன்படுத்துகின்றன. இந்தக் கட்டுரை டெயில்விண்டில் விகிதாசார மற்றும் அட்டவணைப் புள்ளிவிவரங்களைப் பயன்படுத்துவதற்கான செயல்முறையை வழங்கியுள்ளது.