Когда вы вставляете элемент в свой HTML, у вас есть две возможности добавить к нему стили CSS:
- Вы можете
IFRAME сам.
- Вы можете создать страницу внутри
IFRAME (при определенных условиях).
Использование CSS для стилирования элемента IFRAME
Первое, что вам следует учитывать при стилизации ваших фреймов, - это
IFRAME
margin: 0; заполнение: 0; border: none; ширина: значение ; рост: значение ; С ширина
а также рост
установите размер, соответствующий моему документу. Вот примеры фрейма без стилей и один с базовыми стилями. Как вы можете видеть, эти стили в основном просто удаляют границу вокруг iframe, но они также гарантируют, что все браузеры отображают этот iframe с одинаковыми полями, дополнениями и размерами. HTML5 рекомендует использовать переполнение
свойство для удаления полос прокрутки, но это ненадежно. Поэтому, если вы хотите удалить или изменить полосы прокрутки, вы должны использовать прокрутки
атрибут на вашем iframe. Использовать прокрутки
атрибут, добавьте его как любой другой атрибут и затем выберите одно из трех значений: да
, нет
, или же авто
да
говорит браузеру всегда включать полосы прокрутки, даже если они не нужны. нет
говорит, что нужно удалить все полосы прокрутки, необходимые или нет. авто
по умолчанию и включает полосы прокрутки, когда они необходимы, и удаляет их, когда они не являются. Вот как отключить прокрутку с помощью прокруткиАтрибут: скроллинг = «нет»> Чтобы отключить прокрутку в HTML5, вы должны использовать переполнение
имущество. Но, как вы можете видеть в этих примерах, он не работает надежно во всех браузерах. Вот как бы вы все время включали прокрутку с помощью переполнениесвойство: style = "overflow: scroll;"> Есть ни за что полностью отключить прокрутку с помощью переполнение
имущество. Многие дизайнеры хотят, чтобы их фреймы смешались с фоном страницы, на которой они расположены, чтобы читатели не знали, что фреймы существуют даже там. Но вы также можете добавить стили, чтобы выделиться. Регулировка границ так, что iframe проявляется с большей легкостью. Просто используйте граница
(или это связано с границы сверху
, граница правой
, границы левого
, а также граница днасвойства) для оформления границ: iframe {border-top: # c00 1px dotted;border-right: # c00 2px dotted;border-left: # c00 2px dotted;border-bottom: # c00 4px dotted;}
Но вы не должны останавливаться на прокрутке и границах для своих стилей. Вы можете применить много других стилей 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-преобразование: поворот (20deg);-webkit-преобразование: поворот (20deg);-o-преобразование: Поворот (20deg);-MS-преобразование: поворот (20deg);Фильтр: ProgID: DXImageTransform.Microsoft.BasicImage (вращение = 0,2);} Стилизация содержимого iframe - это как стиль любой другой веб-страницы. Но ты должен иметь доступ к редактированию страницы , Если вы не можете редактировать страницу (например, она находится на другом сайте). Если вы можете отредактировать страницу, вы можете добавить внешнюю таблицу стилей или стили прямо в документ так же, как вы бы создали любую другую веб-страницу на своем сайте.
Это iframe.
Это iframe.
Стилирование содержимого iframe
