ఇది చెప్పకుండానే, వెబ్ అభివృద్ధి చాలా పెద్దది. అందులో ఎక్కువ భాగం ఎందుకంటే ప్రతి ఒక్కరూ వెబ్‌లో ఉన్నారు. ఏదేమైనా, ఈ రంగంలో డెవలపర్‌ల కొరత ఉంది, అందుకే వెబ్ డెవలప్‌మెంట్ పాఠ్యాంశాలు అంత తేలికగా అందుబాటులో ఉన్నాయి మరియు ఉచితం. దీన్ని దృష్టిలో ఉంచుకుని, HTML మరియు CSS గురించి ఏమిటో మేము మీకు కొద్దిగా చూపించబోతున్నాము. మరింత ప్రత్యేకంగా, “తరగతులు” ఎలా పని చేస్తాయో మేము మీకు చూపించబోతున్నాము.
మేము మిమ్మల్ని మొదటి నుండి ప్రారంభించటం లేదు, ఎందుకంటే ఇప్పటికే అక్కడ ఉచిత పాఠ్యాంశాలు ఉన్నాయి. బదులుగా, తరగతులు ఎలా పని చేస్తాయో మేము మీకు ప్రత్యేకంగా చూపించబోతున్నాము, ఎందుకంటే ఇది మీ వెబ్‌సైట్‌ను స్టైలింగ్ చేయడానికి అవసరమైన భాగం. మేము ట్విట్టర్ యొక్క బూట్స్ట్రాప్ API లో మా రూపాన్ని పోస్ట్ చేసే ముందు కవర్ చేయడం విలువైనదిగా భావించాము, ఎందుకంటే తరగతులు కూడా అవసరమైన భాగం.
నిరాకరణగా, మీరు HTML మరియు CSS లకు పూర్తిగా క్రొత్తగా ఉంటే, ఇది మీకు మంచి ప్రారంభం కాదు. మీకు ఇది తెలిసి ఉంటే, తీయటానికి చాలా కష్టపడకూడదు. కానీ, మీరు పూర్తి అనుభవశూన్యుడు ట్యుటోరియల్ కోసం చూస్తున్నట్లయితే, ఆన్‌లైన్‌లో గొప్ప ఎంపికలు పుష్కలంగా ఉన్నాయి. కొన్నింటికి, ఫ్రీకోడ్‌క్యాంప్, ది ఓడిన్ ప్రాజెక్ట్, కోడ్ అకాడమీ, కోడ్ స్కూల్, టీమ్ ట్రీహౌస్, ఉడాసిటీ మరియు మరెన్నో ఉన్నాయి. వాటిలో ఒకదానిని త్రవ్వడం ప్రారంభించాలని మీరు ఎంచుకుంటే, ఒకదానితో (ఫ్రీ కోడ్ క్యాంప్ వంటివి) అంటుకుని, మరొకదాన్ని ప్రారంభించే ముందు దాన్ని పూర్తి చేయాలని నేను సిఫార్సు చేస్తున్నాను, ఎందుకంటే చాలా “ప్రాథమిక” కంటెంట్ చాలా పునరావృతమవుతుంది.
ఆ విధంగా, తరగతుల గురించి ఏమిటో తెలుసుకుందాం.
తరగతులు ఎలా పనిచేస్తాయి
తరగతులు చాలా ఉపయోగకరంగా ఉంటాయి. వారు HTML స్టైలింగ్ నుండి పునరావృతతను తీసుకుంటారు. తరగతులు లేకుండా, మీరు మీ మార్కప్‌లోని ప్రతి మూలకాన్ని ఒక్కొక్కటిగా స్టైలింగ్ చేస్తారు. మరియు మీరు ఒకే రకమైన రెండు అంశాలను కలిగి ఉంటే, కానీ వాటిలో ప్రతి ఒక్కటి భిన్నంగా శైలి చేయాలనుకుంటే? ఇది పూర్తి గజిబిజి అవుతుంది. అందుకే మాకు క్లాసులు ఉన్నాయి. తరగతులు మీ HTML ను కొన్ని సంస్థ నిర్మాణాన్ని జోడిస్తాయి, మీ కోడ్‌ను శుభ్రంగా ఉంచడానికి మిమ్మల్ని అనుమతిస్తుంది. అంతే కాదు, తరగతులను ఒకటి కంటే ఎక్కువసార్లు ఉపయోగించవచ్చు. మరో మాటలో చెప్పాలంటే, మీరు ఒకే స్టైలింగ్ నియమాలను రెండుసార్లు సృష్టించాల్సిన అవసరం లేదు.
మనలో తరగతులు ఎలా ఉంటాయో ఇక్కడ ఉంది
ట్యాగ్:
మీరు చూడగలిగినట్లుగా, మా బాడీ ట్యాగ్ కింద, మాకు రెండు ఉన్నాయి
వివిధ తరగతులతో ఉన్న అంశాలు. మొదటిదిట్యాగ్కు “హెడ్ 1” క్లాస్ ఉంటుంది, రెండవ ట్యాగ్‌లో “హెడ్ 2” క్లాస్ ఉంటుంది. కాబట్టి, మా CSS లో, స్టైలింగ్‌ను వర్తించే బదులుమూలకం, మేము ఆ వ్యక్తిగత తరగతులకు స్టైలింగ్‌ను వర్తింపజేయవచ్చు. మేము ఎందుకు అలా చేయాలనుకుంటున్నాము?
మూలకం, మేము ఆ వ్యక్తిగత తరగతులకు స్టైలింగ్‌ను వర్తింపజేయవచ్చు. మేము ఎందుకు అలా చేయాలనుకుంటున్నాము?
మీ అందరికీ మీరు అక్కరలేదు
ఒకే స్టైలింగ్ కలిగి ఉన్న అంశాలు. వెబ్‌సైట్ చేసేటప్పుడు ఇది చాలా తలనొప్పిని సృష్టిస్తుంది మరియు దానికి తోడు వెబ్‌సైట్లు చాలా గొప్పగా కనిపించవు. ట్యాగ్ యొక్క ఒక ఉదాహరణకి స్టైలింగ్‌ను వర్తింపజేయడానికి తరగతులు మాకు అనుమతిస్తాయి, అన్నీ కాదుపత్రం అంతటా ట్యాగ్‌లు. కాబట్టి, మీరు HTML లో క్లాస్ ఎలా వ్రాస్తారు? ఇలా:
కొంత కంటెంట్
మీరు దాదాపు ఏ HTML మూలకానికి “తరగతి” ఆస్తిని జోడించవచ్చు.
గ్రేట్! కాబట్టి, మాకు తరగతులు ఉన్నాయి, కానీ వారి ప్రస్తుత స్థితిలో, వారు వాస్తవానికి ఏమీ చేయడం లేదు. మేము ఇంకా తరగతికి స్టైలింగ్ నియమాలను జోడించలేదు. అలా చేయడానికి, మేము ఒక ప్రత్యేక .css పత్రాన్ని సృష్టించాలి. నేను దీన్ని main.css అని పిలుస్తాను. ఆ పత్రంలో, మేము ఈ విధమైన తరగతిని శైలి చేస్తాము:
మేము శైలిని కోరుకునే తరగతిని ఎంచుకోవడానికి, మేము దీన్ని చేస్తాము:
.head1 {రంగు: ఎరుపు; టెక్స్ట్-అలైన్: సెంటర్; }
వంకర కలుపులలో మేము ఆ తరగతికి వర్తించే అన్ని “నియమాలు” (లేదా స్టైలింగ్) ఉన్నాయి. మీరు ఆ తరగతి లోపల ఉంచగల వివిధ నియమాలు చాలా ఉన్నాయి. నా విషయంలో, నేను “రంగు” నియమాన్ని ఉపయోగించి టెక్స్ట్ యొక్క రంగును ఎరుపుకు మార్చాను మరియు “టెక్స్ట్-అలైన్” నియమాన్ని ఉపయోగించి టెక్స్ట్‌ను కేంద్రీకరించాను. మీరు మొజిల్లా యొక్క డెవలపర్ నెట్‌వర్క్ నుండి CSS నియమాల పూర్తి జాబితాను మరియు వాటి డాక్యుమెంటేషన్‌ను కనుగొనవచ్చు.
ఇప్పుడు, మా స్టైలింగ్ ఇప్పటికీ మా HTML పత్రంలోని తరగతులకు వర్తించదు మరియు దీనికి కారణం మేము ఇంకా రెండు ఫైళ్ళను లింక్ చేయలేదు. మీ HTML ఫైల్‌కు తిరిగి వెళ్లండి మరియు
ట్యాగ్, మీరు దీన్ని చేయడం ద్వారా మీ CSS ఫైల్‌ను లింక్ చేయాలనుకుంటున్నారు:
మీ HTML పత్రం ఇలా ఉండాలి:
మరియు మీ పరీక్షా ప్రాజెక్ట్ వెబ్‌లో ఇలా ఉండాలి:
ఈ దశల ద్వారా నడిచే మరింత వివరమైన వీడియో కోసం, దయచేసి క్రింద చూడండి.
వీడియో
ముగింపు
మరియు తరగతులకు అంతే ఉంది! వారు అర్థం చేసుకోవడానికి చాలా సులభం. సహజంగానే మీరు సందర్శించే పెద్ద మరియు జనాదరణ పొందిన వెబ్‌సైట్లలో, తరగతుల్లోని నియమాలు మేము కవర్ చేసిన వాటి కంటే చాలా క్లిష్టంగా ఉంటాయి, కానీ వాటి ప్రాథమిక రూపంలో, అవి ఎలా పనిచేస్తాయి.
మీకు ఏవైనా ప్రశ్నలు ఉంటే లేదా ఎక్కువసేపు అనుసరించడంలో ఇబ్బంది ఉంటే, PCMech ఫోరమ్‌లలో క్రింద లేదా అంతకంటే ఎక్కువ వ్యాఖ్యలలో మాకు తెలియజేయండి! లేదా, మీరు PCMech లో పూర్తి HTML / CSS బిగినర్స్ గైడ్ పట్ల ఆసక్తి కలిగి ఉంటే, అది కూడా మాకు తెలియజేయండి!
