כשאתה משלב אלמנט שלך HTML, יש לך שתי הזדמנויות להוסיף סגנונות CSS אליו:
- אתה יכול לעצב את
IFRAME
את עצמה. - אתה יכול לעצב את הדף בתוך ה-
IFRAME
(בתנאים מסויימים).
שימוש ב- CSS לעיצוב אלמנט IFRAME
הדבר הראשון שעליכם לקחת בחשבון כאשר מעצבים את iframes שלכם הוא ה-.
IFRAME
- את עצמה. בעוד שרוב הדפדפנים כוללים iframes ללא הרבה סגנונות נוספים, עדיין מומלץ להוסיף כמה סגנונות כדי לשמור על עקביות. להלן מספר סגנונות CSS שתמיד אנו כוללים iframes:
שוליים: 0;
ריפוד: 0;
גבול: אין;
רוֹחַב: ערך;
גוֹבַה: ערך;
עם ה.
רוֹחַב
ו.
גוֹבַה
הגדר לגודל שמתאים למסמך שלי. להלן דוגמאות למסגרת ללא סגנונות ואחת עם היסודות המעוצבים בלבד. כפי שאתה יכול לראות, סגנונות אלה בדרך כלל פשוט מסירים את הגבול סביב ה- iframe, אך הם גם מבטיחים כי כל הדפדפנים מציגים את iframe עם אותם שוליים, ריפוד וממדים זהים.HTML5 ממליץ לך להשתמש ב-.
הצפה
מאפיין להסרת פסי הגלילה בתוך a תיבת גלילהאבל זה לא אמין. אז אם ברצונך להסיר או לשנות את פסי הגלילה, עליך להשתמש ב.
גְלִילָה
תכונה גם ב- iframe שלך. כדי להשתמש ב-.
גְלִילָה
, הוסף אותו כמו כל מאפיין אחר ואז בחר אחד משלושת הערכים:
כן
,
לא
, או.
אוטומטי
.
כן
אומר לדפדפן לכלול תמיד פסי גלילה גם אם אין בהם צורך.
לא
אומר להסיר את כל פסי הגלילה בין אם יש צורך או לא.
אוטומטי
הוא ברירת המחדל וכולל את פסי הגלילה בעת הצורך ומסיר אותם כאשר הם אינם. הנה כיצד לבטל את הגלילה באמצעות.
גְלִילָה
attribute: scrolling = "no">
זהו iframe.
כדי לכבות את הגלילה ב- HTML5 אתה אמור להשתמש ב-.
הצפה
תכונה. אבל כפי שניתן לראות בדוגמאות אלה זה עדיין לא עובד בצורה מהימנה בכל הדפדפנים. כך תוכל להפעיל גלילה כל הזמן באמצעות ה-.
הצפה
property: style = "overflow: scroll;">
זהו iframe.
יש אין סיכוי כדי לכבות את הגלילה לחלוטין עם.
הצפה
תכונה. מעצבים רבים רוצים שה- iframes שלהם ישתלבו ברקע העמוד בו הם נמצאים, כך שהקוראים לא ידעו שה- iframes בכלל נמצא שם. אבל אתה יכול גם להוסיף סגנונות כדי להבליט אותם. התאמת הגבולות כך שה- iframe יופיע בקלות רבה יותר. פשוט השתמש ב-.
גבול
מאפיין סגנון (או שהוא קשור.
גבול עליון
,
גבול-ימין
,
גבול-שמאל
, ו.
גבול תחתון
מאפיינים) לעיצוב הגבולות: iframe {
גבול עליון: # c00 1px מנוקד;
גבול ימינה: # c00 2px מנוקד;
גבולות שמאל: # c00 2px מנוקד;
גבול תחתון: # c00 4px מנוקד;
}
אבל אתה לא צריך להפסיק עם גלילה וגבולות לסגנונות שלך. אתה יכול להחיל הרבה סגנונות CSS אחרים על ה- iframe שלך. דוגמה זו משתמשת בסגנונות CSS3 כדי לתת ל- iframe צל, פינות מעוגלות וסובב אותו 20 מעלות.
iframe {
שוליים למעלה: 20 פיקסלים;
שוליים תחתונים: 30 פיקסלים;
-מוס-גבול-רדיוס: 12 פיקסלים;
-רדיוס גבול-רשת: 12 פיקסלים;
גבול רדיוס: 12 פיקסלים;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
תיבת צל: 4 פיקסלים 4 פיקסלים 14 פיקסלים # 000;
טרנספורמציה-מוז: סובב (20 מעלות);
-webkit-transform: סובב (20deg);
- טרנספורמציה: סובב (20 מעלות);
-ms-transform: סובב (20deg);
filter: progid: DXImageTransform. מיקרוסופט. BasicImage (סיבוב = .2);
}
עיצוב תוכן ה- Iframe
עיצוב תוכן של iframe הוא בדיוק כמו עיצוב כל דף אינטרנט אחר. אבל אתה חייב להיות בעל גישה לעריכת הדף. אם אינך יכול לערוך את הדף (למשל, הוא נמצא באתר אחר).
אם אתה יכול לערוך את הדף, תוכל להוסיף גיליון סגנונות חיצוני או סגנונות ישירות במסמך בדיוק כמו שתעצב כל דף אינטרנט אחר באתר שלך.