تغییر رنگ خطوط حاشیه (border) عنصرها، با کلاس های (Class) به شکل کلی w3-border-color ، در W3.CSS
در آموزش شماره 26146 ، در مورد رنگ ها (Color) در W3.CSS صحبت کردیم. با فرض دانستن مقدمات مربوط به آن کلید آموزشی، اکنون قصد داریم آموزش بدهیم که در صورت دانستن نام رنگ (Color) مورد نظرتان، چگونه آن را برای تغییر رنگ خطوط حاشیه (border) عنصرها به کار ببرید.
برای این منظور، شکل کلی کلاس (Class) مورد نیاز که باید برای عنصر مورد نظرمان در صفحه HTML ذکر شود، به صورت زیر می باشد :
xxxxxxxxxxw3-border-colorکه در آن، باید به جای کلمه color ، نام رنگ مورد نظر خود را بنویسید (البته با حروف کوچک).
بنابراین در کلاس های (Class) مربوط به تغییر رنگ خطوط حاشیه (border) عنصرها، ابتدا عبارت w3-border- نوشته می شود و سپس نام مربوط به رنگ، ذکر خواهد شد. مثل کلاس های زیر :
xxxxxxxxxxw3-border-redw3-border-bluew3-border-greenw3-border-yellowاین کلاس ها (Class)، رنگ خطوط حاشیه (border) عنصر را تغییر می دهند. به عنوان مثال، کلاس w3-border-blue ، باعث می شود که رنگ خطوط حاشیه (border) عنصر برابر رنگ آبی (blue) باشد.
باید برای عنصر مورد نظر، کلاس w3-border نیز ذکر شده باشد، در غیر این صورت، اصلا خطوط حاشیه (border) برای عنصر نمایش داده نمی شود.
به مثال زیر توجه کنید :
بخش مهم کدها :
xxxxxxxxxx<div class="w3-border w3-border-red" style="margin:20px;"> <h2>kelidestan.com</h2> <p>Learn Programming</p></div>کد کامل صفحه HTML :
xxxxxxxxxx<html> <head> <link rel="stylesheet" href="w3.css"> </head> <body> <div class="w3-border w3-border-red" style="margin:20px;"> <h2>kelidestan.com</h2> <p>Learn Programming</p> </div> </body></html>در کد بالا، با مشخصه margin از CSS ، عنصر را از مرزهای صفحه کمی فاصله داده ایم تا خطوط حاشیه (border) را بهتر مشاهده کنید.
نتیجه :
خطوط حاشیه (border) به رنگ قرمز (red) برای عنصر نمایش داده می شود :
در این مثال، تعیین می کنیم که خطوط حاشیه (border)، ضخیم تر باشند.
بخش مهم کدها :
xxxxxxxxxx<div class="w3-container w3-border-blue" style="border:16px solid;"> <h2>kelidestan.com</h2> <p>Learn Programming</p></div>با مشخصه border ، تعیین کرده ایم که ضخامت خطوط حاشیه (border) به چه اندازه باشد.
کد کامل صفحه HTML :
xxxxxxxxxx<html> <head> <link rel="stylesheet" href="w3.css"> </head> <body> <div class="w3-container w3-border-blue" style="border:16px solid;"> <h2>kelidestan.com</h2> <p>Learn Programming</p> </div> </body></html>نتیجه :
خطوط حاشیه (border) به رنگ آبی (blue) برای عنصر نمایش داده می شود :
