டெயில்விண்ட் Css இல் மூலைவிட்ட பின்னங்களை எவ்வாறு பயன்படுத்துவது

டெயில்விண்டில் மூலைவிட்ட பின்னங்களை எவ்வாறு பயன்படுத்துவது என்பதை இந்தக் கட்டுரை விளக்குகிறது.

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

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

தொடரியல்

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

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

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

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

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

  'உறுப்புகள் உருவாக்கப்படுகின்றன, அங்கு இரண்டாவது வழங்கப்படுகிறது' மூலைவிட்ட பின்னங்கள் ' வர்க்கம்.

வெளியீடு:

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

முறிவுப் புள்ளிகளுடன் மூலைவிட்ட பின்ன வகுப்பைப் பயன்படுத்துதல்

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

பயன்படுத்த ' மூலைவிட்ட பின்னங்கள் ” டெயில்விண்டில் பிரேக் பாயின்ட் கொண்ட வகுப்பு, பின்வரும் தொடரியல் பயன்படுத்தப்படுகிறது:

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

பிரேக் பாயின்ட்களைப் பயன்படுத்துவோம் ' மூலைவிட்ட பின்னங்கள் அவற்றின் பயன்பாட்டை நடைமுறையில் புரிந்துகொள்ள வகுப்பு:

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

வெளியீடு

நீங்கள் வெளியீட்டில் பார்க்க முடியும் என, பின்ன எண்கள் மூலைவிட்ட பின்னம் எழுத்துருவுடன் வழங்கப்படும் போது ' எம்டி 'பிரேக் பாயிண்ட் அடைந்தது:

டெயில்விண்ட் மாநிலங்களுடன் மூலைவிட்ட பின்ன வகுப்பைப் பயன்படுத்துதல்

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

டெயில்விண்ட் வழங்கிய இயல்புநிலை பின்வருமாறு:

• மிதவை: பயனர் கர்சரை உறுப்பு மீது வட்டமிடும்போது.
• கவனம்: பயனர் ஒரு உறுப்புக்கு செல்லும்போது அதன் மீது கவனம் செலுத்தும் போது.
• செயலில்: பயனர் ஒரு உறுப்பைக் கிளிக் செய்வதன் மூலம் அதைச் செயல்படுத்தும்போது.
• முடக்கு: ஒரு உறுப்பைச் செயல்படுத்த பயனர் அனுமதிக்கப்படாதபோது.

கீழே உள்ள ஆர்ப்பாட்டம் '' ஐப் பயன்படுத்துவதற்கான நடைமுறை உதாரணத்தை வழங்குகிறது. மூலைவிட்ட பின்னங்கள் 'வகுப்புடன்' மிதவை ” டெயில்விண்ட் மாநிலம்:

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

வெளியீடு

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

டெயில்விண்ட் CSS இல் மூலைவிட்ட பின்ன வகுப்பைப் பயன்படுத்துவது பற்றியது.

முடிவுரை

டெயில்விண்ட் CSS இல் மூலைவிட்ட பின்னங்களைப் பயன்படுத்த, ' மூலைவிட்ட பின்னம் ' வர்க்கம். இந்த வகுப்பானது எண் மற்றும் வகுப்பினை ஒரு சாய்வால் பிரித்து சிறியதாக மாற்றும். டெயில்விண்டில் உள்ள இயல்புநிலை முறிவுப் புள்ளிகள் மற்றும் நிலைகளுடன் கூடிய “மூலைவிட்ட பின்னங்கள்” வகுப்பையும் பயனர்கள் பயன்படுத்தலாம். இந்தக் கட்டுரை டெயில்விண்டில் மூலைவிட்ட பின்னங்களைப் பயன்படுத்துவதற்கான செயல்முறையை வழங்குகிறது.