Понимание того, как IFrames работают в веб-дизайне
Когда вы встраиваете элемент в ваш HTML, у вас есть две возможности добавить к нему стили CSS:
-
Вы можете стилизовать сам
IFRAME
.
-
Вы можете оформить страницу внутри
IFRAME
(при определенных условиях).
Использование CSS для стилизации элемента IFRAME
Первое, что вы должны учитывать при оформлении ваших фреймов, это
IFRAME
-
сам. Хотя большинство браузеров включают в себя iframes без большого количества дополнительных стилей, все же будет хорошей идеей добавить некоторые стили, чтобы сохранить их согласованность. Вот некоторые стили CSS, которые я всегда включаю в свои iframes:
margin: 0;
-
отступ: 0;
-
border: none;
-
width: value ;
-
height: value ;
С
ширина
а также
высота
установите размер, который подходит для моего документа. Вот примеры фрейма без стилей и стиля с базовыми стилями. Как видите, эти стили в основном просто удаляют границу вокруг iframe, но они также гарантируют, что все браузеры отображают этот iframe с одинаковыми полями, отступами и размерами. HTML5 рекомендует использовать
переполнение
свойство удалять полосы прокрутки, но это не надежно. Так что если вы хотите удалить или изменить полосы прокрутки, вы должны использовать
прокрутка
атрибут на вашем iframe, а также. Чтобы использовать
прокрутка
атрибут, добавьте его как любой другой атрибут и затем выберите одно из трех значений:
да
,
нет
, или же
auto
,
да
говорит браузеру всегда включать полосы прокрутки, даже если они не нужны.
нет
говорит удалить все полосы прокрутки, нужно ли это или нет.
auto
по умолчанию и включает полосы прокрутки, когда они необходимы, и удаляет их, когда они не нужны. Вот как отключить прокрутку с помощью
Атрибут
scrolling
: scrolling = "no" >
Это iframe.
Чтобы отключить прокрутку в HTML5, вы должны использовать
переполнение
имущество. Но, как вы можете видеть в этих примерах, он еще не работает надежно во всех браузерах. Вот как вы можете включить прокрутку все время с помощью
overflow
property: style = "overflow: scroll;" >
Это iframe.
невозможно полностью отключить прокрутку с помощью
переполнение
имущество. Многие дизайнеры хотят, чтобы их фреймы гармонировали с фоном страницы, на которой они находятся, чтобы читатели не знали, что фреймы даже есть. Но вы также можете добавить стили, чтобы выделить их. Настроить границы так, чтобы iframe показывался более легко, легко. Просто используйте
border
свойство стиля (или оно связано
border-top
,
border-right
,
border-left
, а также
свойства border-bottom
) для оформления границ: iframe {
border-top: # c00 1px dotted;
border-right: # c00 2px dotted;
border -left: # c00 2px с точками;
border-bottom: # c00 4px с точками;
}
Но вы не должны останавливаться на прокрутке и границах для ваших стилей. Вы можете применить множество других стилей CSS к вашему iframe. В этом примере используются стили CSS3 для придания iframe тени, закругленных углов и поворота на 20 градусов.
iframe {
margin-top: 20px;
margin-bottom: 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px ;
border-radius: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
box -shadow: 4px 4px 14px # 000;
-moz-transform: повернуть (20 градусов);
-webkit-transform: повернуть (20 градусов);
-o-преобразовать: повернуть (20deg) ;
-ms-transform: поворот (20 градусов);
фильтр: progid: DXImageTransform.Microsoft.BasicImage (вращение = .2);
}
Стилизация содержимого Iframe
Стилизация содержимого iframe аналогична стилизации любой другой веб-страницы. Но у вас должен быть доступ для редактирования страницы . Если вы не можете редактировать страницу (например, она находится на другом сайте).
Если вы можете редактировать страницу, то вы можете добавить внешнюю таблицу стилей или стили прямо в документ так же, как вы бы стилизовали любую другую веб-страницу на своем сайте.
