Како обликовати оквире са ЦСС-ом

click fraud protection

Када уграђујете елемент у свој ХТМЛ, имате две могућности да му додате ЦСС стилове:

  • Можете стилизовати
    ИФРАМЕ
    себе.
  • Можете стилизовати страницу унутар
    ИФРАМЕ
    (под одређеним условима).

Коришћење ЦСС-а за обликовање ИФРАМЕ елемента

Двојица људи који кодирају на рачунарима
вгајиц / Гетти Имагес

Прва ствар коју бисте требали узети у обзир приликом обликовања својих ифрамеова је.

ИФРАМЕ
  • себе. Иако већина прегледача укључује ифраме-ове без пуно додатних стилова, ипак је добра идеја додати неке стилове како би били доследни. Ево неколико ЦСС стилова које увек укључујемо ифрамес:
    маржа: 0;
  • попуњавање: 0;
  • граница: нема;
  • ширина: вредност;
  • висина: вредност;

Са.

ширина

и.

висина

подесите на величину која одговара мом документу. Ево примера оквира без стилова и оног са само основним стилом. Као што видите, ови стилови углавном само уклањају обруб око ифраме-а, али такође омогућавају да сви прегледачи приказују тај ифраме са истим маргинама, удаљеностима и димензијама.ХТМЛ5 препоручује да користите.

преливање

својство уклањања клизача у а клизач, али то није поуздано. Дакле, ако желите да уклоните или промените траке за померање, требало би да користите.

instagram viewer

помицање

атрибут и на вашем ифраме-у. Да бисте користили.

помицање

атрибут, додајте га као било који други атрибут, а затим одаберите једну од три вредности:

да

,

не

, или.

ауто

.

да

говори прегледачу да увек укључује траке за померање, чак и ако нису потребне.

не

каже да уклања све траке за померање без обзира на то да ли је то потребно или не.

ауто

је подразумевано и укључује траке за помицање када су потребне и уклања их када нису. Ево како да искључите померање помоћу.

помицање
атрибут: сцроллинг = "но">
Ово је ифраме.

Да бисте искључили помицање у ХТМЛ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);
}

Стилизовање садржаја оквира

Стилизовање садржаја ифраме-а је исто као и обликовање било које друге веб странице. Али ти мора имати приступ за уређивање странице. Ако не можете да уредите страницу (на пример, налази се на другој веб локацији).

Ако можете да уредите страницу, тада можете да додате спољну табелу стилова или стилове директно у документ баш као што бисте обликовали било коју другу веб страницу на својој веб локацији.

instagram story viewer