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

آخرین بروز رسانی: اسفند ۱۰, ۱۳۹۶

برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
https://www.webyar.net/

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

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 تصاویر در برخی از مرورگرها اولین بار در طراحی سایت اصفهان | سئو سایت اصفهان پدیدار شد.

طراحی سایت اصفهان | سئو سایت اصفهان

پربازدیدترین اخبار

لیست سنگبری ها و اطلاعات سنگبری ها کشور ایران به واسطه موقعیت جغرافیایی مناسب ، از جمله کشورهای صاحب عنوان و مطرح در زمینه تولید سنگ های ساختمانی و کارخانجات سنگ می باشد. یکی از مزایای خدادادی صنعت سنگ در ایران تنوع رنگ و معادن آن است. در ایران انواع معادن سنگ های تزئینی با […]

طراحی سایت اصفهان

طراحی سایت اصفهان |طراحی سایت حرفه ای | سئو تضمینی سایت طراحی سایت اصفهان تیم طراحی سایت و سئو سایت وب یار به آدرس http://www.webyar.net ، بامجوز رسمی از نظام کامپیوتر کشور و دارای نماد اعتماد و نماد ساماندهی و با ۱۶ سال دانش تخصصی در زمینه طراحی وب سایت ,سئوسایت در گوگل و امنیت […]

عکس بستنی قیفی بستنی قیفی یک بستنی محبوب همه و به ویژه محبوب بچه هاست. نان های قیقی با شکل های مختلف به این منظور تولید می شوند و هر نوع بستنی از میوه ای و شکلاتی گرفته تا خامه ای را به صورت قیفی و به اشکال زیبا عرضه می کنند. در اینجا عکسهای […]

طراحی سایت

طراحی سایت در اصفهان   طراحی سایت و سئو سایت در اصفهان   تیم طراحی سایت و سئو سایت وب یار به آدرس ، بامجوز رسمی از نظام کامپیوتر کشور و دارای نماد اعتماد و نماد ساماندهی و با ۱۶ سال دانش تخصصی در زمینه طراحی وب سایت , سئو سایت در گوگل ، ارسال […]

رام رسمی اندروید ۶٫۰٫۱ ملقب به مارشمالو بلاخره برای سامسونگ گلکسی S5 منتشر شد. در این پست تمامی رام های اندروید ۶ سری SM-G900 را به تفکیک مدل با آموزش اختصاصی نصب متنی و ویدیویی قرار میدهیم. همانطور که میدانید حتی اندروید ۵٫۱٫۱ برای گلکسی اس۵ منتشر نشد و این دیوایس با نسخه مشکل دار […]

طرح حنا روی دست رنگ آمیزی با رنگ های طبیعی مثل حنا روی پوست بدن در کشورهای آسیایی بسیار رایج است و زیبایی آن باعث شده است به مدی در دنیا تبدیل شود. در تصاویر زیر نمونه هایی از طرح حنا روی دست را می توانید ببینید:       نوشته طرح حنا روی دست […]

مدل لباس ورزشی زنانه ای که انتخاب می‌کنید، می‌تواند یک مدل ساده باشد یا یک مدل جذاب و مطابق با مد روز. اما بیایید به سال ۲۰۱۶ مدهایی مانند لگینگ های طرح‌دار یا استفاده از پارچه‌ی مخمل در لباس های اسپرت زنانه فکر کنیم که چقد ظاهر جذاب‌تری به لباس های همیشگی می‌داد؛ ۲۰۱۷ قرار […]