logo

Атрибут кольору шрифту HTML

Атрибут кольору шрифту HTML визначає колір тексту вмісту всередині тег . Атрибут кольору шрифту приймає a значення кольору який ми хочемо застосувати до тексту, і він буде відображатися на екрані, маючи згаданий колір.

Синтаксис:



>

Значення атрибутів:

  • color_name: Він встановлює колір тексту за допомогою назви кольору. Наприклад: червоний .
  • шістнадцяткове_число: Він встановлює колір тексту за допомогою шістнадцяткового коду кольору. Наприклад: #0000ff .
  • rgb_number: Він встановлює колір тексту за допомогою коду rgb. Наприклад: rgb(0, 153, 0) .

Примітка: Атрибут кольору не підтримується HTML5 .

Приклад встановлення кольору шрифту в HTML

Ми можемо використовувати кольоровий атрибут з тег шрифту щоб встановити колір шрифту в HTML. Ми можемо призначити значення кольору за допомогою a назва кольору , шістнадцятковий код , або Код RGB .



Давайте зрозуміємо це краще на прикладі:

приклад: У цьому прикладі ми отримуємо кольоровий текст за допомогою атрибута color, який має три різні типи значень. Ми використали значення назви кольору, значення шістнадцяткового коду та значення коду RGB, щоб встановити колір шрифту трьох різних текстових елементів.

HTML
   HTML |<font>колір Атрибут title> head> <body> <font size='6' face='verdana' color='green'>techcodeview.com! шрифт> <br> <font size='6' face='arial' color='#008000'>techcodeview.com! шрифт> <br> <font size='6' color='rgb(128, 128, 0)'>techcodeview.com! font> body> html>></pre> </code> <p dir='ltr'>  <b>  <strong>Вихід:</strong>  </b>  </p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <p dir='ltr'> <img src='//techcodeview.com/img/html-attributes/40/html-font-color-attribute.webp' alt="колір шрифту html з використанням атрибута color"></p> <h3>  <b>  <strong>Підтримувані браузери</strong>  </b>  </h3><p dir='ltr'><span>Ви можете переглянути встановлені кольори шрифту HTML за допомогою цих браузерів. Браузери підтримують атрибут кольору тегу шрифту та відображають зміни кольору тексту.</span></p> <ul><li value='1'> <span>Гугл хром</span> </li><li value='2'> <span>Край</span> <span> </span> </li><li value='3'> <span>Firefox</span> </li><li value='4'> <span>Опера</span> </li><li value='5'> <span>Сафарі</span> </li></ul><p dir='ltr'><span>HTML є основою веб-сторінок, використовується для розробки веб-сторінок шляхом структурування веб-сайтів і веб-програм. Ви можете вивчити HTML з нуля, дотримуючись цього</span> <span>Підручник HTML</span> <span>і</span> <span>Приклади HTML</span> <span>.</span></p>  <br></article>
                         
                        </div><!--//content-->
                    </div><!--//section-inner-->                 
                </section><!--//section-->
    
            </div><!--//primary-->
            <div class="secondary col-md-4 col-sm-12 col-xs-12">
                  <aside class="info aside section">
                    <div class="section-inner">
                        <h2 class="">Категорія</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li> <a href="/intellij-idea-tutorial/">Підручник Intellij Idea</a> </li><li> <a href="/command-prompt/">Командний Рядок</a> </li><li> <a href="/python-requests/">Python-Запити</a> </li><li> <a href="/cpp-oops/">Цпп-Ооп</a> </li><li> <a href="/accenture/">Accenture</a> </li><li> <a href="/python-numpy-io/">Python Numpy-Io</a> </li><li> <a href="/t-sql-tutorial/">Підручник T-Sql</a> </li><li> <a href="/java-serialization/">Серіалізація Java</a> </li><li> <a href="/celebrity/">Знаменитість</a> </li><li> <a href="/python-numpy-program/">Програма Python Numpy</a> </li>
                                
                            </ul>
                        </div><!--//content-->  
                    </div><!--//section-inner-->                 
                </aside><!--//aside-->
                
                 <aside class="testimonials aside section">
                   <div class="section-inner">
                        <h2 class="heading">Як зробити мітки часу на Discord</h2>
                        <div class="content">
                            <div class="item">
                                 <blockquote class="quote">                                  
                                    <span> <i class="fa fa-quote-left"></i> Портал інформатики для фанатів. Він містить добре написані, добре продумані та добре пояснені статті з інформатики та програмування, тести та запитання для практичного/конкурентного програмування/співбесіди в компанії.</span>
                                </blockquote>                
                                                                                             
                            </div><!--//item-->
                            
                            <p> <a class="more-link" href="/how-make-timestamps-discord"> <i class="fa fa-external-link"></i> Читати Далі</a> </p> 
                            
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
                
               
                            
                 <aside class="languages aside section">
                    <div class="section-inner">
                        <h2 class="heading">Цікаві Статті</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li class="item">
                                    <span class="title"> <strong> <a href="/what-is-chatgpt-error-moderation">Що таке помилка модерації Chatgpt і як її виправити?</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/best/">Найкращий</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/spring-boot-customize-whitelabel-error-page">Spring Boot – налаштуйте сторінку помилок Whitelabel</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/8-wonders-world">8 чудес світу (оновлено 2024)</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/should-you-take-ap-english-literature-131890">Вам варто вивчати англійську літературу чи англійську мову AP?</a> </strong> </span>
                                    
                                </li><!--//item-->
                               
                            </ul>
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
                
              
                 <aside class="list music aside section">
                    <div class="section-inner">
                        <h2 class="heading">Популярні Пости</h2>
                        <div class="content">
                            <ul class="list"> <li><a href="/jasmine-davis">Жасмин Девіс в дитинстві</a>
</li><li><a href="/what-is-username">наприклад ім'я користувача</a>
</li><li><a href="/gimp-fonts">шрифт gimp</a>
</li><li><a href="/how-sort-list-java">java сортування списку</a>
</li><li><a href="/first-java-program-hello-world-example">привіт світ з java</a>
</li><li><a href="/what-is-10-ml-ounces">10 мл - це скільки</a>
</li> 
                                
                                
                            </ul>
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
              
            </div><!--//secondary-->    
        </div><!--//row-->
    </div><!--//masonry-->
    
	    <footer class="footer">
        <div class="container text-center">
                <span>
Copyright ©2025 Всі Права Захищені |  <a href="//bg.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Відмова Від Відповідальності</a>  |  <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Про Нас</a>  |  <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Політика Конфіденційності</a>  </span>
        </div>
    </footer>
 
         
    <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>    
    

    <script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>     
	
	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
	
</body>
</html>