درک چگونگی IFrames در طراحی وب سایت کار می کند
هنگامی که یک عنصر را در HTML خود جاسازی می کنید، شما دو فرصت برای اضافه کردن سبک CSS به آن دارید:
- شما می توانید IFRAME خود را سبک کنید.
- شما می توانید صفحه داخل IFRAME (تحت شرایط خاص) را سبک کنید.
استفاده از CSS به سبک عنصر IFRAME
اولین چیزی که باید در نظر بگیرید وقتی که iframes خود را طراحی می کند IFRAME است. در حالی که اکثر مرورگرها شامل فایرفرمارکها بدون بسیاری از سبکهای اضافی هستند، هنوز یک ایده خوب برای اضافه کردن برخی از سبکها برای حفظ آنها هماهنگ است.
در اینجا برخی از سبک های CSS من همواره در فریم های من شامل می شوند:
- حاشیه: 0؛
- padding: 0؛
- مرز: هیچ؛
- عرض: ارزش ؛
- ارتفاع: ارزش ؛
با عرض و قد تنظیم شده به اندازه که متناسب با سند من است. در اینجا نمونه هایی از یک قاب بدون هیچ سبک و یکی فقط با اصول اولیه طراحی شده است. همانطور که می بینید، این سبک ها عمدتا مرز را در اطراف iframe حذف می کنند، اما آنها همچنین اطمینان حاصل می کنند که تمام مرورگر ها دارای iframe با حاشیه، پلاگین و ابعاد مشابه هستند.
HTML5 توصیه می کند از ملک سرریز برای حذف نوارهای پیمایش استفاده کنید، اما قابل اطمینان نیست. بنابراین اگر میخواهید نوارهای پیمایش را حذف یا تغییر دهید، باید از ویژگی پیمایش در مورد iframe خود نیز استفاده کنید. برای استفاده از ویژگی پیمایش، آن را مانند هر ویژگی دیگر اضافه کنید و سپس یکی از سه مقدار را انتخاب کنید: بله، نه یا خودکار. بله به مرورگر می گوید که همیشه شامل میله های پیمایش حتی اگر مورد نیاز نیستند. هیچ می گوید که تمام نوارهای پیمایش را حذف کند یا خیر.
خودکار به طور پیش فرض است و شامل میله های پیمایش زمانی که آنها مورد نیاز است و آنها را حذف زمانی که آنها نیست.
در اینجا نحوه غیرفعال کردن پیمایش با ویژگی پیمایش است.
پیمایش = "نه"
این یک iframe است.
برای غیرفعال کردن پیمایش در HTML5، شما باید از ویژگی سرریز استفاده کنید. اما همان طور که می بینید در این مثال ها ، در تمام مرورگرها قابل اعتماد نیست.
در اینجا چگونگی پیمایش در همه زمان ها با ویژگی سرریز به پایان می رسد:
style = "overflow: scroll؛" >
این یک iframe است.
هیچ راهی برای خاموش کردن پیمایش به طور کامل با ویژگی سرریز وجود ندارد.
بسیاری از طراحان می خواهند قاب های خود را با پس زمینه صفحه ای که در آن قرار دارند ترکیب کنند تا خواننده ها متوجه باشند که iframes حتی در آن وجود دارد. اما شما همچنین می توانید سبک های خود را به آنها اضافه کنید. تنظیم مرزها به طوری که iframe به راحتی نشان داده می شود آسان است. فقط از ویژگی ملک مرزی (یا آن مربوط به مرز بالا، مرز راست، مرز چپ، و ویژگی های مرزی پایین) استفاده از مرزهای سبک:
iframe {
border-top: # c00 1px dotted؛
border-right: # c00 2px dotted؛
border-left: # c00 2px dotted؛
border-bottom: # c00 4px dotted؛
}
اما نباید با پیمایش و مرزهای خود برای سبک های خود متوقف شوید. شما می توانید بسیاری از سبک های CSS دیگر را به iframe خود اعمال کنید. این مثال از سبدهای CSS3 استفاده می کند تا iframe یک سایه، گوشه های گرد داشته و آنرا 20 درجه چرخانده باشد.
iframe {
حاشیه بالا: 20 پیکسل.
حاشیه پایین: 30 پیکسل؛
-moz-border-radius: 12px؛
-webkit-border-radius: 12px؛
مرز شعاع: 12px؛
-moz-box-shadow: 4px 4px 14px # 000؛
-webkit-box-shadow: 4px 4px 14px # 000؛
جعبه سایه: 4px 4px 14px # 000؛
-moz-transform: چرخش (20deg)؛
-webkit-تبدیل: چرخش (20deg)؛
-o-transform: چرخش (20deg)؛
-ms-transform: چرخش (20deg)؛
فیلتر: progid: DXImageTransform.Microsoft.BasicImage (چرخش = .2)؛
}
یک ظاهر طراحی شده محتوای محتوا
محتویات یک iframe یک ظاهر طراحی شده درست مثل یک صفحه وب دیگر است. اما شما باید برای ویرایش صفحه دسترسی داشته باشید . اگر نمی توانید صفحه را ویرایش کنید (به عنوان مثال، آن را در سایت دیگری).
اگر می توانید صفحه را ویرایش کنید، میتوانید یک سند سبک یا سبک مستطیل را در سند درست اضافه کنید همانطور که هر صفحه وب دیگری را در سایت خود سبک می کنید.