כאשר אתה מטביע אלמנט ב- HTML שלך, יש לך שתי הזדמנויות להוסיף סגנונות CSS אליו:
- אתה יכול לסגנון
IFRAME עצמה.
- ניתן לסדר את הדף בתוך
IFRAME (בתנאים מסויימים).
שימוש ב- CSS כדי לסמן את רכיב IFRAME
הדבר הראשון שאתה צריך לשקול בעת עיצוב iframes שלך הוא
IFRAME
שוליים: 0; ריפוד: 0; גבול: none; רוחב: ערך ; גובה: ערך ; עם ה רוחב
ו גובה
הגדר לגודל המתאים למסמך שלי. הנה דוגמאות של מסגרת ללא סגנונות ואחד עם רק את היסודות מנוסח. כפי שאתה יכול לראות, סגנונות אלה בעיקר להסיר רק את הגבול סביב iframe, אבל הם גם להבטיח כי כל הדפדפנים להציג iframe עם אותם שולי, ריפוד, ומידות. HTML5 ממליץ להשתמש הצפה
רכוש כדי להסיר את פסי הגלילה, אבל זה לא אמין. אז אם אתה רוצה להסיר או לשנות את פסי הגלילה, אתה צריך להשתמש גלילה
תכונה ב- iframe שלך גם כן. כדי להשתמש גלילה
, הוסף אותו כמו כל תכונה אחרת ולאחר מכן בחר אחד משלושה ערכים: כן
, לא
, או אוטומטי
כן
אומר לדפדפן לכלול תמיד פסי גלילה גם אם הם לא נחוצים. לא
אומר להסיר את כל פסי גלילה אם יש צורך או לא. אוטומטי
היא ברירת המחדל וכוללת את פסי הגלילה כאשר הם נדרשים ומסירה אותם כאשר הם לא. הנה איך לכבות את הגלילה עם גלילהתכונה: גלילה = "לא"> כדי לכבות את הגלילה ב HTML5 אתה אמור להשתמש הצפה
נכס. אבל כפי שאתה יכול לראות בדוגמאות אלה זה לא עובד באופן אמין בכל הדפדפנים עדיין. הנה איך היית מפעיל את הגלילה כל הזמן עם הצפהproperty: style = "overflow: scroll;"> יש אין סיכוי כדי לכבות את הגלילה לחלוטין עם הצפה
נכס. מעצבים רבים רוצים iframes שלהם כדי להשתלב עם הרקע של הדף הם על כך הקוראים לא יודעים כי iframes הם אפילו שם. אבל אתה יכול גם להוסיף סגנונות כדי לגרום להם להתבלט. התאמת הגבולות כך iframe מופיע בקלות רבה יותר. פשוט להשתמש גבול
(או שהוא קשור הגבול העליון
, הגבול הימני
, שמאל-שמאל
, ו הגבול התחתוןמאפיינים) לסגנון הגבולות: iframe {border-top: # c00 1 פיקסלים מנוקדים;border-right: # c00 2px dotted;border-left: # c00 2px dotted;הגבול התחתון: # c00 4px מנוקד;}
אבל אתה לא צריך להפסיק עם גלילה גבולות עבור סגנונות שלך. ניתן להחיל הרבה סגנונות CSS נוספים על ה- iframe שלך. דוגמה זו משתמשת בסגנונות CSS3 כדי לתת ל- iframe צל, פינות מעוגלות וסובב אותו 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;box-shadow: 4px 4px 14px # 000;-Moz-transform: לסובב (20deg);-webkit-transform: לסובב (20deg);-O-transform: לסובב (20deg);-ms-transform: לסובב (20deg);מסנן: progid: DXImageTransform.Microsoft.BasicImage (סיבוב = 0.2);} עיצוב התוכן של iframe הוא בדיוק כמו סגנון כל דף אינטרנט אחר. אבל אתה חייבת להיות גישה לעריכת הדף . אם אינך יכול לערוך את הדף (לדוגמה, הוא נמצא באתר אחר). אם אתה יכול לערוך את הדף, אז אתה יכול להוסיף גיליון סגנונות חיצוני או סגנונות ממש במסמך בדיוק כמו שאתה היה סגנון כל דף אינטרנט אחר באתר שלך.
זהו iframe.
זהו iframe.
עיצוב תוכן ה- iframe
