ทำความเข้าใจว่า IFrame ทำงานอย่างไรในการออกแบบเว็บไซต์
เมื่อคุณฝังองค์ประกอบไว้ใน HTML คุณมีโอกาสสองประการที่จะเพิ่ม สไตล์ CSS ให้กับ:
- คุณสามารถกำหนดรูปแบบ IFRAME ได้เอง
- คุณสามารถจัดรูปแบบหน้าเว็บภายใน IFRAME (ภายใต้เงื่อนไขบางประการ)
ใช้ CSS เพื่อสร้างองค์ประกอบ IFRAME
สิ่งแรกที่คุณควรพิจารณาเมื่อใส่สไตล์ iframes ของคุณคือ IFRAME เอง แม้ว่าเบราว์เซอร์ส่วนใหญ่จะมี iframes ที่ไม่มีรูปแบบพิเศษ แต่ก็ควรเพิ่มรูปแบบบางอย่างเพื่อให้สอดคล้องกัน
ต่อไปนี้เป็นรูปแบบ CSS บางส่วนที่ฉันใส่ไว้เสมอใน iframes ของฉัน:
- margin: 0;
- padding: 0;
- ชายแดน: ไม่มี;
- ความกว้าง: ค่า ;
- ความสูง: ค่า ;
มีความกว้างและความสูงกำหนดขนาดที่เหมาะกับเอกสารของฉัน ต่อไปนี้คือตัวอย่างของเฟรมที่ไม่มีสไตล์และเป็นแบบที่มีพื้นฐานเพียงอย่างเดียว ตามที่คุณเห็นรูปแบบเหล่านี้ส่วนใหญ่จะเอาเส้นขอบรอบ ๆ iframe ออก แต่ก็ตรวจสอบให้แน่ใจว่าเบราว์เซอร์ทั้งหมดแสดง iframe ที่มีระยะขอบการเบาะและมิติเท่ากัน
HTML5 ขอแนะนำให้คุณใช้พร็อพเพอร์ตี้ล้นเพื่อลบแถบเลื่อน แต่ไม่น่าเชื่อถือ ดังนั้นหากคุณต้องการลบหรือเปลี่ยนแถบเลื่อนคุณควรใช้แอตทริบิวต์ scrolling บน iframe ของคุณด้วย หากต้องการใช้แอตทริบิวต์แบบเลื่อนให้เพิ่มแอตทริบิวต์อื่นเช่นเดียวกับแอตทริบิวต์อื่น ๆ จากนั้นเลือกค่าใดค่าหนึ่งจากสามค่าใช่หรือไม่ก็ได้ ใช่บอกเบราว์เซอร์ให้ใส่แถบเลื่อนเสมอแม้ว่าจะไม่จำเป็นก็ตาม ไม่พูดถึงการลบแถบเลื่อนทั้งหมดที่จำเป็นหรือไม่
อัตโนมัติเป็นค่าดีฟอลต์และรวมถึงแถบเลื่อนเมื่อต้องการและจะลบออกเมื่อไม่ต้องการ
ต่อไปนี้คือวิธีการปิดการเลื่อนด้วยแอตทริบิวต์เลื่อน:
เลื่อน = "ไม่ใช่" >
นี่คือ iframe
ในการปิดการเลื่อนใน HTML5 คุณควรใช้คุณสมบัติ overflow แต่อย่างที่คุณเห็นใน ตัวอย่างเหล่านี้ จะไม่ทำงานได้อย่างน่าเชื่อถือในเบราว์เซอร์ทั้งหมด
ต่อไปนี้เป็นวิธีที่คุณจะเปิดใช้งานการเลื่อนลงตลอดเวลาโดยใช้พร็อพเพอร์ตี้ล้น:
style = "overflow: scroll;" >
นี่คือ iframe
ไม่มีวิธีใดที่ จะปิดการเลื่อนลงอย่างสมบูรณ์โดยใช้คุณสมบัติล้น
นักออกแบบหลายคนต้องการให้ iframes ของพวกเขาผสมผสานกับพื้นหลังของหน้าเว็บที่พวกเขาอยู่เพื่อให้ผู้อ่านไม่ทราบว่า iframe อยู่ที่นั่น แต่คุณยังสามารถเพิ่มรูปแบบเพื่อให้โดดเด่นได้ การปรับเส้นขอบเพื่อให้ iframe แสดงได้ง่ายขึ้นเป็นเรื่องง่าย เพียงแค่ใช้คุณสมบัติของสไตล์เส้นขอบ (หรือที่เกี่ยวข้องกับ border-top, border-right, border-left และ border-bottom properties) เพื่อกำหนดเส้นขอบ:
iframe {
border-top: # c00 จุด 1 จุด;
border-right: # c00 2px จุด;
border-left: # c00 2px จุด;
border-bottom: # c00 จุด 4px;
}
แต่คุณไม่ควรหยุดด้วยการเลื่อนและเส้นขอบสำหรับสไตล์ของคุณ คุณสามารถใช้สไตล์ CSS อื่น ๆ กับ iframe ของคุณได้ ตัวอย่างนี้ใช้รูปแบบ CSS3 เพื่อให้ iframe เป็นเงามุมโค้งมนและหมุนไป 20 องศา
iframe {
margin-top: 20px;
margin-bottom: 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
รัศมีขอบ: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
- เว็บแคมกล่อง - เงา: 4px 4px 14px # 000;
กล่องเงา: 4px 4px 14px # 000;
-moz-เปลี่ยน: หมุน (20deg);
-webkit-เปลี่ยน: หมุน (20deg);
-o-เปลี่ยน: หมุน (20deg);
-ms-เปลี่ยน: หมุน (20deg);
กรอง: ProgID: DXImageTransform.Microsoft.BasicImage (หมุน = 0.2);
}
จัดรูปแบบเนื้อหา Iframe
การจัดรูปแบบเนื้อหาของ iframe ก็เหมือนกับการจัดรูปแบบหน้าเว็บอื่น ๆ แต่คุณ ต้องมีสิทธิ์เข้าถึงเพื่อแก้ไขเพจ หากคุณไม่สามารถแก้ไขหน้าเว็บ (ตัวอย่างเช่นในเว็บไซต์อื่น)
หากคุณสามารถแก้ไขหน้าเว็บได้คุณสามารถเพิ่ม สไตล์ชีต หรือ สไตล์ภายนอก ในเอกสารได้ เช่นเดียวกับที่คุณกำหนดให้กับหน้าเว็บอื่น ๆ ในไซต์ของคุณ