Skip to main content

వెబ్ డిజైన్ లో CSS తో స్పాన్ మరియు Div HTML ఎలిమెంట్స్ ఉపయోగించి

:

Anonim

వెబ్ రూపకల్పన మరియు HTML / CSS కు కొత్తగా ఉన్న చాలా మంది వ్యక్తులు దీనిని ఉపయోగిస్తారు మరియు

వారు వెబ్ పుటలను రూపొందించుకోవడం వంటి అంశాలలో. రియాలిటీ, అయితే, ఈ HTML అంశాల ప్రతి వేర్వేరు ప్రయోజనాల కోసం. దాని ఉద్దేశించిన ప్రయోజనం కోసం ప్రతి ఒక్కదాన్ని ఉపయోగించడం నేర్చుకోవడం, మొత్తం కోడ్ను సులభంగా నిర్వహించగల క్లీనర్ వెబ్ పేజీలను అభివృద్ధి చేయడంలో మీకు సహాయపడుతుంది.

ఉపయోగించి
మూలకం

Div మూలకం మీ వెబ్ పేజీలో తార్కిక విభాగాలను నిర్వచిస్తుంది. ఇది ప్రాథమికంగా ఒక పెట్టెలో మీరు తార్కికంగా కలిసి వెళ్ళే ఇతర HTML అంశాలను ఉంచవచ్చు. పేరాగ్రాఫ్లు, శీర్షికలు, జాబితాలు, లింక్లు, చిత్రాలు మొదలైనవి వంటివి దానిలోని బహుళ మూలకాలు ఉండవచ్చు. మీ HTML పత్రానికి అదనపు నిర్మాణం మరియు సంస్థను అందించడానికి ఇది ఇతర విభాగాలను కలిగి ఉండవచ్చు.

Div మూలకం ఉపయోగించడానికి, ఒక ఓపెన్ ఉంచండి

మీరు ప్రత్యేక విభాగానికి కావలసిన మరియు మీ దగ్గరికి కావలసిన మీ పేజీ యొక్క ప్రాంతం ముందు ట్యాగ్ చేయండి
దీని తరువాత ట్యాగ్:

div యొక్క విషయాలు

మీ పేజీ యొక్క ప్రాంతం తరువాత CSS తో శైలికి మీరు ఉపయోగించే కొన్ని అదనపు సమాచారం అవసరమైతే, మీరు ఒక ఐడి సెలెక్టర్ను జోడించవచ్చు (ఉదా.

id = "myDiv">

) లేదా తరగతి సెలెక్టర్ (ఉదా.,

తరగతి = "bigDiv">

). ఈ లక్షణాల రెండింటినీ CSS ను ఉపయోగించి లేదా జావాస్క్రిప్ట్ ఉపయోగించి చివరి మార్పు చేయవచ్చు. ప్రత్యేకమైన ఐడి సెలెక్టర్లు ఎలా ఉన్నారనే దానిలో భాగంగా, ప్రస్తుతపు ఉత్తమ అభ్యాసాలు ID లకు బదులుగా తరగతి సెలెక్టర్లుని ఉపయోగించటానికి మొగ్గు చూపుతాయి. వాస్తవానికి, మీరు ఒకదాన్ని ఉపయోగించుకోవచ్చు మరియు ఒక ID మరియు తరగతి సెలెక్టర్ రెండింటినీ కూడా డివిజన్ ఇవ్వవచ్చు.
వెర్సస్

