برخی از مواقع هنگامی که شما یک تصویر را بر روی یک صفحه ی وب لینک می دهید ، بعضی از مرورگرهای وب به طور خودکار یک حاشیه در اطراف تصویر اضافه می کنند. در این مقاله به معرفی روش هایی می پردازیم که با استفاده از آن ها بتوانیم این border تصاویر را از بین ببریم و یا ایجاد کنیم. برای حذف border تصاویر در برخی از مرورگرها ، دو روش مختلف css وجود دارد.
حذف border دور عکس ها
در روش اول می توان css , style را به صورت داخلی به تگ img اضافه کرد. لذا برای از بین بردن border تصاویر باید مقدار border attribute تگ 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 در اطراف تصاویر پیوند اضافه کنید باید به صورت دستی style مربوطه را وارد نمایید. در این مقاله سه روش برای اضافه کردن border به یک تصویر لینک شده توضیح داده شده است. بهترین راه برای انجام این کار این است که از یک external style sheet استفاده کنید.
اولین روش برای اعمال 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 است. این روش شامل نوشتن css style و قرار دادن آن ها در head element می باشد. مزیت این روش این است که اگر بیش از یک تصویر در صفحه وجود داشته باشد style به طور خودکار به تمام تصاویر اعمال گردد.
<style> a img { border: 2px blue dashed; border-radius: 10px; padding: 5px; } </style>
سومین راه و بهترین راه استفاده از یک 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@ بپیوندید.
چرا دانش برنامه نویسی برای هک و امنیت اهمیت دارد؟چه زبانی را برای شروع باید انتخاب کنیم؟ هک واژه ای است که این روز ها برای همه افراد ، به خصوص افرادی که در حوزه IT و فناوری اطلاعات فعالیت می کنند بسیار جالب و هیجان انگیز است. به یک هکر یک اسباب بازی جدید بده، اولین کاری که می کنه جدا کردن قطعاتش و…
این روزها ، داشتن یک صفحه اینستاگرام پر بازدید، آرزوی خیلی‌هاست. در دنیای امروز رسانه‌های اجتماعی به یکی از ابزارهای قدرتمند و پرطرفدار تبدیل شده‌اند و هر روز به میزان محبوبیت آن‌ها افزوده می‌شود. در کشور ما، رسانه اجتماعی اینستاگرام محبوبیت بسیار زیادی دارد و بخش قابل توجهی از ایرانیان در گروه‌های سنی مختلف زمان زیادی را به حضور در این رسانه اختصاص می‌دهند. در…
“اگه برنامه تون درست کار نمی‌کنه اصلاً نگران نشید چرا که اگر همه‌چیز درست کار کنه، شما بیکار می‌شید.” قانون موشر چرا این مقاله را با این جمله معروف از موشر بزرگ شروع کردیم؟ شرکت های طراحی اپلیکیشن ، در بین همه شرکت ها و مجموعه هایی که در زمینه برنامه نویسی فعالیت می کنند ، خدمات بزرگی را به جوامع و کسب و کار…