تغییر رنگ متن (text) درون عنصرها، با کلاس های (Class) به شکل کلی w3-text-color ، در W3.CSS

در کلید شماره 26146 ، در مورد رنگ ها (Color) در W3.CSS صحبت کردیم. با فرض دانستن مقدمات مربوط به آن کلید آموزشی، اکنون قصد داریم آموزش بدهیم که در صورت دانستن نام رنگ (Color) مورد نظرتان، چگونه آن را برای تغییر رنگ متن (text) درون عنصرها به کار ببرید.

برای این منظور، شکل کلی کلاس (Class) مورد نیاز که باید برای عنصر مورد نظرمان در صفحه HTML ذکر شود، به صورت زیر می باشد :

که در آن، باید به جای کلمه color ، نام رنگ مورد نظر خود را بنویسید (البته با حروف کوچک).

بنابراین در کلاس های (Class) مربوط به تغییر رنگ متن (text) درون عنصرها، ابتدا عبارت w3-text- نوشته می شود و سپس نام مربوط به رنگ، ذکر خواهد شد. مثل کلاس های زیر :

این کلاس ها (Class)، رنگ متن درون عنصر را تغییر می دهند. به عنوان مثال، کلاس w3-text-red ، باعث می شود که رنگ متن درون عنصر برابر رنگ قرمز (red) باشد.

به مثال زیر توجه کنید :

مثال

بخش مهم کدها :

کد کامل صفحه HTML :

نتیجه :

متن درون عنصر، به رنگ بنفش (purple) نمایش داده می شود :

مثال

در این مثال، یک متن مشخص را با رنگ های مختلف، نمایش می دهیم.

بخش مهم کدها :

<div class="w3-row">
    <div class="w3-quarter">
        <div class="w3-container w3-center w3-padding-16 w3-text-red"><h2>kelidestan.com - Red</h2></div>
        <div class="w3-container w3-center w3-padding-16 w3-text-green"><h2>kelidestan.com - Green</h2></div>
        <div class="w3-container w3-center w3-padding-16 w3-text-blue"><h2>kelidestan.com - Blue</h2></div>
        <div class="w3-container w3-center w3-padding-16 w3-text-black"><h2>kelidestan.com - Black</h2></div>
    </div>
    <div class="w3-quarter">
        <div class="w3-container w3-center w3-padding-16 w3-text-pink"><h2>kelidestan.com - Pink</h2></div>
        <div class="w3-container w3-center w3-padding-16 w3-text-teal"><h2>kelidestan.com - Teal</h2></div>
        <div class="w3-container w3-center w3-padding-16 w3-text-indigo"><h2>kelidestan.com - Indigo</h2></div>
        <div class="w3-container w3-center w3-padding-16 w3-text-brown"><h2>kelidestan.com - Brown</h2></div>
    </div>
    <div class="w3-quarter">
        <div class="w3-container w3-center w3-padding-16 w3-text-orange"><h2>kelidestan.com - Orange</h2></div>
        <div class="w3-container w3-center w3-padding-16 w3-text-cyan"><h2>kelidestan.com - Cyan</h2></div>
        <div class="w3-container w3-center w3-padding-16 w3-text-purple"><h2>kelidestan.com - Purple</h2></div>
        <div class="w3-container w3-center w3-padding-16 w3-text-gray"><h2>kelidestan.com - Gray</h2></div>
    </div>
    <div class="w3-quarter">
        <div class="w3-container w3-center w3-padding-16 w3-text-yellow"><h2>kelidestan.com - Yellow</h2></div>
        <div class="w3-container w3-center w3-padding-16 w3-text-lime"><h2>kelidestan.com - Lime</h2></div>
        <div class="w3-container w3-center w3-padding-16 w3-text-khaki"><h2>kelidestan.com - Khaki</h2></div>
        <div class="w3-container w3-center w3-padding-16 w3-text-light-gray"><h2>kelidestan.com - Light Gray</h2></div>
    </div>
</div>

کد کامل صفحه HTML :

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="w3.css">
    </head>

<body>
        <div class="w3-row">
            <div class="w3-quarter">
                <div class="w3-container w3-center w3-padding-16 w3-text-red"><h2>kelidestan.com - Red</h2></div>
                <div class="w3-container w3-center w3-padding-16 w3-text-green"><h2>kelidestan.com - Green</h2></div>
                <div class="w3-container w3-center w3-padding-16 w3-text-blue"><h2>kelidestan.com - Blue</h2></div>
                <div class="w3-container w3-center w3-padding-16 w3-text-black"><h2>kelidestan.com - Black</h2></div>
            </div>
            <div class="w3-quarter">
                <div class="w3-container w3-center w3-padding-16 w3-text-pink"><h2>kelidestan.com - Pink</h2></div>
                <div class="w3-container w3-center w3-padding-16 w3-text-teal"><h2>kelidestan.com - Teal</h2></div>
                <div class="w3-container w3-center w3-padding-16 w3-text-indigo"><h2>kelidestan.com - Indigo</h2></div>
                <div class="w3-container w3-center w3-padding-16 w3-text-brown"><h2>kelidestan.com - Brown</h2></div>
            </div>
            <div class="w3-quarter">
                <div class="w3-container w3-center w3-padding-16 w3-text-orange"><h2>kelidestan.com - Orange</h2></div>
                <div class="w3-container w3-center w3-padding-16 w3-text-cyan"><h2>kelidestan.com - Cyan</h2></div>
                <div class="w3-container w3-center w3-padding-16 w3-text-purple"><h2>kelidestan.com - Purple</h2></div>
                <div class="w3-container w3-center w3-padding-16 w3-text-gray"><h2>kelidestan.com - Gray</h2></div>
            </div>
            <div class="w3-quarter">
                <div class="w3-container w3-center w3-padding-16 w3-text-yellow"><h2>kelidestan.com - Yellow</h2></div>
                <div class="w3-container w3-center w3-padding-16 w3-text-lime"><h2>kelidestan.com - Lime</h2></div>
                <div class="w3-container w3-center w3-padding-16 w3-text-khaki"><h2>kelidestan.com - Khaki</h2></div>
                <div class="w3-container w3-center w3-padding-16 w3-text-light-gray"><h2>kelidestan.com - Light Gray</h2></div>
            </div>
        </div>
    </body>
</html>