Div మూలకం HTML5 విభాగ మూలకం నుండి భిన్నంగా ఉంటుంది, ఎందుకంటే పరిమితం చేయబడిన కంటెంట్ ఏ అర్థ అర్థాన్ని ఇవ్వదు. కంటెంట్ బ్లాక్ అనేది div లేదా విభాగంగా ఉందో లేదో మీకు ఖచ్చితంగా తెలియకపోతే, ఎలిమెంట్ మరియు కంటెంట్ యొక్క ఉద్దేశం ఏది ఉపయోగించాలో నిర్ణయించటంలో మీకు సహాయం చేస్తాయని ఆలోచించండి:

  • మీరు పేజీ యొక్క ఆ ప్రాంతానికి శైలులను జోడించడానికి మూలకం అవసరం ఉంటే, మీరు div మూలకాన్ని ఉపయోగించాలి.
  • కంటెంట్ను కలిగి ఉన్నట్లయితే, ఇది ప్రత్యేకమైన దృష్టిని కలిగి ఉంటుంది మరియు దాని స్వంతదానిపై నిలబడవచ్చు, మీరు బదులుగా విభాగం మూలకాన్ని ఉపయోగించాలనుకోవచ్చు.

చివరకు, రెండు divs మరియు విభాగాలు అందంగా అదేవిధంగా ప్రవర్తించే మరియు మీరు వాటిలో గాని కేటాయించవచ్చు విలువలు మరియు మీరు అవసరం మీ సైట్ యొక్క రూపాన్ని పొందడానికి CSS వాటిని శైలి. వీటిలో రెండు బ్లాక్ స్థాయి అంశాలు.

ఉపయోగించి మూలకం

Span మూలకం అప్రమేయంగా ఒక ఇన్లైన్ మూలకం. ఇది div మరియు విభాగ అంశాల నుండి వేరుగా ఉంటుంది. Span మూలకం తరచూ ఒక ప్రత్యేకమైన భాగాన్ని మూసివేయడానికి ఉపయోగిస్తారు, సాధారణంగా వచనం, దీనిని తరువాత ఒక శైలిని "హుక్" గా ఇవ్వడానికి ఉపయోగిస్తారు. CSS తో వాడతారు, అది జతపరచే టెక్స్ట్ యొక్క శైలిని మార్చవచ్చు; అయినప్పటికీ, ఏ శైలి గుణాలు లేకుండా, span మూలకం మాత్రమే టెక్స్ట్ మీద ఎటువంటి ప్రభావాన్ని కలిగి ఉండదు.

ఇది span మరియు div మూలకాల మధ్య ప్రధాన తేడా. పైన చెప్పినట్లుగా, div మూలకం ఒక పేరా విరామం ఉంటుంది, అయితే span మూలకం మాత్రమే బ్రౌజర్ CSS శైలి నియమాలు దరఖాస్తు బ్రౌజర్ చెబుతుంది అయితే టాగ్లు:

హైలైట్ టెక్స్ట్ మరియు హైలైట్ టెక్స్ట్.

జోడించు

తరగతి = "హైలైట్"

లేదా CSS తో పాఠ్య శైలికి ఇతర తరగతి శైలి (ఉదా.,

తరగతి = "హైలైట్">

) .ప్రాంతం ఎలిమెంట్కు అవసరమైన లక్షణాలను కలిగి ఉండదు, కానీ మూడు ఉపయోగకరమైనవి అయినవి Div మూలకం యొక్క మాదిరిగానే ఉంటాయి:

  • శైలి
  • తరగతి
  • ఐడి

పత్రంలో కొత్త బ్లాక్-లెవల్ ఎలిమెంట్గా కంటెంట్ని నిర్వచించకుండా కంటెంట్ శైలిని మార్చాలనుకున్నప్పుడు స్పాన్ను ఉపయోగించండి.

ఉదాహరణకు, మీరు ఒక h3 యొక్క రెండవ పదం ఎరుపుగా ఉండాలని కోరుకుంటే, ఆ పదాన్ని ఒక span మూలకంతో కలిపి ఆ శైలిని ఎరుపు రంగుగా వాడుతారు. పదం ఇప్పటికీ h3 మూలకం యొక్క భాగంగా ఉంది, కానీ ఇప్పుడు కూడా ఎరుపు లో ప్రదర్శిస్తుంది:

ఇది నా అద్భుత హెడ్లైన్