వెబ్సైట్ రూపకల్పనలో IFrames ఎలా పనిచేస్తుందో అర్థం చేసుకోండి
మీరు మీ HTML లో ఒక మూలకాన్ని పొందుపరచినప్పుడు, దానికి CSS శైలులను జోడించేందుకు మీకు రెండు అవకాశాలు ఉన్నాయి:
- మీరు శైలి IFRAME ను కూడా చెయ్యవచ్చు.
- మీరు IFRAME (కొన్ని పరిస్థితులలో) లోపల పేజీని శైలి చేయవచ్చు.
శైలి CSS IFRAME ఎలిమెంట్ ను ఉపయోగించుట
మీ ఐఫ్రేమ్లను స్టైలింగ్ చేసినప్పుడు మీరు పరిగణించవలసిన మొదటి విషయం IFRAME కూడా. చాలా బ్రౌజర్లు అదనపు శైలులు లేకుండా ఐఫ్రేమ్లను కలిగి ఉండగా, వాటిని ఇప్పటికీ స్థిరంగా ఉంచడానికి కొన్ని శైలులను జోడించడానికి మంచి ఆలోచన.
ఇక్కడ నేను ఎల్లప్పుడూ నా ఐఫ్రేమ్లో కొన్ని CSS శైలులు ఉన్నాయి:
- మార్జిన్: 0;
- పాడింగ్: 0;
- సరిహద్దు: none;
- వెడల్పు: విలువ ;
- ఎత్తు: విలువ ;
వెడల్పు మరియు ఎత్తు నా పత్రంలో సరిపోయే పరిమాణం సెట్. ఇక్కడ శైలులు లేకుండా ఫ్రేమ్ యొక్క ఉదాహరణలు మరియు శైలిలో ఉన్న బేసిక్లతో మాత్రమే ఉంటాయి. మీరు గమనిస్తే, ఈ శైలులు ఎక్కువగా iframe చుట్టూ సరిహద్దుని తీసివేస్తాయి, కానీ అవి అన్ని బ్రౌజర్లు అదే అంచులు, padding మరియు dimensions తో iframe ను ప్రదర్శిస్తాయి.
స్క్రోల్ బార్లను తీసివేయడానికి ఓవర్ఫ్లో ఆస్తిని వాడుతున్నారని HTML5 సిఫార్సు చేస్తోంది, కానీ ఇది నమ్మదగినది కాదు. కాబట్టి మీరు స్క్రోల్ బార్లను తీసివేయాలని లేదా మార్చాలని అనుకుంటే, మీ iframe పై స్క్రోలింగ్ లక్షణాన్ని ఉపయోగించాలి. స్క్రోలింగ్ లక్షణాన్ని వాడటానికి, ఏ ఇతర లక్షణాన్ని లాగా జోడించి, మూడు విలువలలో ఒకదాన్ని ఎంచుకోండి: అవును, లేదు లేదా ఆటో. అవును స్క్రోల్ బార్లు ఎప్పుడూ అవసరం లేనప్పటికీ, ఎల్లప్పుడూ బ్రౌజర్కు చెబుతుంది. ఏ అవసరం లేదా లేదో అన్ని స్క్రోల్ బార్లు తొలగించడానికి చెప్పారు.
ఆటో డిఫాల్ట్ మరియు వారు అవసరమైనప్పుడు స్క్రోల్ బార్లు కలిగి మరియు వారు లేనప్పుడు వాటిని తొలగిస్తుంది.
స్క్రోలింగ్ లక్షణంతో స్క్రోలింగ్ను ఎలా ఆఫ్ చేయాలో ఇక్కడ ఉంది:
స్క్రోలింగ్ = "లేదు" >
ఇది ఒక iframe.
HTML5 లో స్క్రోలింగ్ను ఆపివేయడం కోసం ఓవర్ఫ్లో ఆస్తిని వాడాలి. కానీ మీరు ఈ ఉదాహరణలలో చూడగలిగినంత ఇంకా అది అన్ని బ్రౌజర్లలో విశ్వసనీయంగా పనిచేయదు.
ఓవర్ఫ్లో ఆస్తితో మీరు అన్ని సమయాలను స్క్రోల్ చేయడం ఎలా చేయాలో ఇక్కడ ఉంది:
శైలి = "ఓవర్ఫ్లో: స్క్రోల్;" >
ఇది ఒక iframe.
ఓవర్ఫ్లో ఆస్తితో పూర్తిగా స్క్రోలింగ్ను నిలిపివేయడానికి మార్గం లేదు.
చాలామంది డిజైనర్లు వారి ఐఫ్రేమ్లను వారు పేజీలో ఉన్న నేపథ్యంలో కలపాలని కోరుతారు, తద్వారా పాఠకులకు కూడా ఐఫ్రేమ్లు లేవని తెలియదు. కానీ మీరు వాటిని నిలబడి చేయడానికి శైలులను జోడించవచ్చు. సరిహద్దులను సర్దుబాటు చేయడం వలన iframe మరింత సులభంగా కనిపిస్తుంది. సరిహద్దుల శైలికి సరిహద్దు శైలి లక్షణాన్ని (లేదా సరిహద్దు-ఎగువ, సరిహద్దు-కుడి, సరిహద్దు-ఎడమ మరియు సరిహద్దు-దిగువ లక్షణాలు)
iframe {
border-top: # c00 1px dotted;
సరిహద్దు-కుడి: # c00 2px చుక్కలు;
సరిహద్దు-ఎడమ: # c00 2px dotted;
సరిహద్దు-దిగువ: # c00 4px చుక్కలు;
}
కానీ మీరు మీ శైలుల కోసం స్క్రోలింగ్ మరియు సరిహద్దులతో ఆపకూడదు. మీరు మీ iframe ఇతర CSS శైలులు చాలా దరఖాస్తు చేసుకోవచ్చు. ఈ ఉదాహరణ iframe ఒక నీడ, గుండ్రంగా మూలలు ఇవ్వాలని CSS3 శైలులు ఉపయోగిస్తుంది, మరియు అది 20 డిగ్రీల తిప్పి.
iframe {
margin-top: 20px;
మార్జిన్-దిగువ: 30px;
-మోజ్-సరిహద్దు-వ్యాసార్థం: 12px;
-వెబ్కిట్-సరిహద్దు-వ్యాసార్థం: 12px;
సరిహద్దు-వ్యాసార్థం: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-వెబ్కిట్ బాక్స్-నీడ: 4px 4px 14px # 000;
బాక్స్-నీడ: 4px 4px 14px # 000;
-moz అనుకరిస్తే: రొటేట్ (20deg);
-webkit-పరివర్తనం: వలయాకారంగా (20deg);
-o-పరివర్తనం: వలయాకారంగా (20deg);
-ms అనుకరిస్తే: రొటేట్ (20deg);
వడపోత: progid: DXImageTransform.Microsoft.BasicImage (భ్రమణం = 2);
}
ఐఫ్రేమ్ కంటెంట్లు స్టైలింగ్
ఒక iframe యొక్క కంటెంట్లను స్టైలింగ్ కేవలం ఏ ఇతర వెబ్ పేజీ స్టైలింగ్ వంటి ఉంది. కాని, మీరు పేజీని సవరించడానికి ప్రాప్యతను కలిగి ఉండాలి . మీరు పేజీని సవరించలేకుంటే (ఉదాహరణకు, ఇది మరొక సైట్లో ఉంది).
మీరు పేజీని సవరించగలిగితే, మీరు మీ సైట్లోని ఏదైనా ఇతర వెబ్ పేజీని శైలి వలె బాహ్య శైలి షీట్ లేదా శైలులు పత్రంలో కుడివైపున జోడించవచ్చు.