CSS பட்டியல்களை எவ்வாறு சிறப்பாகப் பயன்படுத்துவது?

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

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



எனவே பின்னர் தொடங்குவோம்,



CSS பட்டியல்கள்

CSS பண்புகள்

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

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

இங்கே பொதுவாக பயன்படுத்தப்படும் பட்டியல்: பட்டியல்-பாணி-வகை மற்றும் பட்டியல்-பாணி-நிலை. இது கீழே விளக்கப்பட்டுள்ளது



CSS பட்டியல்களில் இந்த கட்டுரையுடன் நகரும்

பட்டியல்-பாணி வகை சொத்து

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

வரிசைப்படுத்தப்படாத பட்டியல்களைக் குறிக்கும் அட்டவணைக்கு கீழே:



மதிப்பு விளக்கம்
எதுவுமில்லை என்.ஏ.
வட்டு இது வட்டத்தில் நிரப்பப்பட்டுள்ளது. (இயல்புநிலை ஒன்று)
வட்டம் இது ஒரு வெற்று வட்டம்.
சதுரம் இது சதுரத்தில் நிரப்பப்பட்டுள்ளது.

ஆர்டர் செய்யப்பட்ட பட்டியல்களைக் குறிக்கும் அட்டவணைக்கு கீழே:

மதிப்பு விளக்கம் உதாரணமாக
தசம அது ஒரு எண்1,4,3
தசம முன்னணி பூஜ்ஜியம் உண்மையான எண்ணுக்கு முன் 001, 04, 03
கீழ்-ஆல்பா இது சிறிய எழுத்துக்கள்.ஏ பி சி டி
மேல்-ஆல்பா இது பெரிய எழுத்துக்கள்.ஏ பி சி டி
கீழ்-ரோமன் இது சிறிய ரோமானிய எண்கள்.i, ii, iii, iv, v
மேல்-ரோமன் இது பெரிய ரோமானிய எண்கள்.I, II, III, IV, V.
கீழ்-கிரேக்கம் மார்க்கர் குறைந்த கிரேக்கத்தில் உள்ளதுஆல்பா, காமா
லோயர்-லத்தீன் மார்க்கர் கீழ்-லத்தீன் மொழியில் உள்ளதுஏ பி சி டி
மேல்-லத்தீன் மார்க்கர் மேல்-லத்தீன் மொழியில் உள்ளதுஏ பி சி டி

CSS பட்டியல்களில் இந்த கட்டுரையுடன் நகரும்

CSS பட்டியல்கள்: மாதிரி திட்டம்

 
  • ஜாவா
  • பைதான்
  • கோண
  • ஜாவா
  • பைதான்
  • கோண
  1. ஜாவா
  2. பைதான்
  3. கோண
  1. ஜாவா
  2. பைதான்
  3. கோண
  1. ஜாவா
  2. பைதான்
  3. கோண

வெளியீடு

ஜாவாவில் ஒரு நிரலை நிறுத்தவும்

வெளியீடு - CSS பட்டியல்கள் - எடுரேகா

CSS பட்டியல்களில் இந்த கட்டுரையுடன் நகரும்

பட்டியல்-பாணி-நிலை சொத்து

மார்க்கர் மதிப்புகள் பட்டியல்-பாணி-நிலை சொத்தில்

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

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

உதாரணமாக:

 
  • கணிதம்
  • சமூக அறிவியல்
  • இயற்பியல்
  • கணிதம்
  • சமூக அறிவியல்
  • இயற்பியல்
  1. கணிதம்
  2. சமூக அறிவியல்
  3. இயற்பியல்
  1. கணிதம்
  2. சமூக அறிவியல்
  3. இயற்பியல்

வெளியீடு

இது CSS பட்டியல்களில் இந்த கட்டுரையின் முடிவுக்கு நம்மை கொண்டு வருகிறது.

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

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