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

வகுப்புகள் மற்றும் அடையாளங்கள் உங்கள் CSS நீட்டிக்க உதவும்

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

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

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

வகுப்பு தேர்வாளர்கள்

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

p {color: # 0000ff; }
p.alert {color: # ff0000; }

இந்த பாணிகள் நீல நிறத்தில் (# 0000ff) அனைத்து பத்திகளுடைய நிறத்தையும் அமைக்கலாம், ஆனால் "எச்சரிக்கை" ஒரு வகுப்பு பண்புக்கூறுடன் கூடிய எந்தப் பத்தியும் அதற்குப் பதிலாக சிவப்பு (# ff0000) பாணியில் இருக்கும். வகுப்பு பண்புக்கூறு முதல் குறியீட்டு விதிமுறையை விட உயர்ந்த தன்மையைக் கொண்டிருப்பதால் இது ஒரு குறியீட்டு தேர்வுக்குழு மட்டுமே பயன்படுத்துகிறது.

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

இது சில HTML குறியாக்கத்தில் எவ்வாறு பயன்படுத்தப்படலாம் என்பதை இங்கே காணலாம்:

<ப>
இந்தப் பத்தி நீலத்தில் காட்டப்படும், இது பக்கத்திற்கு இயல்புநிலையாகும்.

<ப>
இந்த பத்தி நீலமாகவும் இருக்கும்.

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

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

.அல்லது {background-color: # ff0000;}

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

இந்த பத்தி சிவப்பு நிறத்தில் எழுதப்படும்.

இந்த h2 சிவப்பாகவும் இருக்கும்.

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

ஐடி தேர்வாளர்கள்

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

நீங்கள் இந்த நிகழ்வில் "நிகழ்வு" ஒரு ஐடி பண்பு கொடுக்க முடியும், பின்னர் நீங்கள் 1-பிக்சல் பரந்த கருப்பு எல்லைடன் அந்த பிரிவை கோடிட்டு விரும்பினால் இந்த மாதிரி ஒரு ஐடி குறியீடு எழுத:

#event {border: 1px திட # 000; }

ஐடி தேர்வாளர்கள் சவால் அவர்கள் ஒரு HTML ஆவணத்தில் மீண்டும் முடியாது. அவர்கள் தனித்துவமாக இருக்க வேண்டும் (உங்கள் தளத்தின் பல பக்கங்களில் அதே ஐடியைப் பயன்படுத்தலாம், ஆனால் ஒருமுறை ஒவ்வொரு HTML ஆவணத்தில்). நீங்கள் எல்லோருக்கும் இந்த எல்லை தேவை என்று 3 நிகழ்வுகள் இருந்தால், நீங்கள் அவர்களுக்கு "நிகழ்வு 1", "event2" மற்றும் "event3" மற்றும் பாணி ஒவ்வொரு ஐடி பண்புகளை கொடுக்க வேண்டும். எனவே, "நிகழ்வை" மேற்கூறிய வர்க்க பண்புக்கூறுகளைப் பயன்படுத்துவது மிகவும் எளிதானது, அனைவருக்கும் ஒரே நேரத்தில் பாணியாக இருக்கும்.

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

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

இந்த பண்புக்கூறு மதிப்பை நீங்கள் சேர்க்க வேண்டும், இதற்கு முன்னால் # குறியீடாக, இணைப்பைப் பற்றிய href பண்புக்கு இது பொருந்தும்:

இது இணைப்புதான்

கிளிக் அல்லது தொட்ட போது, ​​இந்த இணைப்பு இந்த ஐடி பண்பு கொண்ட பக்கத்தின் பகுதிக்கு செல்லும். பக்கத்தில் உள்ள உறுப்பு இந்த ஐடி மதிப்பைப் பயன்படுத்தினால், இணைப்பு எதுவும் செய்யாது.

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

ஜெனிபர் கிரைனின் அசல் கட்டுரை. 8/9/17 அன்று ஜெர்மி ஜாராரால் திருத்தப்பட்டது