CSS தேர்வாளர்கள். தேர்வாளர்கள் வகையான

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

CSS தேர்வாளர்கள்

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

• குறிகளுக்கான;

• வகுப்புகளுக்கு;

• ஐடி;

• உலகளாவிய;

• பண்புகளை;

• போலி வகுப்புகள் செயல் படும்;

• போலி கட்டுப்படுத்தலாம்.

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

தேர்வாளர்கள் குறிச்சொற்களை

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

நன்மைகள் - எளிமை, செயலாக்கம்.

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

வர்க்கம் தேர்வாளர்கள்

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

பின்வருமாறு தொடரியலாகும்: ஒரு புள்ளி ( "."), வகையின் பெயர் எழுதி பின்தொடரும் குறிக்கிறது. முதலாவது யூனிட்டில் நிர்வகிக்க, .red கட்டுமான பயன்படுத்த. இரண்டாவது - பல .blue மற்றும்.

முக்கியம்! வகுப்புத்தரமானது பண்பு அர்த்தமுள்ள மதிப்புகள் பயன்படுத்த பரிந்துரைக்கப்படுகிறது. அது ஒலிபெயர்ப்பு (எ.கா., krasiviy-Blok) அல்லது கடிதங்கள் / எண்கள் சீரற்ற சேர்க்கைகள் (ojfh834871) பயன்படுத்த கெட்ட வடிவமாகக் கருதப்படுகிறது. இந்த குறியீடு, நீங்கள் பிறகு திட்டத்தில் ஈடுபட்டு வரும் அந்த சந்திக்கும் என்று சிரமங்களை குறிப்பிட இல்லை, குழப்பி கொள்ள நிலவி வருகிறது. சிறந்த விருப்பத்தை - வருகிறது BEM போன்ற எந்த முறை பயன்படுத்த.

நன்மைகள் - ஒப்பீட்டளவில் உயர் நெகிழ்வு.

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

ஐடி தேர்வுக்குழு

இந்த பதிப்பில் பற்றி கருத்து கோடர்களுக்கு மற்றும் புரோகிராமர்கள் தெளிவற்ற உள்ளன. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. தவறான பயன்பாட்டில் விட்டுச் சென்ற சொத்தில் பிரச்சினைகள் ஏற்படுத்தும் ஏனெனில் சில CSS பயிற்சிகள், ஐடி பயன்படுத்த பரிந்துரைக்கிறோம் இல்லை. எனினும், பல நிபுணர்கள் தீவிரமாக உள்ளன அமைப்பை முழுவதும் அவர்கள் ஏற்பாடு. நீங்கள் முடிவு. # »), затем имя блока. பவுண்டு அடையாளம் ( "#"), தொகுதி அப்போதைய பெயர்: தொடரியல் பின்வருமாறு இருக்கிறது. #red. உதாரணமாக, #red.

отличается от класса по нескольким параметрам. ஐடி பல வழிகளில் வர்க்கம் வேறுபட்டது. ID. முதல், பக்கம் இரண்டு ஒத்த ஐடி இருக்க முடியாது. அவர்கள் ஒரு தனிப்பட்ட பெயர் ஒதுக்கப்படும். இரண்டாவதாக அத்தகைய செலக்டாராகச் அதிக முன்னுரிமை உள்ளது. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. இந்த நீங்கள் சிவப்பு ஒரு அலகு வகுப்பை குறிப்பிட்டால் என்றால் மற்றும் CSS அட்டவணைகளில் சிவப்பு குறிப்பிடும் பொருள் பின்னணி நிறம், பின்னர் நீல அதை ஒதுக்க ஒரே ஐடியைக் மற்றும் நீல நிறம் குறிப்பிட, அலகு நீல மாறும்.

நன்மைகள் - நீங்கள் குறிச்சொற்களை மற்றும் வகுப்புகள் பாணிகளையும் புறக்கணித்து, குறிப்பிட்ட உறுப்பு கட்டுப்படுத்த முடியும்.

ID и class. குறைபாடுகள் - எளிதாக ஐடி மற்றும் பிரிவைச் சேர்ந்த பெரும் எண்ணிக்கையிலான தொலையும்.

