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

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

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





CSS இல் போலி உறுப்புகளை எவ்வாறு பயன்படுத்துவது என்பது இங்கே.



வார்த்தையில் வரிகளை எவ்வாறு சேர்ப்பது

பொதுவான போலி கூறுகள்

ஒரு வலை உருவாக்குநரின் வாழ்க்கையை எளிதாக்க போலி உறுப்புகளின் விரிவான பட்டியல் உள்ளது. இந்த போலி உறுப்புகளில் சில:





  • முன்பு
  • பிறகு
  • பின்னணி
  • முதல் வரி
  • முதல் எழுத்து

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

போலி உறுப்புகள் அமைப்பு உதாரணம்


selector::pseudo-element{
/* css code */
}

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



போலி உறுப்புகளுக்கு முன்னும் பின்னும் பட்டியலில் மிகவும் பிரபலமானவை, அவற்றைப் பயன்படுத்த பல நடைமுறை வழிகள் உள்ளன-ஏன் என்று பார்ப்பது கடினம் அல்ல.

CSS இல் போலி-உறுப்பைப் பயன்படுத்துதல்

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



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

ஒரே பிரச்சனை என்னவென்றால், படமும் உரையும் ஒரே நிலையை ஆக்கிரமிப்பதால் உரையும் ஓரளவு வெளிப்படையாக மாறும்.



இந்த சிக்கலை தீர்க்க சில பயனுள்ள வழிகளில் ஒன்று போலி உறுப்பைப் பயன்படுத்துவதாகும்.

போலி உறுப்பு முன் உதாரணத்தைப் பயன்படுத்துதல்


.landingPage{
/* Arranges the text on the image overlay */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/*sets the page to adjust to different screen sizes*/
height: 100vh;
}
.landingPage::before{
content:'';
/*imports an image*/
background: url(https://source.unsplash.com/_1EYIHRG014/1600x900)
no-repeat center/cover;
/*places an overlay on top of the image*/
opacity: 0.4;
/*makes the image visible*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

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





This is the result of using the before pseudo-element
to overlay and image with readable text.


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

CSS இல் போலி உறுப்புக்குப் பிறகு பயன்படுத்துதல்

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

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

போலி-உறுப்புக்குப் பிறகு உதாரணத்தைப் பயன்படுத்துதல்


.required::after{
content: '*';
color: red;
}

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

அமேசான் விருப்பப் பட்டியலை பெயரால் தேடுங்கள்

உள்ளடக்க சொத்து

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

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

இப்போது நீங்கள் CSS இல் போலி உறுப்புகளைப் பயன்படுத்தலாம்

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

பகிர் பகிர் ட்வீட் மின்னஞ்சல் 10 எளிய CSS குறியீடு உதாரணங்கள் நீங்கள் 10 நிமிடங்களில் கற்றுக்கொள்ளலாம்

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

அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள்
  • நிரலாக்க
  • வலை வடிவமைப்பு
  • CSS
எழுத்தாளர் பற்றி கதீஷா கீன்(21 கட்டுரைகள் வெளியிடப்பட்டன)

கதீஷா கீன் ஒரு முழு அடுக்கு மென்பொருள் டெவலப்பர் மற்றும் தொழில்நுட்ப/தொழில்நுட்ப எழுத்தாளர். மிகவும் சிக்கலான சில தொழில்நுட்பக் கருத்துகளை எளிமையாக்கும் தனித்துவமான திறமை அவளிடம் உள்ளது; எந்தவொரு தொழில்நுட்ப புதியவராலும் எளிதில் புரிந்துகொள்ளக்கூடிய பொருள் உற்பத்தி. அவர் எழுதுவது, சுவாரஸ்யமான மென்பொருளை உருவாக்குவது மற்றும் உலகம் முழுவதும் (ஆவணப்படங்கள் மூலம்) பயணம் செய்வதில் ஆர்வம் கொண்டவர்.

கதீஷா கீனிடமிருந்து மேலும்

எங்கள் செய்திமடலுக்கு குழுசேரவும்

தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!

குழுசேர இங்கே சொடுக்கவும்