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