031- 344 500 60

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

صفحه نخست » بلاگ » css » چگونگی از بین بردن border تصاویر در برخی از مرورگرها

چگونگی از بین بردن border تصاویر در برخی از مرورگرها

۲ام اسفند ۱۳۹۶
شیما قطره سامانی
69

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

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

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

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

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

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

<a href="#" target="_blank">
<img src="#" alt="example of image without a border" style="border: 0 or none;"> 
</a> 

 

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

a img { border: 0; }

یا

a img { border: none ; }

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

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

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

 

Inline Style

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

<a href="#"><img src="# "  style="border: 2px blue dashed;   border-radius: 10px; padding: 5px;"  alt="image description"> </a>

HTML Style Element

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

<style> a img { border: 2px blue dashed;   border-radius: 10px;  padding: 5px; } </style>

External Style Sheet

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

a img {  border: 2px blue dashed;  border-radius: 10px;  padding: 5px;  }

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

<link rel="stylesheet" type="text/css" href="styles.css">

 

پایان

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

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

چگونگی از بین بردن border تصاویر در برخی از مرورگرها
تعداد ستاره های خود را از این مطلب از چپ به راست انتخاب نمایید
درباره نویسنده :
شیما قطره سامانی

عاشق طراحی سایت هستم. جدی ، مصمم و پر تلاش.

مطالب مرتبط

ارسال دیدگاه

*    

*    

ارتباط با تیم پشتیبانی وب یار

تمام پشتیبان ها در حال پاسخ به مشتریان هستند. لطفا درخواست خود را ارسال نمایید تا در کوتاه ترین زمان ممکن با شما تماس بگیریم.

چه کمکی از تیم وب یار بر می آید ، با ما در میان بگذارید

برای گفتگو کلید ENTER را بفشارید