Когато вграждате елемент във вашия HTML, имате две възможности да добавите CSS стилове към него:
- Можете да оформите
РАМКА
себе си. - Можете да оформите страницата в
РАМКА
(при определени условия).
Използване на CSS за оформяне на елемента IFRAME
Първото нещо, което трябва да имате предвид, когато оформяте своите рамки, е.
РАМКА
- себе си. Въпреки че повечето браузъри включват рамки без много допълнителни стилове, все пак е добра идея да добавите някои стилове, за да ги поддържате последователни. Ето някои CSS стилове, които винаги включваме iframes:
марж: 0;
подплата: 0;
граница: няма;
ширина: стойност;
височина: стойност;
С.
ширина
и.
височина
задайте размера, който се вписва в моя документ. Ето примери за рамка без стилове и такава със стилизирано само основите. Както можете да видите, тези стилове в повечето случаи просто премахват границата около рамката, но те също така гарантират, че всички браузъри показват тази рамка със същите полета, подложка и размери.HTML5 препоръчва да използвате.
препълване
свойство да премахва лентите за превъртане в рамките на поле за превъртане, но това не е надеждно. Така че, ако искате да премахнете или промените лентите за превъртане, трябва да използвате.
превъртане
атрибут и във вашия iframe. За да използвате.
превъртане
атрибут, добавете го като всеки друг атрибут и след това изберете една от трите стойности:
да
,
не
, или.
Автоматичен
.
да
казва на браузъра винаги да включва ленти за превъртане, дори ако не са необходими.
не
казва да премахнете всички ленти за превъртане, независимо дали е необходимо или не.
Автоматичен
е по подразбиране и включва лентите за превъртане, когато са необходими, и ги премахва, когато не са. Ето как да изключите превъртането с.
превъртане
атрибут: превъртане = "не">
Това е рамка.
За да изключите превъртането в HTML5, трябва да използвате.
препълване
Имот. Но както можете да видите в тези примери, той все още не работи надеждно във всички браузъри. Ето как бихте включили превъртането през цялото време с.
препълване
свойство: style = "overflow: scroll;">
Това е рамка.
Има няма начин за да изключите превъртането напълно с.
препълване
Имот. Много дизайнери искат техните вградени рамки да се съчетаят с фона на страницата, на която се намират, така че читателите да не знаят, че вградените рамки дори са там. Но можете също да добавите стилове, за да ги откроите. Регулирането на границите, така че рамката да се показва по-лесно, е лесно. Просто използвайте.
граница
style свойство (или е свързано.
граничен връх
,
граница-дясно
,
граница-ляво
, и.
граница-дъно
свойства) за оформяне на границите: iframe {
border-top: # c00 1px пунктирана;
граница вдясно: # c00 2px пунктирана;
граница вляво: # c00 2px пунктирана;
border-bottom: # c00 4px пунктирана;
}
Но не трябва да спирате с превъртане и граници за вашите стилове. Можете да приложите много други CSS стилове към вашия iframe. Този пример използва CSS3 стилове, за да придаде на рамката сянка, заоблени ъгли и да я завърти на 20 градуса.
iframe {
margin-top: 20px;
margin-bottom: 30px;
-moz-граница-радиус: 12px;
-webkit-border-radius: 12px;
граница-радиус: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
box-shadow: 4px 4px 14px # 000;
-moz-трансформация: завъртане (20deg);
-webkit-трансформация: завъртане (20deg);
-o-преобразуване: завъртане (20deg);
-ms-преобразуване: завъртане (20deg);
филтър: progid: DXImageTransform. Microsoft. BasicImage (въртене = .2);
}
Оформяне на съдържанието на рамката
Стилът на съдържанието на iframe е точно като стилизиране на всяка друга уеб страница. Но ти трябва да има достъп за редактиране на страницата. Ако не можете да редактирате страницата (например тя е на друг сайт).
Ако можете да редактирате страницата, можете да добавите външен лист със стилове или стилове точно в документа, точно както бихте оформили всяка друга уеб страница на вашия сайт.