Разуменне таго, як IFrames працы ў вэб-дызайну
Калі вы ўстаўляеце элемент у вашым HTML , у вас ёсць дзве магчымасці , каб дадаць стылі CSS да яго:
- Вы можаце стыль самага IFRAME.
- Вы можаце стылізаваць старонку ўнутры IFRAME (пры пэўных умовах).
Выкарыстанне CSS для стылізацыі элемента IFRAME
Першае, што трэба ўлічваць пры кладцы Iframes з'яўляецца сам IFRAME. У той час як большасць браўзэраў ўключаюць плаваюць фрэймы без вялікай колькасці дадатковых стыляў, гэта ўсё яшчэ добрая ідэя, каб дадаць некаторыя стылі, каб трымаць іх паслядоўна.
Вось некаторыя стылі CSS я заўсёды ўключаю ў маіх фрэймах:
- Маржа: 0;
- абіўка: 0;
- мяжы: няма;
- шырыня: значэнне;
- вышыня: значэнне;
Пры шырыні і вышыні, усталяванай на памер, які падыходзіць у маім дакуменце. Вось прыклады кадра без якіх-небудзь стыляў і адзін толькі з асновамі стылю. Як вы можаце бачыць, гэтыя стылі ў асноўным проста выдаліць мяжу вакол фрэйма, але яны таксама гарантуюць, што ўсе браўзэры паказваюць, што IFRAME з тымі ж палёў, водступаў і памераў.
HTML5 рэкамендуе выкарыстоўваць ўласцівасць перапаўнення для выдалення палос пракруткі, але гэта не з'яўляецца надзейным. Так што калі вы хочаце выдаліць або змяніць паласы пракруткі, вы павінны выкарыстоўваць атрыбут пракруткі на вашым IFRAME, а таксама. Каб выкарыстаць атрыбут пракруткі, дадайце яго, як і любы іншы атрыбут, а затым выбраць адзін з трох значэнняў: Так, няма, або аўто. ды кажа браўзэру, каб заўсёды ўключаць паласы пракруткі, нават калі яны не патрэбныя. няма кажа, каб выдаліць усе паласы пракруткі, ці трэба ці не.
Аўто па змаўчанні і ўключаюць паласу пракруткі, калі яны неабходныя, і выдаляюць іх, калі яны не з'яўляюцца.
Вось як адключыць скролінг з дапамогай атрыбуту пракруткі:
скролінг = "не" >
Гэта IFrame.
Для таго, каб адключыць прагортку ў HTML5 вы павінны выкарыстоўваць ўласцівасць перапаўнення. Але , як вы можаце бачыць у гэтых прыкладах , не працуе надзейна ва ўсіх браўзэрах яшчэ.
Вось як бы вы ўключыць прагортку ўвесь час з уласцівасцю перапаўнення:
стыль = "перапаўненне: пракруткі;" >
Гэта IFrame
.
Там няма ніякага спосабу , каб адключыць скролінг цалкам з уласцівасцю перапаўнення.
Многія дызайнеры хочуць, каб іх плаваюць фрэймы злівацца з фонам старонкі яны знаходзяцца на так, што чытачы не ведаюць, што плаваюць фрэймы нават там. Але вы таксама можаце дадаць стылі, каб зрабіць іх вылучыцца. Настройка межаў, так што IFrame праяўляецца з большай гатоўнасцю лёгка. Проста выкарыстоўвайце ўласцівасць мяжы стылю (ці гэта звязана мяжы верхам, межы-права, пагранічны левы і межы дна ўласцівасці) стылізаваць мяжы:
IFrame {
мяжы зверху: # c00 1px пункцір;
мяжы справа: # c00 2px пункцір;
мяжы злева: # c00 2px пункцір;
мяжа дна: # c00 4px пункцір;
}
Але вы не павінны спыняцца з пракруткай і межаў для вашых стыляў. Вы можаце ўжыць шмат іншых стыляў CSS для вашага фрэйма. Гэты прыклад выкарыстоўвае стылі CSS3, каб даць IFrame цені, закругленыя куты, і паварочваць яго на 20 градусаў.
IFrame {
Запас-топ: 20px;
край дно: 30px;
-moz-мяжы радыус: 12px;
-webkit-мяжы радыус: 12px;
мяжы радыус: 12px;
-moz-бокс-цень: 4px 4px 14px # 000;
-webkit-бокс-цень: 4px 4px 14px # 000;
коробчатой цень: 4px 4px 14px # 000;
-moz-пераўтварэнне: паварот (20deg);
-webkit-пераўтварэнне: паварот (20deg);
-o-пераўтварэнне: Паварот (20deg);
-MS-пераўтварэнне: паварот (20deg);
Фільтр: ProgID: DXImageTransform.Microsoft.BasicImage (кручэнне = 0,2);
}
Стылізацыя Iframe Змест
Стылізацыя змесціва фрэйма сапраўды гэтак жа як кладка любой іншай вэб-старонцы. Але, вы павінны мець доступ да рэдагавання старонкі. Калі вы не можаце рэдагаваць старонку (напрыклад, гэта на іншым сайце).
Калі вы можаце рэдагаваць старонку, то вы можаце дадаць знешнюю табліцу стыляў або стыляў прама ў дакуменце гэтак жа , як вы б стыль любой іншай вэб - старонкі на вашым сайце.