படி 2: ஒரு தலைப்பைச் சேர்க்கவும்

அடுத்து, எதையாவது பயன்படுத்தி ஒரு தலைப்பைச் செருகவும்

” முதல் ”

' குறிச்சொற்கள். உதாரணமாக, '

” என்று ஒரு தலைப்பைச் சேர்க்கிறது.

படி 3: பட்டியலில் தரவைச் சேர்க்கவும்

பட்டியலின் வடிவத்தில் தரவைச் செருக, '' ஐப் பயன்படுத்தவும் <அது> 'குறிச்சொல்:

---

---

< div வர்க்கம் = 'செல்லப்பிராணி' >

< h1 > செல்ல பிராணிகளின் பட்டியல் < / h1 >

< அந்த > கோழி < / அந்த >

< அந்த > வாத்து < / அந்த >

< அந்த > நாய் < / அந்த >

< அந்த > பூனை < / அந்த >

< அந்த > முயல் < / அந்த >

< / div >

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

இப்போது, ​​பட்டியலை வடிவமைக்க CSS பிரிவை நோக்கி செல்லவும்.

படி 4: உடை '.பெட்-அனிமல்' உறுப்பு

அணுகவும் '

'ஒதுக்கப்பட்ட வகுப்பின் உதவியுடன் உறுப்பு' .செல்ல-விலங்கு ” மற்றும் பட்டியலிடப்பட்ட பண்புகளைப் பயன்படுத்தவும்:

.செல்ல-விலங்கு {

எல்லை : 2px புள்ளியிடப்பட்ட rgb ( 230 , பதினைந்து , பதினைந்து ) ;

விளிம்பு : 50px ;

பின்னணி நிறம் : rgb ( 252 , 239 , 169 ) ;

}

இங்கே:

• ' எல்லை 'உறுப்பைச் சுற்றியுள்ள எல்லையைக் குறிப்பிட சொத்து பயன்படுத்தப்படுகிறது.
• ' விளிம்பு ” உறுப்பு எல்லையைச் சுற்றியுள்ள இடத்தை வரையறுக்கிறது.
• ' பின்னணி நிறம் 'உறுப்பின் பின்புறத்தில் ஒரு நிறத்தை ஒதுக்குகிறது.

இதன் விளைவாக வரும் படம் மேலே உள்ள குறியீட்டின் வெளியீட்டைக் காட்டுகிறது:

படி 5: உடை சேர்க்கப்பட்ட பட்டியல் 'li'

இப்போது, ​​'' பட்டியலை அணுகவும் div 'கிளாஸ் கொண்ட கொள்கலன்' செல்ல-விலங்கு 'பயன்படுத்தி' .pet-animal > li ” மற்றும் கீழே குறிப்பிடப்பட்டுள்ள பண்புகளைப் பயன்படுத்தவும்:

.செல்ல-விலங்கு > அந்த {

தெரிவுநிலை : மறைக்கப்பட்டுள்ளது ;

ஒளிபுகாநிலை : 0.2 ;

மாற்றம் : தெரிவுநிலை 0வி , ஒளிபுகாநிலை 0.5வி நேரியல் ;

}

இங்கே:

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

படி 6: 'ஹவர்' சூடோ வகுப்பைப் பயன்படுத்தவும்

இப்போது, ​​விண்ணப்பிக்கவும் ' மிதவை பட்டியலில் உள்ள சொத்து:

.செல்ல-விலங்கு : மிதவை > அந்த {

தெரிவுநிலை : தெரியும் ;

ஒளிபுகாநிலை : ஒன்று ;

}

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

'' இல் மாற்றத்தை வெற்றிகரமாகப் பயன்படுத்தியிருப்பதைக் காணலாம். காட்சி ”சொத்து.

முடிவுரை

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