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