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