HTML இல் ஒரு ஒட்டும் உறுப்பு உருவாக்குவது எப்படி

இந்த வலைப்பதிவு CSS நிலைப் பண்பு மற்றும் HTML இல் ஒட்டும் உறுப்பை உருவாக்கும் முறையைப் பற்றி விவாதிக்கும்.

CSS நிலை சொத்து என்றால் என்ன?

CSS நிலைப் பண்பு HTML உறுப்புகளின் நிலைப்படுத்தல் முறையைக் குறிப்பிடுகிறது, இது ஒரு முழுமையான, ஒட்டும், புள்ளியியல், நிலையான, மரபுரிமை, உறவினர் அல்லது தொடக்கமாக இருக்கலாம்.

தொடரியல்

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

இப்போது, ​​HTML இல் ஒட்டும் கூறுகளை உருவாக்குவதற்கான செயல்முறையைப் பார்க்கலாம்.

CSS நிலை என்றால் என்ன: ஒட்டும்?

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

CSS ஒட்டும் நிலையின் கருத்தைப் புரிந்து கொள்ள எளிய உதாரணத்தைப் பார்ப்போம்.

எடுத்துக்காட்டு: HTML இல் ஒரு ஒட்டும் உறுப்பு உருவாக்குவது எப்படி?
HTML கோப்பில், தலைப்புக்கு

, பத்திக்கு

மற்றும்

என்ற வகுப்பின் பெயரைச் சேர்க்கவும். ஒட்டும் ”. பிறகு, உள்ளமைக்கப்பட்ட ஆர்டர் பட்டியலைக் கொண்ட

குறிச்சொல்

உடன்

சேர்க்கவும்.

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

HTML

< h2 > ஒட்டும் குறிப்புகள்: ஒட்டும் தனிமத்தின் விளைவைப் பார்க்கவும் < / h2 >
< ப > நிலை: ஒட்டும் < / ப >
< div வர்க்கம் = 'ஒட்டும்' > இது நான் செய்ய வேண்டிய பட்டியல்! < / div >
< ப >
< ol >
< அந்த > அழைப்பு மேலாளர் < / அந்த >
< அந்த > ஊழியர்களுடன் சந்திப்பு < / அந்த >
< அந்த > அறிக்கையை சமர்ப்பிக்கவும் < / அந்த >
< அந்த > மருத்துவரிடம் செல் < / அந்த >
< அந்த > விமானத்தை முன்பதிவு செய்யுங்கள் < / அந்த >
< அந்த > நடந்து செல்லுங்கள். < / அந்த >
< அந்த > மளிகைக்குச் செல்லுங்கள். < / அந்த >
< அந்த > தொலைக்காட்சியை பார் < / அந்த >
< அந்த > சில உரை. < / அந்த >
< அந்த > சில உரை. < / அந்த >
< அந்த > சில உரை. < / அந்த >
< அந்த > சில உரை. < / அந்த >
< அந்த > சில உரை. < / அந்த >
< அந்த > சில உரை. < / அந்த >
< அந்த > சில உரை. < / அந்த >
< அந்த > சில உரை. < / அந்த >
< அந்த > சில உரை. < / அந்த >
< அந்த > சில உரை. < / அந்த >
< அந்த > சில உரை. < / அந்த >
< அந்த > சில உரை. < / அந்த >
< அந்த > சில உரை. < / அந்த >
< அந்த > சில உரை. < / அந்த >
< அந்த > சில உரை. < / அந்த >
< அந்த > சில உரை. < / அந்த >
< அந்த > சில உரை. < / அந்த >
< அந்த > சில உரை. < / அந்த >
< அந்த > சில உரை. < / அந்த >
< அந்த > சில உரை. < / அந்த >
< அந்த > சில உரை. < / அந்த >
< அந்த > சில உரை. < / அந்த >
< / ol >
< / ப >

அடுத்து, ஸ்டிக்கி என பெயரிடப்பட்ட divக்கு ஸ்டைலை வழங்குவோம்:

• இங்கே,' .ஒட்டும் ” பாணி பண்புகள் பயன்படுத்தப்பட வேண்டிய வகுப்பைக் குறிக்கிறது.
• சுருள் அடைப்புக்குறிக்குள், '' நிலை 'சொத்து மதிப்பு' ஒட்டும் ”.
• ' மேல் ” என அமைக்கப்பட்டுள்ளது 0 ”.
• ' பின்னணி நிறம் ' இருக்கிறது ' #00154f ”.
• கொஞ்சம் கொடு' திணிப்பு 'டிவிக்கு அதன் மதிப்பை அமைப்பதன் மூலம்' 40px ”.
• ' எழுத்துரு அளவு 'என' 30px ”.
• ' நிறம் 'எழுத்துருக்கள்' என அமைக்கப்பட்டுள்ளது வெள்ளை ”.

CSS

.ஒட்டும் {
நிலை : ஒட்டும் ;
மேல் : 0 ;
பின்னணி நிறம் : #00154f ;
திணிப்பு : 40px ;
எழுத்துரு அளவு : 30px ;
நிறம் : வெள்ளை ;
}

வெளியீட்டைக் காண HTML கோப்பைச் சேமித்து உலாவியில் திறக்கவும்:



போனஸ் குறிப்பு

பயன்படுத்துவதன் மூலம் ' hsla() ” முறையில், நீங்கள் பின்வருமாறு சேர்க்கப்படும் ஒட்டும் உறுப்புக்கான வெளிப்படையான பின்னணியை அமைக்கலாம்:

பின்னணி - நிறம் : hsla ( 0 , 100 %, 90 %, 0.8 ) ;

வெளியீடு



CSS ஐ அமைப்பதன் மூலம் உறுப்பு குறிப்பிட்ட நிலைக்கு ஒட்டிக்கொண்டது இதுதான். நிலை 'சொத்து மதிப்பு' ஒட்டும் ”.

முடிவுரை

' ஒட்டும் ” CSS இல் உள்ள நிலை, உறுப்பு நிலையை உறவினர் மற்றும் நிலையானது இடையே மாறச் செய்கிறது. இதன் விளைவாக, சேர்க்கப்பட்ட ஒட்டும் உறுப்பு ஒரு ஒட்டும் தன்மையைப் போல செயல்படும் போது ஒரு குறிப்பிட்ட புள்ளியை அடையும் வரை சுருள் தொடர்புடையதாக இருக்கும். hsla() முறையைப் பயன்படுத்தி, சேர்க்கப்பட்ட ஒட்டும் உறுப்புகளின் வெளிப்படைத்தன்மை அளவையும் நீங்கள் சரிசெய்யலாம். எளிமையான மற்றும் ஒட்டும் வெளிப்படையான கூறுகளை உருவாக்குவது பற்றி இந்த வலைப்பதிவு உங்களுக்கு வழிகாட்டியது.