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

CSS மூலம் நாம் எப்படி உரை வழக்குகளை மாற்றலாம் என்பதை இந்த இடுகை உங்களுக்குக் கற்பிக்கும். எனவே, தொடங்குவோம்!

CSS ஐப் பயன்படுத்தி உரையை பெரிய எழுத்து மற்றும் சிறிய எழுத்துக்கள் செய்வது எப்படி?

CSS இல், ' உரை-மாற்றம் 'உரையின் மூலதனத்தை சொத்து கட்டுப்படுத்துகிறது. உரையை பெரிய எழுத்து அல்லது சிறிய எழுத்தாக மாற்றவும் இது பயன்படுகிறது.

உரை-மாற்றம் சொத்து மதிப்புகள்

CSS உரை-மாற்றப் பண்புகளின் சாத்தியமான மதிப்புகள் கீழே பட்டியலிடப்பட்டுள்ளன:

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

கீழே உள்ள உதாரணத்தை பகுப்பாய்வு செய்யுங்கள்!

எடுத்துக்காட்டு: உரையை பெரிய எழுத்து மற்றும் சிறிய எழுத்துக்களாக மாற்றுதல்

முதலில், வகுப்பின் பெயருடன் ஒரு div உறுப்பைச் சேர்க்கவும் ' பெட்டி ”. உடலின் உள்ளே,

,

மற்றும்

ஆகிய மூன்று தலைப்புக் குறிச்சொற்களைச் சேர்க்கவும், அங்கு

தலைப்பின் உரை அனைத்தும் பெரிய எழுத்திலும்,

சிற்றெழுத்திலும், மூன்றாவது சிறிய எழுத்திலும் இருக்கும்.

கீழே HTML குறியீடு உள்ளது:

< div வர்க்கம் = 'பெட்டி' >
< h1 > சிறிய எழுத்து: LINUXHINTக்கு வரவேற்கிறோம் h1 >
< h2 > பெரிய எழுத்து: linuxhint க்கு வரவேற்கிறோம் h2 >
< h3 > பெரிய எழுத்து: linuxhint க்கு வரவேற்கிறோம் h3 >
div >

ஸ்டைல் ​​பாக்ஸ் div

.பெட்டி {
உயரம்: 200px;
அகலம்: 80 % ;
எல்லை: 4px திட #e4cfcf;
பின்னணி நிறம்: கேடட்ப்ளூ;
விளிம்பு: 1px தானியங்கு;
திணிப்பு: 10px;
}

மேலே உள்ள HTML கோப்பில் உருவாக்கப்பட்ட div இப்போது கீழே விவரிக்கப்பட்டுள்ள CSS பண்புகளுடன் வடிவமைக்கப்பட்டுள்ளது:

• • ' உயரம் 'டிவியின் உயரத்தை அமைக்க பயன்படுத்தப்படுகிறது.
  • ' அகலம் 'டிவியின் அகலத்தை அமைப்பதற்குப் பயன்படுத்தப்படுகிறது.
  • ' எல்லை 4px அகலம், திடமான வரி வகை மற்றும் #e4cfcf வண்ணம் கொண்ட உறுப்பைச் சுற்றி பார்டரைப் பயன்படுத்த சொத்து பயன்படுத்தப்படுகிறது.
  • ' பின்னணி நிறம் 'உறுப்பின் பின்னணி நிறத்தைக் குறிப்பிடுகிறது.
  • ' விளிம்பு 'சொத்து உறுப்புகளின் ஒவ்வொரு பக்கத்திலும் இடத்தை சரிசெய்கிறது.
  • ' திணிப்பு 'டிவ் உறுப்பின் உள்ளடக்கத்தைச் சுற்றி அல்லது தனிமத்தின் எல்லைக்குள் இடத்தை உருவாக்க சொத்து பயன்படுத்தப்படுகிறது.

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

உறுப்பு பண்பு உரை-மாற்றத்துடன் பயன்படுத்தப்படும் மதிப்புடன் '' சிறிய எழுத்து ”:

h1 {
உரை-மாற்றம்: சிறிய எழுத்து;
}

உறுப்பு 'உருமாற்றம் பண்புடன்' மதிப்புடன் பயன்படுத்தப்படுகிறது பெரிய எழுத்து ”:

h2 {
உரை-மாற்றம்: பெரிய எழுத்து;
}

உறுப்புக்கு, டெக்ஸ்ட் டிரான்ஸ்ஃபார்ம் சொத்தின் மதிப்பு “ என அமைக்கப்பட்டுள்ளது. மூலதனமாக்கு ”:

h3 {
உரை-மாற்றம்: தலையெழுத்து;
}

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

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

முடிவுரை

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