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