Skip to main content

ఎలా CSS తో శైలి IFrames కు

Anonim

మీరు మీ HTML లో ఒక మూలకాన్ని పొందుపరచినప్పుడు, దానికి CSS శైలులను జోడించేందుకు మీకు రెండు అవకాశాలు ఉన్నాయి:

  • మీరు శైలి చేయవచ్చు

    IFRAME కూడా.

  • మీరు లోపల పేజీ శైలి చేయవచ్చు

    IFRAME (కొన్ని పరిస్థితులలో).

శైలి CSS IFRAME ఎలిమెంట్ ను ఉపయోగించుట

మీ ఐఫ్రేమ్లను స్టైలింగ్ చేసినప్పుడు మీరు పరిగణించవలసిన మొదటి విషయం

IFRAME

  • కూడా. చాలా బ్రౌజర్లు అదనపు శైలులు లేకుండా ఐఫ్రేమ్లను కలిగి ఉండగా, వాటిని ఇప్పటికీ స్థిరంగా ఉంచడానికి కొన్ని శైలులను జోడించడానికి మంచి ఆలోచన. ఇక్కడ నేను ఎల్లప్పుడూ నా ఐఫ్రేమ్లో కొన్ని CSS శైలులు ఉన్నాయి:

    మార్జిన్: 0;

  • పాడింగ్: 0;

  • సరిహద్దు: none;

  • వెడల్పు: విలువ ;

  • ఎత్తు: విలువ ;

తో

వెడల్పు

మరియు

ఎత్తు

నా పత్రంలో సరిపోయే పరిమాణం సెట్. ఇక్కడ శైలులు లేకుండా ఫ్రేమ్ యొక్క ఉదాహరణలు మరియు శైలిలో ఉన్న బేసిక్లతో మాత్రమే ఉంటాయి. మీరు గమనిస్తే, ఈ శైలులు ఎక్కువగా iframe చుట్టూ సరిహద్దుని తీసివేస్తాయి, కానీ అవి అన్ని బ్రౌజర్లు అదే అంచులు, padding మరియు dimensions తో iframe ను ప్రదర్శిస్తాయని కూడా నిర్ధారిస్తాయి.

ఓవర్ఫ్లో

స్క్రోల్ బార్లను తీసివేసే ఆస్తి, కానీ ఇది నమ్మదగినది కాదు. మీరు స్క్రోల్ బార్లను తీసివేయాలని లేదా మార్చాలనుకుంటే, మీరు వాడాలి

స్క్రోలింగ్

మీ iframe అలాగే లక్షణం. ఉపయోగించడానికి

స్క్రోలింగ్

లక్షణం, ఏ ఇతర లక్షణం వలె జోడించి, ఆపై మూడు విలువల్లో ఒకదానిని ఎంచుకోండి:

అవును

,

, లేదా

దానంతట అదే

అవును

స్క్రోల్ బార్లు అవసరం లేనప్పటికీ ఎల్లప్పుడూ బ్రౌజర్ని చెబుతుంది.

అవసరమైన అన్ని స్క్రోల్ బార్లను తొలగించాలా లేదా అనేదానిని తొలగించాలని చెబుతుంది.

దానంతట అదే

అప్రమేయము మరియు అవి అవసరమైనప్పుడు స్క్రోల్ బార్లను కలిగివుంటాయి మరియు అవి లేనప్పుడు వాటిని తొలగిస్తుంది.ఇక్కడ స్క్రోలింగ్ను ఎలా నిలిపివేయాలి

స్క్రోలింగ్లక్షణం: స్క్రోలింగ్ = "సంఖ్య">
ఇది ఒక iframe.

HTML5 లో స్క్రోలింగ్ను ఆపివేయడానికి మీరు ఉపయోగించాల్సి ఉంటుంది

ఓవర్ఫ్లో

ఆస్తి. కానీ మీరు ఈ ఉదాహరణలలో చూడగలిగినంత ఇంకా అది అన్ని బ్రౌజర్లలో విశ్వసనీయంగా పనిచేయదు. మీరు అన్ని సమయాలను స్క్రోల్ చేయడాన్ని ఎలా ఆన్ చేస్తారో ఇక్కడ ఉంది

ఓవర్ఫ్లోఆస్తి: శైలి = "ఓవర్ఫ్లో: స్క్రోల్;">
ఇది ఒక iframe.

అక్కడ ఉంది అవకాశమే లేదు పూర్తిగా స్క్రోలింగ్ ఆఫ్ చెయ్యడానికి

ఓవర్ఫ్లో

ఆస్తి. చాలామంది డిజైనర్లు వారి ఐఫ్రేమ్లను వారు పేజీలో ఉన్న నేపథ్యంలో కలపాలని కోరుతారు, తద్వారా పాఠకులకు కూడా ఐఫ్రేమ్లు లేవని తెలియదు. కానీ మీరు వాటిని నిలబడి చేయడానికి శైలులను జోడించవచ్చు. సరిహద్దులను సర్దుబాటు చేయడం వలన iframe మరింత సులభంగా కనిపిస్తుంది. కేవలం ఉపయోగించడానికి

సరిహద్దు

శైలి ఆస్తి (లేదా అది సంబంధించినది

border-top

,

border-right

,

సరిహద్దు లెఫ్ట్

, మరియు

బోర్డర్-బోటంలక్షణాలు) శైలి సరిహద్దులు: 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 యొక్క కంటెంట్లను స్టైలింగ్ కేవలం ఏ ఇతర వెబ్ పేజీ స్టైలింగ్ వంటి ఉంది. కానీ నీవు పేజీని సవరించడానికి ప్రాప్యతను కలిగి ఉండాలి . మీరు పేజీని సవరించలేకుంటే (ఉదాహరణకు, ఇది మరొక సైట్లో ఉంది).

మీరు పేజీని సవరించగలిగితే, మీరు మీ సైట్లోని ఏదైనా ఇతర వెబ్ పేజీని శైలి వలె బాహ్య శైలి షీట్ లేదా శైలులు పత్రంలో కుడివైపున జోడించవచ్చు.