Kiedy osadzisz element w swoim HTML, masz dwie możliwości dodania do niego stylów CSS:
- Możesz stylizować
IRAMKA
samo. - Możesz stylizować stronę wewnątrz inside
IRAMKA
(pod pewnymi warunkami).
Używanie CSS do stylizowania elementu IFRAME
Pierwszą rzeczą, którą powinieneś wziąć pod uwagę podczas stylizacji elementów iframe, jest.
IRAMKA
- samo. Chociaż większość przeglądarek zawiera elementy iframe bez wielu dodatkowych stylów, nadal dobrym pomysłem jest dodanie kilku stylów, aby były spójne. Oto kilka stylów CSS, które zawsze włączamy iframe:
margines: 0;
wypełnienie: 0;
granica: brak;
szerokość: wartość;
wysokość: wartość;
Z.
szerokość
i.
wysokość
ustawić na rozmiar, który mieści się w moim dokumencie. Oto przykłady ramek bez stylów i ramek ze stylizowanymi tylko podstawowymi elementami. Jak widać, te style w większości po prostu usuwają obramowanie wokół elementu iframe, ale zapewniają również, że wszystkie przeglądarki wyświetlają ten element iframe z tymi samymi marginesami, wypełnieniem i wymiarami.HTML5 zaleca korzystanie z.
przelewowy
właściwość, aby usunąć paski przewijania w obrębie within pole przewijania, ale to nie jest wiarygodne. Więc jeśli chcesz usunąć lub zmienić paski przewijania, powinieneś użyć.
przewijanie
atrybut również w Twoim iframe. Aby skorzystać.
przewijanie
atrybut, dodaj go jak każdy inny atrybut, a następnie wybierz jedną z trzech wartości:
tak
,
Nie
lub.
automatyczny
.
tak
mówi przeglądarce, aby zawsze uwzględniała paski przewijania, nawet jeśli nie są potrzebne.
Nie
mówi, aby usunąć wszystkie paski przewijania, niezależnie od tego, czy jest to potrzebne, czy nie.
automatyczny
jest ustawieniem domyślnym i dołącza paski przewijania, gdy są potrzebne, i usuwa je, gdy nie są. Oto jak wyłączyć przewijanie za pomocą.
przewijanie
atrybut: scrolling="nie">
To jest iframe.
Aby wyłączyć przewijanie w HTML5, powinieneś użyć.
przelewowy
własność. Ale jak widać na tych przykładach, nie działa jeszcze niezawodnie we wszystkich przeglądarkach. Oto jak włączyć przewijanie przez cały czas za pomocą.
przelewowy
właściwość: style="overflow: scroll;">
To jest iframe.
Jest nie ma mowy aby całkowicie wyłączyć przewijanie za pomocą.
przelewowy
własność. Wielu projektantów chce, aby ich elementy iframe wtapiały się w tło strony, na której się znajdują, aby czytelnicy nie wiedzieli, że elementy iframe w ogóle tam są. Ale możesz także dodać style, aby się wyróżniać. Dostosowanie obramowań tak, aby element iframe wyświetlał się łatwiej, jest łatwe. Po prostu użyj.
granica
właściwość stylu (lub jest powiązana.
obramowanie-góra
,
granica-prawo
,
obramowanie lewe
, i.
obramowanie-dół
właściwości), aby stylizować obramowania: iframe {
górna granica: #c00 1px przerywana;
obramowanie po prawej: #c00 2px z kropkami;
obramowanie po lewej: #c00 2px z kropkami;
obramowanie-dół: #c00 4px z kropkami;
}
Ale nie powinieneś poprzestać na przewijaniu i obramowaniu swoich stylów. Do elementu iframe możesz zastosować wiele innych stylów CSS. W tym przykładzie użyto stylów CSS3, aby nadać elementowi iframe cień, zaokrąglone rogi i obrócić go o 20 stopni.
iframe {
margines górny: 20px;
margines-dolny: 30px;
-moz-border-radius: 12px;
-webkit-obramowanie-promień: 12px;
promień obramowania: 12px;
-moz-box-shadow: 4px 4px 14px #000;
-webkit-box-shadow: 4px 4px 14px #000;
box-shadow: 4px 4px 14px #000;
-moz-transform: obróć (20deg);
-webkit-transform: obróć (20deg);
-o-transform: obróć (20deg);
-ms-transform: obróć (20deg);
filtr: progid: DXImageTransform. Microsoft. Obraz podstawowy (obrót=.2);
}
Stylizowanie zawartości iframe
Stylizacja zawartości elementu iframe jest podobna do stylizacji każdej innej strony internetowej. Ale ty musi mieć dostęp do edycji strony. Jeśli nie możesz edytować strony (na przykład znajduje się w innej witrynie).
Jeśli możesz edytować stronę, możesz dodać zewnętrzny arkusz stylów lub style bezpośrednio w dokumencie, tak jak stylizujesz każdą inną stronę internetową w swojej witrynie.