عند تضمين عنصر في HTML ، لديك فرصتان لإضافة أنماط CSS إليه:
- يمكنك اسلوب
IFRAME بحد ذاتها.
- يمكنك نمط الصفحة داخل
IFRAME (تحت ظروف معينة).
استخدام CSS لوضع نمط IFRAME
أول شيء يجب مراعاته عند تصميم iframes الخاص بك هو
IFRAME
الهامش: 0؛ الحشو: 0؛ الحدود: لا شيء ؛ عرض: القيمة ; ارتفاع: القيمة ; مع ال عرض
و ارتفاع
ضبط الحجم الذي يناسبها في وثيقي. في ما يلي أمثلة لإطار لا يتضمن أنماطًا وواحدًا يحتوي فقط على الأساسيات. كما ترون ، فإن هذه الأنماط في الغالب مجرد إزالة الحدود حول iframe ، ولكنها تضمن أيضًا أن جميع المتصفحات تعرض أن iframe بنفس الهوامش والحشو والأبعاد. HTML5 توصي باستخدام فيض
خاصية إزالة أشرطة التمرير ، ولكن هذا غير موثوق. لذلك إذا كنت تريد إزالة أو تغيير أشرطة التمرير ، يجب عليك استخدام التمرير
تنسب إلى iframe أيضًا. لاستخدام ال التمرير
، أضفه مثل أي سمة أخرى ، ثم اختر واحدة من ثلاث قيم: نعم فعلا
, لا
أو تلقاءي
نعم فعلا
يخبر المتصفح دائمًا بتضمين أشرطة التمرير حتى إذا لم تكن هناك حاجة إليها. لا
يقول لإزالة جميع أشرطة التمرير ما إذا كانت هناك حاجة أم لا. تلقاءي
هو الافتراضي ويتضمن أشرطة التمرير عند الحاجة إليها وإزالتها عندما لا تكون. هنا هو كيفية إيقاف تشغيل التمرير مع التمريرسمة: التمرير = "لا"> لإيقاف تشغيل التمرير في HTML5 ، من المفترض أن تستخدم فيض
خاصية. ولكن كما ترون في هذه الأمثلة ، فإنها لا تعمل بشكل موثوق في جميع المتصفحات حتى الآن. إليك كيف يمكنك تشغيل التمرير طوال الوقت باستخدام فيضالخاصية: style = "overflow: scroll؛"> يوجد لا يمكن لإيقاف التمرير بالكامل مع فيض
خاصية. يرغب العديد من المصممين في دمج إطارات iframe الخاصة بهم مع خلفية الصفحة التي يستخدمونها حتى لا يعرف القراء أن إطارات iframes موجودة حتى. ولكن يمكنك أيضًا إضافة أنماط لجعلها مميزة. يعد ضبط الحدود بحيث يظهر iframe أكثر سهولة. مجرد استخدام الحدود
خاصية النمط (أو أنها مرتبطة الحدود بين كبار
, الحدود اليمنى
, يسار الحدود
و الحدود القاعخصائص) لتوسيط الحدود: iframe {الحد الأعلى: # c00 1px منقط ؛border-right: # c00 2px منقط ؛border-left: # c00 2px منقط ؛الحد السفلي: # c00 4px منقط ؛}
ولكن لا ينبغي أن تتوقف مع التمرير وحدود الأنماط الخاصة بك. يمكنك تطبيق الكثير من أنماط CSS الأخرى على iframe الخاص بك. يستخدم هذا المثال أنماط CSS3 لمنح iframe ظلًا وزوايا دائرية ودوره بمقدار 20 درجة. iframe {الهامش العلوي: 20 بكسل ؛الهامش السفلي: 30 بكسل ؛-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-تحويل: تدوير (20deg)؛-webkit-تحويل: تدوير (20deg)؛-o-تحويل: تدوير (20deg)؛-ms-تحويل: تدوير (20deg)؛مرشح: معرف البرنامج: DXImageTransform.Microsoft.BasicImage (دوران = 0.2)؛} إن تصميم محتويات iframe يشبه تصميم أي صفحة ويب أخرى. لكنك يجب أن يكون لديك حق الوصول لتعديل الصفحة . إذا لم تتمكن من تحرير الصفحة (على سبيل المثال ، في موقع آخر). إذا كان بإمكانك تحرير الصفحة ، فيمكنك إضافة ورقة أنماط خارجية أو أنماط في المستند تمامًا كما تفعل مع أي صفحة ويب أخرى على موقعك.
هذا هو iframe.
هذا هو iframe.
تصميم محتويات Iframe
