ఒక వెబ్పేజీ లేఅవుట్ యొక్క ఎడమ వైపుకు ఒక చిత్రాన్ని సమలేఖనం చేయడానికి CSS ను ఉపయోగించడం
నేడు దాదాపు ఏ వెబ్ పేజీ చూడండి మరియు మీరు ఆ పేజీల సమూహాన్ని రూపొందించే టెక్స్ట్ మరియు చిత్రాల కలయికను చూస్తారు. ఇది ఒక పేజీ టెక్స్ట్ మరియు చిత్రాలను జోడించడానికి చాలా సులభం. పేరాలు, జాబితాలు మరియు శీర్షికలు వంటి ప్రామాణిక HTML ట్యాగ్లను ఉపయోగించి మూలకాన్ని ఉపయోగించి చిత్రాలను చేర్చినట్లుగా టెక్స్ట్ను కోడ్ చేయబడుతుంది.
టెక్స్ట్ మరియు ఆ చిత్రాలను బాగా కలిసి పనిచేసే సామర్థ్యాన్ని వేరుగా గొప్ప వెబ్ డిజైనర్లు అమర్చుతుంది ఏమిటి! మీ వచనం మరియు చిత్రాలను మరొకదాని తర్వాత ఒకటి కనిపించాలని మీరు కోరుకోరు, ఈ బ్లాక్-స్థాయి అంశాలు డిఫాల్ట్గా ఎలా లేఅవుట్లో ఉంటాయి. లేదు, మీరు టెక్స్ట్ మరియు చిత్రాలను చివరకు మీ వెబ్సైట్ యొక్క దృశ్యమాన రూపకల్పనలో ఏ విధంగా కలిసిపోతున్నారో మీకు కొంత నియంత్రణ ఉంటుంది.
ఒక పేజీ యొక్క ఎడమ వైపుకి సర్దుబాటు చేసిన చిత్రం కలిగి , ఆ పేజీ యొక్క టెక్స్ట్ దాని చుట్టూ ప్రవహిస్తుంది, ముద్రిత రూపకల్పనకు మరియు వెబ్ పేజీలకు కూడా ఒక సాధారణ రూపకల్పన చికిత్స. వెబ్ పరంగా, ఈ ప్రభావాన్ని చిత్రం తేలుతూ ఉంటుంది . ఈ శైలి "ఫ్లోట్" కోసం CSS ఆస్తితో సాధించబడుతుంది. ఈ లక్షణం ఎడమ-సమలేఖన చిత్రం చుట్టూ దాని కుడి వైపుకి ప్రవహించటానికి అనుమతిస్తుంది. (లేదా దాని కుడి వైపుకు కుడి సమలేఖనమైన చిత్రం చుట్టూ.) ఈ దృశ్య ప్రభావాన్ని ఎలా సాధించాలో చూద్దాం.
HTML తో ప్రారంభించండి
మీరు చేయవలసిన మొదటి విషయం ఏమిటంటే, పని చేయడానికి కొన్ని HTML కలిగి ఉంది. మా ఉదాహరణ కోసం, మేము పేరాగ్రాఫ్ యొక్క ప్రారంభంలో ఒక పేరాగ్రాఫ్ను వ్రాసి, ఒక చిత్రం (టెక్స్ట్ ముందు, కానీ ప్రారంభపు
ట్యాగ్ తర్వాత) చేస్తాము. ఇక్కడ HTML మార్కప్ ఎలా ఉంది
డిఫాల్ట్గా, మా వెబ్పేజీ టెక్స్ట్ పై చిత్రంలో ప్రదర్శించబడుతుంది. ఎందుకంటే HTML లో చిత్రాలు బ్లాక్-లెవల్ మూలకాలు. దీని అర్థం డిఫాల్ట్గా చిత్రం మూలకాన్ని ముందు మరియు తరువాత లైన్ బ్రేక్స్ ప్రదర్శిస్తుంది. మేము CSS ను తిరగడం ద్వారా ఈ డిఫాల్ట్ లుక్ ను మారుస్తాము. మొదటిది, అయితే, మేము మా చిత్ర మూలకాన్ని తరగతి విలువను జోడిస్తాము. ఆ తరగతి తరువాత మేము మా CSS లో ఉపయోగించే ఒక "హుక్" గా వ్యవహరిస్తుంది.
"ఎడమ" యొక్క ఈ తరగతి దాని స్వంతదానికి ఏమీ లేదని గమనించండి! మాకు మా కావలసిన శైలి సాధించడానికి, మేము తదుపరి CSS ను ఉపయోగించాలి.
CSS స్టైల్స్
స్థానంలో మన HTML తో, "తరగతి" యొక్క మా తరగతి లక్షణంతో సహా, మేము ఇప్పుడు CSS కి మారవచ్చు. మేము మా స్టైల్షీట్కు ఒక నియమాన్ని జోడిస్తాము, అది ఆ చిత్రాన్ని తేలుతుంది మరియు దానికి పక్కన ఉన్న చిన్న పాడింగ్ను జోడించాలి, తద్వారా చివరకు చిత్రం చుట్టూ చుట్టుముట్టే వచనం చాలా దగ్గరగా ఉంటుంది. మీరు రాయగల CSS ఇక్కడ ఉంది:
లెఫ్ట్ {ఫ్లోట్: ఎడమ; పాడింగ్: 0 20px 20px 0; }ఈ శైలి ఎడమకు ఆ చిత్రం తేలియాడుతుంది మరియు చిత్రం యొక్క కుడి మరియు దిగువకు కొద్దిగా పాడింగ్ (కొన్ని CSS షార్ట్హాండ్ను ఉపయోగించి) జతచేస్తుంది.
ఒక బ్రౌజర్లో ఈ HTML ను కలిగి ఉన్న పేజీని మీరు సమీక్షించినట్లయితే, చిత్రం ఇప్పుడు ఎడమకు సర్దుబాటు చేయబడుతుంది మరియు పేరాగ్రాఫ్ యొక్క టెక్స్ట్ దాని కుడి వైపుకు కనిపిస్తుంది, ఇది రెండు మధ్య అంతరాన్ని సరిపోతుంది. మేము ఉపయోగించిన "ఎడమ" యొక్క తరగతి విలువ ఏకపక్షంగా ఉంది. పదం "ఎడమ" దాని సొంత ఏమీ లేదు ఎందుకంటే మేము ఏదైనా అని. ఇది ఒక తరగతి గుణాన్ని HTML లో కలిగి ఉండాలి, ఇది వాస్తవమైన CSS శైలితో పని చేస్తుంది, ఇది మీరు చూస్తున్న దృశ్య మార్పులను నిర్దేశిస్తుంది.
ఈ స్టైల్స్ సాధించడానికి ప్రత్యామ్నాయ మార్గాలు
చిత్రం మూలకాన్ని తరగతి గుణం ఇవ్వడం మరియు ఆపై మూలకం తేలియాడే ఒక సాధారణ CSS శైలిని ఉపయోగించడం ఈ "ఎడమ సమలేఖన చిత్రం" లుక్ ను మీరు సాధించగల ఏకైక మార్గం. మీరు చిత్రం యొక్క తరగతి విలువను కూడా తీసుకోవచ్చు మరియు మరింత నిర్దిష్ట సెలెక్టర్ను రాయడం ద్వారా CSS తో శైలిని చేయవచ్చు. ఉదాహరణకు, ఒక ఉదాహరణ చూద్దాం, ఆ చిత్రం లోపల "ప్రధాన-కంటెంట్" యొక్క తరగతి విలువతో విభజన యొక్క.
ఈ చిత్రాన్ని శైలి చేయడానికి, మీరు ఈ CSS ను వ్రాయవచ్చు:
.main-content img {float: left; పాడింగ్: 0 20px 20px 0; }ఈ sceario లో, మా చిత్రం ఎడమవైపుకు సమలేఖనం చేయబడుతుంది, ముందుగా దాని చుట్టూ ఉన్న టెక్స్ట్ తో, కానీ మా మార్కప్కు అదనపు తరగతి విలువను జోడించాల్సిన అవసరం లేదు. దీన్ని స్కేల్ చేయడం ద్వారా చిన్న HTML ఫైల్ను సృష్టించడం సహాయపడుతుంది, ఇది నిర్వహించడానికి సులభంగా ఉంటుంది మరియు పనితీరును మెరుగుపరచడంలో కూడా సహాయపడుతుంది.
చివరగా, మీరు ఈ విధంగా మీ HTML మార్కప్ లోకి నేరుగా శైలులను జోడించగలరు:
ఈ పద్ధతి " ఇన్లైన్ శైలులు " అంటారు. ఇది నిర్మాణాత్మకమైనది కాదు ఎందుకంటే ఇది ఒక మూలకం యొక్క శైలిని దాని నిర్మాణ మార్కప్తో మిళితం చేస్తుంది. వెబ్ ఉత్తమ విధానాలు ఒక పేజీ యొక్క శైలి మరియు నిర్మాణం ప్రత్యేకంగా ఉండాలని నిర్దేశిస్తాయి. మీ పేజీ దాని లేఅవుట్ను మార్చడానికి మరియు ప్రతిస్పందించే వెబ్సైట్తో విభిన్న స్క్రీన్ పరిమాణాలు మరియు పరికరాల కోసం కనిపించేటప్పుడు ఇది ప్రత్యేకంగా ఉపయోగపడుతుంది. HTML లో ముడిపడివున్న పేజీ శైలిని కలిగి ఉండటం వలన ఆ విభిన్న స్క్రీన్లకు అవసరమైన మీ సైట్ యొక్క రూపాన్ని సర్దుబాటు చేసే మీడియా ప్రశ్నలకు రచయిత మరింత కష్టతరం చేస్తుంది.
జెన్నిఫర్ క్రిన్ని రచించిన అసలు వ్యాసం. జెరెమీ గిరార్డ్ చేత సవరించబడింది 4/3/17.