عندما تقوم بتضمين عنصر في ملف لغة البرمجة، لديك فرصتان لإضافة أنماط CSS إليها:
- يمكنك تصميم ملف
IFRAME
بحد ذاتها. - يمكنك تصميم الصفحة داخل ملف
IFRAME
(تحت ظروف معينة).
استخدام CSS لتصميم عنصر IFRAME
أول شيء يجب مراعاته عند تصميم إطارات iframe هو ملف.
IFRAME
- بحد ذاتها. بينما تتضمن معظم المتصفحات إطارات iframe بدون الكثير من الأنماط الإضافية ، إلا أنه لا يزال من الجيد إضافة بعض الأنماط للحفاظ على اتساقها. فيما يلي بعض أنماط CSS التي ندرجها دائمًا إطارات iframe:
الهامش: 0؛
حشوة: 0 ؛
الحدود: لا شيء ؛
العرض: القيمة;
ارتفاع: القيمة;
مع ال.
العرض
و.
ارتفاع
تعيين الحجم الذي يناسب المستند الخاص بي. فيما يلي أمثلة لإطار بدون أنماط وآخر به الأساسيات فقط. كما ترى ، تقوم هذه الأنماط في الغالب بإزالة الحدود حول إطار iframe ، ولكنها تضمن أيضًا أن جميع المستعرضات تعرض إطار iframe هذا بنفس الهوامش والحشو والأبعاد.HTML5 توصي باستخدام ملف.
تجاوز
لإزالة أشرطة التمرير داخل ملف مربع التمرير، لكن هذا غير موثوق. لذلك إذا كنت تريد إزالة أشرطة التمرير أو تغييرها ، فيجب عليك استخدام ملحق.
التمرير
السمة على iframe الخاص بك أيضًا. لاستخدام ال.
التمرير
السمة ، قم بإضافتها مثل أي سمة أخرى ثم اختر واحدة من القيم الثلاث:
نعم
,
لا
، أو.
تلقاءي
.
نعم
يخبر المتصفح بتضمين أشرطة التمرير دائمًا حتى إذا لم تكن هناك حاجة إليها.
لا
يقول لإزالة كافة أشرطة التمرير سواء كانت مطلوبة أم لا.
تلقاءي
هو الإعداد الافتراضي ويتضمن أشرطة التمرير عند الحاجة إليها ويزيلها عندما لا تكون كذلك. فيما يلي كيفية إيقاف تشغيل التمرير باستخدام ملف.
التمرير
السمة: التمرير = "لا">
هذا هو إطار iframe.
لإيقاف تشغيل التمرير في HTML5 ، من المفترض أن تستخدم الامتداد.
تجاوز
منشأه. ولكن كما ترى في هذه الأمثلة ، فإنها لا تعمل بشكل موثوق في جميع المتصفحات حتى الآن. إليك كيفية تشغيل التمرير طوال الوقت باستخدام ملف.
تجاوز
الخاصية: style = "overflow: scroll؛">
هذا هو إطار iframe.
هنالك مستحيل لإيقاف تشغيل التمرير تمامًا باستخدام ملف.
تجاوز
منشأه. يرغب العديد من المصممين في دمج إطارات iframe الخاصة بهم مع خلفية الصفحة التي يتواجدون عليها حتى لا يعرف القراء أن إطارات iframe موجودة بالفعل. ولكن يمكنك أيضًا إضافة أنماط لإبرازها. يعد ضبط الحدود بحيث يظهر إطار iframe بسهولة أكبر أمرًا سهلاً. فقط استخدم ملف.
حدود
style (أو أنها ذات صلة.
أعلى الحد
,
يمين الحدود
,
يسار الحد
، و.
الحد السفلي
خصائص) لتصميم الحدود: iframe {
أعلى الحد: # c00 1px منقط ؛
الحد الأيمن: # c00 2px منقط ؛
يسار الحد: # c00 2px منقط ؛
الحد السفلي: # c00 4px منقط ؛
}
لكن لا يجب أن تتوقف عن التمرير والحدود لأنماطك. يمكنك تطبيق الكثير من أنماط CSS الأخرى على إطار iframe الخاص بك. يستخدم هذا المثال أنماط CSS3 لإعطاء إطار iframe ظلًا وزوايا مستديرة وتدويره بمقدار 20 درجة.
iframe {
أعلى الهامش: 20 بكسل ؛
الهامش السفلي: 30 بكسل ؛
- دائرة نصف قطرها: 12 بكسل ؛
-webkit-border-radius: 12px؛
نصف قطر الحدود: 12 بكسل ؛
-moz-box-shadow: 4px 4px 14px # 000 ؛
-webkit-box-shadow: 4px 4px 14px # 000 ؛
مربع الظل: 4px 4px 14px # 000 ؛
-موز-تحويل: تدوير (20 درجة) ؛
-webkit- تحويل: تدوير (20deg) ؛
-o-تحويل: تدوير (20deg) ؛
تحويل ms: تدوير (20deg) ؛
عامل التصفية: progid: DXImageTransform. مايكروسوفت. BasicImage (دوران = .2) ؛
}
تصميم محتويات Iframe
يشبه تصميم محتويات إطار iframe تصميم أي صفحة ويب أخرى. لكنك يجب أن يكون لديك حق الوصول لتحرير الصفحة. إذا لم تتمكن من تحرير الصفحة (على سبيل المثال ، فهي على موقع آخر).
إذا كان بإمكانك تحرير الصفحة ، فيمكنك إضافة ورقة أنماط خارجية أو أنماط مباشرة في المستند تمامًا كما تفعل مع نمط أي صفحة ويب أخرى على موقعك.