Разумевање како ИФрамес ради у дизајну веб сајта
Када уградите елемент у свој ХТМЛ , имате двије могућности да додате ЦСС стилове :
- Можете сами обликовати ИФРАМЕ.
- Можете створити страницу унутар ИФРАМЕ (под одређеним условима).
Коришћење ЦСС-а за стил ИФРАМЕ Елемента
Прва ствар коју треба узети у обзир приликом стајања ваших ифрама је ИФРАМЕ сама. Иако већина претраживача укључује ифраме без много додатних стилова, и даље је добра идеја да додате неке стилове како бисте их држали доследни.
Ево неких ЦСС стилова које увек укључујем на моје ифраме:
- маржа: 0;
- паддинг: 0;
- граница: нема;
- ширина: вредност ;
- висина: вредност ;
Са ширином и висином постављеним на величину која се уклапа у мој документ. Ево примера кадра без стилова и један са основним стиловима. Као што видите, ти стилови углавном само уклањају границу око ифраме-а, али такође обезбеђују да сви прегледачи прикажу тај ифраме са истим маргинама, паддинг-ом и димензијама.
ХТМЛ5 препоручује да користите својство преливања да уклоните траке за помицање, али то није поуздано. Дакле, ако желите да уклоните или промените траке за помицање, требало би да користите и скроловање атрибута у вашем ифраме-у. Да бисте користили атрибут скроловања, додајте га као било који други атрибут, а затим изаберите једну од три вредности: да, не или ауто. да говори претраживачу да увек укључује траке за помицање чак и ако их није потребно. не каже да уклања све траке за померање било да је потребно или не.
ауто је подразумевано и укључује траке за помицање када је потребно и уклања их када нису.
Ево како да искључите скроловање помоћу скроловања атрибута:
скроловање = "не" > <бр/> Ово је ифраме. <бр/>
Да бисте искључили скроловање у ХТМЛ5, требало би да користите својство преливања. Али, као што можете видети у овим примјерима , не функционише поуздано у свим претраживачима.
Ево како бисте стално укључивали скролујући својство прелива:
стиле = "оверфлов: сцролл;" > <бр/> Ово је ифраме. <бр/>
Нема начина да потпуно искључите скроловање са својственим преливом.
Многи дизајнери желе да се њихови асиметри уклопи у позадину странице на којој се налазе, тако да читаоци не знају да су чак и кадри. Али такође можете додати стилове како би их истакли. Подешавање граница тако да се ифраме појави лакше. Само користите својство стила границе (или је то повезано са граничним врхом, граничном десном, левом ивицом и особином граничног дна) да бисте обликовали границе:
ифраме {
бордер-топ: # ц00 1пк тачкасто;
гранична десна: # ц00 2пк тачкаста;
бордер-лефт: # ц00 2пк тачкасто;
бордер-боттом: # ц00 4пк тачкасто;
}
Али не би требало да престанете са скроловањем и границама за своје стилове. Можете да примените много других ЦСС стилова у свој оквир. Овај примјер користи ЦСС3 стилове да даје ифраме сенци, заобљене углове и ротира га за 20 степени.
ифраме {
маргин-топ: 20пк;
маргин-боттом: 30пк;
-моз-граница-радијус: 12пк;
-вебкит-граница-радијус: 12пк;
гранични радијус: 12пк;
-моз-бок-схадов: 4пк 4пк 14пк # 000;
-вебкит-бок-схадов: 4пк 4пк 14пк # 000;
бок-схадов: 4пк 4пк 14пк # 000;
-моз-трансформ: ротирати (20дег);
-вебкит-трансформ: ротирати (20дег);
-о-трансформ: ротирати (20дег);
-мс-трансформација: ротирати (20дег);
филтер: прогид: ДКСИмагеТрансформ.Мицрософт.БасицИмаге (ротација = .2);
}
Стајањем садржаја Ифраме
Стајање садржаја ифраме-а је исто као и стилизација било које друге веб странице. Али, морате имати приступ уређивању странице . Ако не можете уређивати страницу (на примјер, то је на другом мјесту).
Ако можете да уређујете страницу, онда можете додати спољашњи стилски стил или стилове у документу баш као што бисте стајали на било којој другој веб страници на вашем сајту.