நீங்கள் உறுப்புக்கு ஒரு ஒற்றை CSS வகுப்புக்கு மட்டும் அல்ல.
விழுத்தொடர் நடைதாள்கள் (CSS) நீங்கள் அந்த உறுப்புக்கு பொருந்துகின்ற பண்புகளை கவனிப்பதன் மூலம் ஒரு உறுப்பு தோற்றத்தை வரையறுக்க அனுமதிக்கிறது. இந்த பண்புக்கூறுகள் ஒன்று அல்லது ஐடி அல்லது ஒரு வர்க்கமாகவும், அனைத்து பண்புக்கூறுகளைப் போலவும், அவை இணைக்கப்பட்டிருக்கும் உறுப்புகளுக்கு பயனுள்ள தகவலை சேர்க்கலாம். நீங்கள் ஒரு உறுப்பு சேர்க்க எந்த பண்பு பொறுத்து, நீங்கள் அந்த உறுப்பு மற்றும் முழு வலைத்தளத்தில் தோற்றத்தை உணர மற்றும் உணர தேவையான தேவையான காட்சி பாணியை விண்ணப்பிக்க ஒரு CSS தேர்வுக்குழு எழுத முடியும்.
ஐடிகள் அல்லது வகுப்புகள் CSS விதிமுறைகளுடன் அவற்றைக் கவனித்துக்கொள்வதற்காக வேலை செய்யும் போது, நவீன வலை வடிவமைப்பு முறைகள், ஐடிகளில் வகுப்புகளுக்கு ஆதரவாக உள்ளன, ஏனென்றால் அவை குறைவாக குறிப்பிட்டதாகவும், ஒட்டுமொத்தமாக வேலை செய்ய எளிதாகவும் உள்ளன. ஆமாம், ID களைப் பயன்படுத்தும் பல தளங்களைக் கண்டுபிடிப்பீர்கள், ஆனால் அந்தக் கற்பிதங்கள் கடந்த காலத்தில் இருந்ததைவிட மிகக் குறைவாகவே பயன்படுத்தப்பட்டு வருகின்றன, அதே நேரத்தில் வகுப்புகள் நவீன வலைப்பக்கங்களை எடுத்துக்கொள்கின்றன.
CSS இல் ஒற்றை அல்லது பல வகுப்புகள்?
பெரும்பாலான சந்தர்ப்பங்களில் நீங்கள் ஒரு உறுப்புக்கு ஒரு ஒற்றை வகுப்பு பண்பு ஒதுக்க வேண்டும், ஆனால் நீங்கள் உண்மையில் நீங்கள் ID கள் உள்ளன ஒரு வர்க்கம் அவர்கள் மட்டுமே வரையறுக்கப்படவில்லை. ஒரு உறுப்பு மட்டும் ஒரு ஐடி பண்புக்கூறாக இருக்க முடியும், நீங்கள் முற்றிலும் ஒரு உறுப்பு பல வகுப்புகள் கொடுக்க முடியும், சில சந்தர்ப்பங்களில், அவ்வாறு செய்ய உங்கள் பக்கம் பாணி மற்றும் மிகவும் நெகிழ்வான எளிதாக செய்யும்!
நீங்கள் பல உறுப்புகளை ஒரு உறுப்புக்கு ஒதுக்க வேண்டும் என்றால், நீங்கள் கூடுதல் வகுப்புகளை சேர்க்கலாம் மற்றும் உங்கள் கற்பிதத்தில் ஒரு இடத்தோடு பிரிக்கலாம்.
உதாரணமாக, இந்த பத்தியில் மூன்று வகுப்புகள் உள்ளன:
pullquote featured left "> இந்த பத்தியின் உரை ஆகும்
இது பின்வரும் குறியீட்டு குறியீட்டைப் பத்தியில் குறிக்கிறது:
- pullquote
- சிறப்பு
- இடது
இந்த வர்க்க மதிப்புகள் ஒவ்வொன்றிற்கும் இடையில் இடைவெளிகளைக் கவனிக்கவும். அந்த இடைவெளிகள் வித்தியாசமான, தனி வகுப்புகளாக அமைத்துக் கொள்கின்றன. வர்க்கப் பெயர்கள் அவற்றில் இடைவெளிகளால் இருக்க முடியாது, அதனால் அவற்றை தனி வகுப்புகளாக அமைக்கலாம்.
எடுத்துக்காட்டுக்கு, ஒரு இடைவெளியில் நீங்கள் "இழுவை-சிறப்பு-இடது" என்பதைப் பயன்படுத்தினால், அது ஒரு வர்க்க மதிப்பாகும், ஆனால் மேற்கூறிய, இந்த மூன்று சொற்கள் இடைவெளியுடன் பிரிக்கப்பட்டிருக்கும், அவற்றை தனி மதிப்புகளாக அமைக்கிறது. உங்கள் வலைப்பக்கங்களில் எந்த வகுப்பு மதிப்புகள் பயன்படுத்தப்பட வேண்டும் என்பதை நீங்கள் தீர்மானிக்கும்போது இந்த கருத்தை புரிந்துகொள்வது முக்கியம்.
நீங்கள் HTML இல் உங்கள் வகுப்பு மதிப்புகளை வைத்திருந்தால், உங்கள் CSS இல் இந்த வகுப்புகளாக ஒதுக்கலாம் மற்றும் நீங்கள் சேர்க்க விரும்பும் பாணிகளைப் பயன்படுத்தலாம். உதாரணத்திற்கு.
. pullquote {...}
.featured {...}
p.left {...}
இந்த எடுத்துக்காட்டுகளில், CSS அறிவிப்புகள் மற்றும் மதிப்புகள் ஜோடிகள் சுருள் ப்ரேஸ் உள்ளே இருக்கும், அந்த பாணிகள் சரியான தேர்வுக்குழு பயன்படுத்தப்படும் எப்படி.
குறிப்பு - நீங்கள் ஒரு குறிப்பிட்ட உறுப்புக்கு ஒரு வகுப்பை அமைக்கினால் (உதாரணமாக, p.left), நீங்கள் இன்னும் வகுப்புகளின் பட்டியலின் பகுதியாக அதைப் பயன்படுத்தலாம்; எனினும், இது CSS இல் குறிப்பிடப்பட்டுள்ள அந்த உறுப்புகளை மட்டுமே பாதிக்கும் என்பதை அறிந்திருங்கள். வேறு வார்த்தைகளில் கூறுவதானால், p.left பாணி இந்த வர்க்கத்துடன் பத்திகளுக்கு மட்டுமே பொருந்துகிறது, ஏனெனில் உங்கள் தேர்வாளர் உண்மையில் "இடது" என்ற வர்க்க மதிப்புடன் கூடிய பத்திகளுக்கு அது பொருந்தும் என்று கூறுகிறார். மாறாக, எடுத்துக்காட்டாக, மற்ற இரண்டு தேர்வாளர்கள் ஒரு குறிப்பிட்ட உறுப்பு குறிப்பிட வேண்டாம், எனவே அவர்கள் அந்த வர்க்க மதிப்புகள் பயன்படுத்தும் எந்த உறுப்பு விண்ணப்பிக்க வேண்டும்.
பல வகுப்புகளின் நன்மைகள்
பல வகுப்புகள், அந்த உறுப்புக்கு ஒரு முழுமையான புதிய பாணியை உருவாக்காமல் தனித்த சிறப்பு அம்சங்களை எளிதாகச் சேர்க்கலாம்.
உதாரணமாக, நீங்கள் இடது அல்லது விரைவாக கூறுகளை மிதக்க திறன் வேண்டும். நீங்கள் இரண்டு வகுப்புகளை இடது பக்கமாகவும் வலது பக்கமாகவும் எழுதுவீர்கள்: இடது; மற்றும் மிதவை: சரி; அவற்றில். பின்னர், நீங்கள் ஒரு உறுப்பு இருந்திருந்தால் நீங்கள் இடது மிதக்க வேண்டும், நீங்கள் வகுப்பை "இடது" அதன் வர்க்க பட்டியலில் சேர்க்க வேண்டும்.
எனினும், இங்கே நடக்க ஒரு நல்ல வரி உள்ளது. வலைத் தரநிலைகள் பாணி மற்றும் கட்டமைப்பு ஆகியவற்றை பிரிப்பதற்கு உத்தரவாதம் என்பதை நினைவில் கொள்ளுங்கள். பாணி CSS இல் இருக்கும் போது அமைப்பு HTML வழியாக கையாளப்படுகிறது.
உங்களுடைய HTML ஆவணம், "சிவப்பு" அல்லது "இடது" போன்ற வர்க்கப் பெயர்களைக் கொண்டிருக்கும் உறுப்புகளால் நிரப்பப்பட்டிருந்தால், உறுப்புகள் என்னவெல்லாம் காட்ட வேண்டும் என்பதைக் கூறுங்கள், அவை கட்டமைப்பு மற்றும் பாணி இடையேயான கோட்டை கடந்து செல்கின்றன. இந்த காரணத்திற்காக என் அல்லாத சொற்பொருள் வர்க்க பெயர்களை நான் குறைக்க முயற்சிக்கிறேன்.
பல வகுப்புகள், செமண்டிக்ஸ், மற்றும் ஜாவாஸ்கிரிப்ட்
பல வகுப்புகளைப் பயன்படுத்துவதற்கான மற்றொரு நன்மை, அது உங்களுக்கு அதிகமான ஊடாடும் வாய்ப்புகளை வழங்குகிறது.
ஆரம்ப வகுப்புகளில் எந்தவொரு பகுதியையும் நீக்கிவிடாமல் ஜாவாஸ்கிரிப்ட் பயன்படுத்தி இருக்கும் உறுப்புகளுக்கு புதிய வகுப்புகள் விண்ணப்பிக்கலாம். நீங்கள் உறுப்புகளின் சொற்பொருள்களை வரையறுக்க வகுப்புகளைப் பயன்படுத்தலாம். இதன் அர்த்தம் என்ன அர்த்தம் என்பதை வரையறுக்க கூடுதல் வகுப்புகள் சேர்க்க முடியும். மைக்ரோ படிவங்கள் எவ்வாறு செயல்படுகின்றன.
பல வகுப்புகள் குறைபாடுகள்
உங்கள் கூறுகளை பல வகுப்புகள் பயன்படுத்தி மிகப்பெரிய குறைபாடு அதை பார்க்க மற்றும் நிர்வகிக்க ஒரு பிட் திறனற்ற செய்ய முடியும். ஒரு பாணியை எந்த பாணியை பாதிக்கிறீர்கள் என்பதை தீர்மானிக்க கடினமாக இருக்கலாம், எந்த ஸ்கிரிப்டும் அதை பாதிக்கிறதா எனக் கண்டறிவது கடினம். பூட்ஸ்டார்ப் போன்ற பல கட்டமைப்புகள் இன்று பல வகுப்புகளுடன் கூடிய உறுப்புகளை பயன்படுத்துகின்றன. நீங்கள் கவனமாக இல்லாவிட்டால், அந்த குறியீட்டை கையில் இருந்து வெளியேற்றுவது மற்றும் கடினமாக உழைப்பது கடினமானது.
நீங்கள் பல வகுப்புகளைப் பயன்படுத்தும் போது, நீங்கள் இதை விரும்பவில்லை எனில், ஒரு வகுப்பிற்கான மற்றொரு பாணியை மேலோட்டமாகக் கொண்டிருக்கும் பாதிப்பை நீங்கள் நடத்துகிறீர்கள். இது உங்கள் பாணிகளை ஏன் பயன்படுத்த வேண்டும் என்று கூட தோன்றவில்லை, ஏன் பயன்படுத்தக்கூடாது என்பதைக் கண்டறிவது கடினம்.
அந்த உறுப்புக்கு பயன்படுத்தப்படும் பண்புகளுடன் கூட, விசேஷம் பற்றி நீங்கள் தெரிந்துகொள்ள வேண்டும்!
Chrome இல் வெப்மாஸ்டர் கருவிகளைப் போன்ற கருவியைப் பயன்படுத்துவதன் மூலம், உங்கள் வகுப்புகள் எவ்வாறு உங்கள் பாணியை பாதிக்கின்றன என்பதையும், முரண்பாடான பாணியையும் பண்புகளையும் இந்த சிக்கலைத் தவிர்ப்பதையும் பார்க்க முடியும்.
ஜெனிபர் கிரைனின் அசல் கட்டுரை. 8/7/17 அன்று ஜெர்மி ஜாராரால் திருத்தப்பட்டது