HTML மற்றும் CSS இல் வகுப்புகளுக்கு ஒரு அறிமுகம்

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

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

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

அதற்கான வழி இல்லாமல், வகுப்புகள் எவை என்பதைப் பற்றி ஆராய்வோம்.

வகுப்புகள் எவ்வாறு செயல்படுகின்றன

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

நமக்குள் வகுப்புகள் எப்படி இருக்கும் என்பது இங்கே டேக்:

நீங்கள் பார்க்க முடியும் என, எங்கள் உடல் குறிச்சொல்லின் கீழ், எங்களுக்கு இரண்டு உள்ளன

வெவ்வேறு வகுப்புகள் கொண்ட கூறுகள். முதலாவதாக

குறிச்சொல் "head1" வகுப்பைக் கொண்டுள்ளது, இரண்டாவது குறிச்சொல் "head2" என்ற வகுப்பைக் கொண்டுள்ளது. எனவே, எங்கள் CSS இல், ஸ்டைலிங் பயன்படுத்துவதற்குப் பதிலாக

உறுப்பு, அந்த தனிப்பட்ட வகுப்புகளுக்கு நாம் ஸ்டைலிங் பயன்படுத்தலாம். நாம் ஏன் அதை செய்ய விரும்புகிறோம்?

உங்களுடைய அனைத்தையும் நீங்கள் விரும்பவில்லை என்பதே முதன்மைக் காரணம்

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

ஆவணத்தில் குறிச்சொற்கள். எனவே, HTML இல் ஒரு வகுப்பை எவ்வாறு எழுதுவது? இது போன்ற:

சில உள்ளடக்கம்

எந்தவொரு HTML உறுப்புக்கும் “வகுப்பு” சொத்தை நீங்கள் சேர்க்கலாம்.

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

நாங்கள் பாணியை விரும்பும் வகுப்பைத் தேர்ந்தெடுக்க, இதைச் செய்கிறோம்:

.head1 {நிறம்: சிவப்பு; உரை-சீரமை: மையம்; }

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

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

உங்கள் HTML ஆவணம் இப்படி இருக்க வேண்டும்:

உங்கள் சோதனை திட்டம் வலையில் இதுபோன்று இருக்க வேண்டும்:

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

காணொளி

முடிவுரை

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

உங்களிடம் ஏதேனும் கேள்விகள் இருந்தால் அல்லது நீண்ட நேரம் பின்தொடர்வதில் சிக்கல் இருந்தால், பிசிமெக் மன்றங்களில் கீழே அல்லது அதற்கு மேற்பட்ட கருத்துகளில் எங்களுக்குத் தெரியப்படுத்துங்கள்! அல்லது, PCMech இல் ஒரு முழுமையான HTML / CSS தொடக்க வழிகாட்டியில் நீங்கள் ஆர்வமாக இருந்தால், அதையும் எங்களுக்குத் தெரியப்படுத்துங்கள்!