تغییر رنگ خطوط حاشیه (border) عنصرها، با کلاس های (Class) به شکل کلی w3-border-color ، در W3.CSS
در کلید شماره 26146 ، در مورد رنگ ها (Color) در W3.CSS صحبت کردیم. با فرض دانستن مقدمات مربوط به آن کلید آموزشی، اکنون قصد داریم آموزش بدهیم که در صورت دانستن نام رنگ (Color) مورد نظرتان، چگونه آن را برای تغییر رنگ خطوط حاشیه (border) عنصرها به کار ببرید.
برای این منظور، شکل کلی کلاس (Class) مورد نیاز که باید برای عنصر مورد نظرمان در صفحه HTML ذکر شود، به صورت زیر می باشد :
که در آن، باید به جای کلمه color ، نام رنگ مورد نظر خود را بنویسید (البته با حروف کوچک).
بنابراین در کلاس های (Class) مربوط به تغییر رنگ خطوط حاشیه (border) عنصرها، ابتدا عبارت w3-border- نوشته می شود و سپس نام مربوط به رنگ، ذکر خواهد شد. مثل کلاس های زیر :
این کلاس ها (Class)، رنگ خطوط حاشیه (border) عنصر را تغییر می دهند. به عنوان مثال، کلاس w3-border-blue ، باعث می شود که رنگ خطوط حاشیه (border) عنصر برابر رنگ آبی (blue) باشد.
باید برای عنصر مورد نظر، کلاس w3-border نیز ذکر شده باشد، در غیر این صورت، اصلا خطوط حاشیه (border) برای عنصر نمایش داده نمی شود.
به مثال زیر توجه کنید :
بخش مهم کدها :
کد کامل صفحه HTML :
در کد بالا، با مشخصه margin از CSS ، عنصر را از مرزهای صفحه کمی فاصله داده ایم تا خطوط حاشیه (border) را بهتر مشاهده کنید.
نتیجه :
خطوط حاشیه (border) به رنگ قرمز (red) برای عنصر نمایش داده می شود :
در این مثال، تعیین می کنیم که خطوط حاشیه (border)، ضخیم تر باشند.
بخش مهم کدها :
با مشخصه border ، تعیین کرده ایم که ضخامت خطوط حاشیه (border) به چه اندازه باشد.
کد کامل صفحه HTML :
نتیجه :
خطوط حاشیه (border) به رنگ آبی (blue) برای عنصر نمایش داده می شود :
