Hiểu cách IFrame hoạt động trong thiết kế trang web
Khi bạn nhúng một phần tử vào HTML của mình, bạn có hai cơ hội để thêm các kiểu CSS vào nó:
- Bạn có thể tạo kiểu cho chính IFRAME.
- Bạn có thể tạo kiểu cho trang trong IFRAME (trong các điều kiện nhất định).
Sử dụng CSS để tạo kiểu cho phần tử IFRAME
Điều đầu tiên bạn nên cân nhắc khi tạo kiểu iframe là chính IFRAME. Mặc dù hầu hết các trình duyệt đều bao gồm iframe mà không có nhiều kiểu phụ, nhưng bạn nên thêm một số kiểu để giữ cho chúng phù hợp.
Dưới đây là một số kiểu CSS mà tôi luôn đưa vào iframe của mình:
- lề: 0;
- padding: 0;
- border: none;
- width: value ;
- chiều cao: giá trị ;
Với chiều rộng và chiều cao được đặt thành kích thước vừa với tài liệu của tôi. Dưới đây là ví dụ về một khung không có kiểu và một kiểu chỉ có kiểu cơ bản. Như bạn có thể thấy, các kiểu này chủ yếu chỉ xóa đường viền xung quanh khung nội tuyến, nhưng chúng cũng đảm bảo rằng tất cả các trình duyệt đều hiển thị khung nội tuyến có cùng lề, đệm và thứ nguyên.
HTML5 khuyên bạn nên sử dụng thuộc tính tràn để xóa các thanh cuộn, nhưng điều đó không đáng tin cậy. Vì vậy, nếu bạn muốn xóa hoặc thay đổi thanh cuộn, bạn cũng nên sử dụng thuộc tính cuộn trên iframe của mình. Để sử dụng thuộc tính cuộn, hãy thêm thuộc tính đó như bất kỳ thuộc tính nào khác và sau đó chọn một trong ba giá trị: có, không hoặc tự động. có yêu cầu trình duyệt luôn bao gồm thanh cuộn ngay cả khi chúng không cần thiết. không nói để loại bỏ tất cả các thanh cuộn cho dù cần thiết hay không.
tự động là mặc định và bao gồm các thanh cuộn khi chúng cần thiết và loại bỏ chúng khi chúng không.
Đây là cách tắt cuộn bằng thuộc tính cuộn:
scrolling = "no" >
Đây là iframe.
Để tắt tính năng cuộn trong HTML5, bạn phải sử dụng thuộc tính tràn. Nhưng như bạn có thể thấy trong những ví dụ này, nó không hoạt động đáng tin cậy trong tất cả các trình duyệt.
Đây là cách bạn sẽ bật cuộn tất cả thời gian với thuộc tính tràn:
style = "overflow: scroll;" >
Đây là iframe.
Không có cách nào để tắt hoàn toàn cuộn với thuộc tính tràn.
Nhiều nhà thiết kế muốn các iframe của họ hòa trộn với nền của trang mà họ đang ở để người đọc không biết rằng các iframe thậm chí còn ở đó. Nhưng bạn cũng có thể thêm phong cách để làm nổi bật chúng. Điều chỉnh đường viền để khung nội tuyến hiển thị dễ dàng hơn. Chỉ cần sử dụng thuộc tính kiểu đường viền (hoặc thuộc tính border-top, border-right, border-left và border-bottom liên quan) để tạo kiểu cho các đường viền:
iframe {
border-top: # c00 1px chấm chấm;
border-right: # c00 2px chấm chấm;
border-left: # c00 2px chấm chấm;
border-bottom: # c00 4px chấm chấm;
}
Nhưng bạn không nên dừng lại bằng cách cuộn và biên giới cho phong cách của mình. Bạn có thể áp dụng nhiều kiểu CSS khác cho khung nội tuyến của mình. Ví dụ này sử dụng các kiểu CSS3 để cung cấp cho khung nội tuyến một bóng, các góc được làm tròn và xoay nó 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;
hộp bóng: 4px 4px 14px # 000;
-moz-transform: xoay (20deg);
-webkit-transform: xoay (20deg);
-o-transform: xoay (20deg);
-ms-transform: xoay (20deg);
bộ lọc: progid: DXImageTransform.Microsoft.BasicImage (rotation = .2);
}
Tạo kiểu nội dung iframe
Tạo kiểu nội dung của khung nội tuyến giống như tạo kiểu cho bất kỳ trang web nào khác. Tuy nhiên, bạn phải có quyền truy cập để chỉnh sửa trang . Nếu bạn không thể chỉnh sửa trang (ví dụ: trang đó trên một trang web khác).
Nếu bạn có thể chỉnh sửa trang, khi đó bạn có thể thêm một trang hoặc kiểu phong cách bên ngoài ngay trong tài liệu giống như bạn sẽ tạo kiểu cho bất kỳ trang web nào khác trên trang web của mình.