نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 1655
تاریخ بروزرسانی ۱۸ اردیبهشت ۱۴۰۰

حذف border تصاویر در برخی از مرورگرها

حذف border تصاویر در مرورگرها

برخی از مواقع هنگامی که شما یک تصویر را بر روی یک صفحه­ ی وب لینک می دهید ، بعضی از مرورگرهای وب به­ طور خودکار یک حاشیه در اطراف تصویر اضافه می­ کنند. در این مقاله به معرفی روش­ هایی می­ پردازیم که با استفاده از آن­ ها بتوانیم این border تصاویر را از بین ببریم و یا ایجاد کنیم. برای حذف border تصاویر در برخی از مرورگرها ، دو روش مختلف css  وجود دارد.

چگونگی از بین بردن border دور عکس ها

حذف border دور عکس ها

از بین بردن border تصاویر

در روش اول می­ توان  css , style را به­ صورت داخلی به تگ img اضافه کرد. لذا برای از بین بردن border تصاویر باید مقدار border attribute تگ img را صفر و یا none در نظر گرفت.

 

با توجه به این­که روش اول (inline styles) مدت زمان زیادی است که دیگر استفاده نمی­ شود ، امروزه بهتر است برای نوشتن یک  style  از یک external stylesheet به جای اضافه کردن style به­ صورت مستقیم به تگ­ های html استفاده کرد. بنابراین برای از بین بردن border تصاویر ،  یک فایل با نام style.css ایجاد کرده و کد زیر را به آن اضافه می کنیم.

یا

حال باید stye.css به فایل html لینک شود تا محتویات نوشته شده در آن به محتویات فایل html اعمال گردد.

قرار دادن border برای تصاویر

در گذشته برخی از مرورگرها به­ طور خودکار یک border در اطراف تصاویر لینک شده اضافه می ­کردند، اما امروزه اکثر مرورگرهای مدرن این عمل را کاهش داده ­اند. حال اگر می­خواهید یک border در اطراف تصاویر پیوند اضافه کنید باید به­ صورت دستی style مربوطه را وارد نمایید. در این مقاله سه روش برای اضافه کردن border به یک تصویر لینک­ شده توضیح داده­ شده است. بهترین راه برای انجام این کار این است که از یک external style sheet استفاده کنید.

 

Inline Style

اولین روش برای اعمال border به تصاویر ، استفاده از روش inline styling استکه قبلا برای از بین بردن border تصاویر استفاده شد. با این حال در این مورد به جای حذف border تصاویر ، از یک Inline Styling برای ایجاد یک border استفاده می کنیم.

HTML Style Element

راه دوم برای رسیدن به همان نتیجه استفاده از HTML style element است. این روش شامل نوشتن css style و قرار دادن آن ­ها در head element می­ باشد. مزیت این روش این است که اگر بیش از یک تصویر در صفحه وجود داشته باشد style به­ طور خودکار به تمام تصاویر اعمال گردد.

External Style Sheet

سومین راه و بهترین راه استفاده از یک external style sheet است. با اضافه کردن style به یک external style sheet می ­توانیم style ها را به تعداد نامحدود از اسناد html اعمال نماییم.

لذا کد بالا را در یک فایل ساده­ ی متنی تایپ نموده و با نامی مانند style.css ذخیره می کنیم. سپس فایل style.css تگ لینک زیر به سند html خود پیوند می دهید.

 

پایان

در این مقاله راه حل هایی بیان شد که برای حذف border تصاویر در برخی از مرورگرها کاربرد داشت. از توجهی که به این مقاله نمودید سپاسگذاریم و برایتان آرزوی موفقیت بیشتر داریم.

برای دریافت آموزش های بیشتر به کانال وب یار webyar_net@ بپیوندید.

 

مقالات مرتبط

نشانی ایمیل شما منتشر نخواهد شد.