Разбирање на тоа како IFrames работат во веб дизајн
Кога вметнувате елемент во вашиот HTML , имате две можности да додадете стилови на CSS :
- Можете да го поставите самиот IFRAME.
- Можете да стилизирате страната во IFRAME (под одредени услови).
Користење на CSS за да го напише IFRAME елементот
Првото нешто што треба да се разгледа кога стилувањето на вашиот iframes е IFRAME себе. Додека повеќето пребарувачи вклучуваат iframes без многу дополнителни стилови, сепак е добра идеја да додадете некои стилови за да ги држите доследни.
Еве неколку стилови на CSS кои секогаш ги вклучувам на моите iframes:
- маргина: 0;
- Соочи: 0;
- граница: нема;
- ширина: вредност ;
- висина: вредност ;
Со ширина и висина поставени на големината која се вклопува во мојот документ. Еве примери на рамка без стилови и една со основни стилови. Како што можете да видите, овие стилови најчесто само ја отстрануваат границата околу iframe, но исто така осигуруваат дека сите прелистувачи ја прикажуваат таа iframe со истите маргини, подлога и димензии.
HTML5 препорачува да користите својство на претекување за да ги отстраните лентите за лизгање, но тоа не е сигурно. Значи, ако сакате да ги избришете или промените лентите за лизгање, треба да го користите и атрибутот за скролување на вашиот iframe. За да го користите атрибутот за скролување, додадете го како и секој друг атрибут и потоа одберете една од трите вредности: да, не, или авто. да му кажува на прелистувачот секогаш да ги вклучи лизгачките лизгачи дури и ако тие не се потребни. не вели дека ги отстранува сите лизгачи без потреба или не.
auto е стандардно и ги вклучува лизгачките лизгачи кога тие се потребни и ги отстранува кога не се.
Еве како да го исклучите лизгањето со атрибутот на скролување:
лизгање = "не" >
Ова е iframe.
За да го исклучите лизгањето во HTML5, треба да го користите имотот за претекување. Но, како што можете да видите во овие примери , сепак не работи сигурно во сите прелистувачи.
Еве како ќе го вклучите лизгањето цело време со својството на претекување:
style = "overflow: scroll;" >
Ова е iframe.
Не постои начин целосно да се исклучи лизгањето со својството на претекување.
Многу дизајнери сакаат нивните имигранти да се вклопат со позадината на страната на која се наоѓаат, така што читателите не знаат дека дури и таму се. Но, можете исто така да додадете стилови за да ги издвоите. Прилагодување на границите, така што iframe лесно се појавува. Едноставно користете го имотот на граничниот стил (или тоа е поврзано со границата, границата, десницата на границата, лево и границата) за да ги стилизирате границите:
iframe {
граница-врв: # c00 1px точки;
граница-десно: # c00 2px точки;
граница-лево: # c00 2px точки;
граница-дното: # c00 4px точки;
}
Но, не треба да престанете со лизгање и граници за вашите стилови. Можете да примените многу други стилови на CSS во вашиот iframe. Овој пример користи CSS3 стилови за да им даде на iframe сенка, заоблени агли и ротирање за 20 степени.
iframe {
маргина-врвот: 20px;
маргина-дното: 30px;
-moz-граница-радиус: 12px;
-webkit-граница-радиус: 12px;
граница-радиус: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
кутија-сенка: 4px 4px 14px # 000;
-моз-трансформирај: ротирај (20deg);
-webkit-трансформирај: ротирај (20deg);
-о-трансформирај: ротирај (20deg);
-ms-трансформирај: ротирај (20deg);
филтер: проследен: DXImageTransform.Microsoft.BasicImage (ротација = .2);
}
Стилизирање на содржината на Iframe
Стајлирањето на содржината на iframe е исто како стил на било која друга веб-страница. Но, мора да имате пристап за уредување на страницата . Ако не можете да ја уредувате страницата (на пример, таа е на друга страница).
Ако можете да ја уредувате страницата, тогаш можете да додадете надворешен стилски лист или стилови право во документот, исто како што ќе стилизирате која било друга веб-страница на вашиот сајт.