முக்கியம்! ID вам, в общем-то, не нужны. நீங்கள் BEM முறை (அல்லது அதன் ஒத்தப்பொருட்களும்), ஐடி பயன்படுத்தினால், பொதுவாக, தேவைப் படாது. இந்த நுட்பம் அமைப்பை தனிப்பட்ட மிகவும் என்று வசதியான வகுப்புகள் பயன்பாடு ஆகும்.

உலகளாவிய தேர்வுக்குழு

{}. தொடரியல்: நடிகைகளை அடையாளம் ( "*") மற்றும் ப்ரேஸ், அதாவது {*} ...

ஒருமுறை குறிப்பிட்ட குணங்களைக் பக்கத்தின் அனைத்து கூறுகளையும் ஒதுக்க பயன்படுகிறது. இந்த பயனுள்ளதாக இருக்கும் போது? box-sizing: border-box. உதாரணமாக, நீங்கள் பக்கம் சொத்து பாக்ஸ் அளவு அமைக்க விரும்பினால்: எல்லை பாக்ஸ். div *{}. மட்டுமே ஆவணத்தின் அனைத்து கூறுகள், நிர்வகிக்கப் பயன்படுத்தப்படும் முடியாது ஆனால் உதாரணமாக குறிப்பிட்ட தொகுதி புத்திரர் எல்லாரையும் கட்டுப்படுத்த, கிராம * {}.

நன்மைகள் - நீங்கள் ஒரு நேரத்திலும் வாங்க வேண்டிய பொருட்களை பெரிய அளவில் கட்டுப்படுத்த முடியும்.

கான்ஸ் - போதாது நெகிழ்வான விருப்பம். கூடுதலாக, இந்த தேர்வுக்குழு பயன்பாடு, சில சந்தர்ப்பங்களில் பக்கம் கீழே வேலை மெதுவாக.

பண்புகளை மூலம்

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

உள்ளீடு [வகை = 'உரை'] {}

இந்த தேர்வுக்குழு உள்ளீடு உரை வகை அனைத்து பண்புகளை தேர்வு செய்யும்.

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

= உங்கள் பக்கம் பண்பு ஒதுக்கிட கொண்டு உள்ளீடு என்று இமேஜின் "ஒரு பெயரை உள்ளிடவும்" மற்றும் உள்ளீடு ஒதுக்கிட = "கடவுச்சொல்லை உள்ளிடவும்". அவர்கள் தேர்வுக்குழு பயன்படுத்தி தேர்வு முடியும்! இதை செய்ய, பின்வரும் கட்டமைப்பைப் பயன்படுத்தி:

உள்ளீடு [ஒதுக்கிட = "பெயரை உள்ளிடவும்"] {} அல்லது உள்ளீடு [ஒதுக்கிட = "கடவுச்சொல்லை உள்ளிடவும்"]

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

[தலைப்பு * = "Kaspiysk"]

CSS ஐ "காஸ்பியன்", அதாவது. ஈ, மற்றும் "காஸ்பியன்" மற்றும் "காஸ்பியன்" அடையாளம் உள்ளன தலைப்பில் அனைத்து பொருட்களை தேர்வு செய்யும்.

நீங்கள் ஒரு குறிப்பிட்ட பாத்திரம் பண்புகளை தொடங்கும் என்று குறிச்சொற்களை தேர்வு செய்யலாம்:

[தலைப்பு ^ = "பாத்திரம் நீங்கள் விரும்பும்"] {}

அல்லது அவர்களை முறித்துகொள்ளலாம்:

[தலைப்பு $ = "சரியான பாத்திரம்"] {}.

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

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

போலி வர்க்க தேர்வாளர்கள்

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

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

.btn: மிதவை {

பின்னணி-நிறம்: சிவப்பு;

}

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

நல்லொழுக்கங்கள் - பரவலாக பக்கங்களின் "மறுமலர்ச்சி" பயன்படுத்தப்படுகின்றன. பயன்படுத்த எளிதானது.

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

போலி தேர்வாளர்கள்

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

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

நன்மைகள் - பக்கத்தின் தோற்றத்தை தனிப்பயனாக்க நெகிழ்வு வழங்கும்.

குறைபாடுகள் - அவர்களுக்கு புதிய அடிக்கடி தவறாக புரிந்து கொள்ளப்படுகின்றன. சில உலாவிகளில் இத்தகைய வேலைகளுக்கு பல தேர்வுகளை.

சுருக்கி

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