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