Атрибут кольору шрифту 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> <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 class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </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="/c-input-output/">C-Введення-Виведення</a> </li><li> <a href="/technical-scripter/">Технічний сценарист</a> </li><li> <a href="/statistics-maq/">Статистика - Maq</a> </li><li> <a href="/java-method-class/">Клас Методу Java</a> </li><li> <a href="/hibernate-tutorial/">Навчальний Посібник Із Hibernate</a> </li><li> <a href="/geometry/">Геометрія</a> </li><li> <a href="/java-string-programs/">Java-String-Програми</a> </li><li> <a href="/net-framework/">.Net Framework</a> </li><li> <a href="/devops-tutorial/">Підручник Devops</a> </li><li> <a href="/puzzles/">Пазли</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Теги нижнього та верхнього індексу HTML</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="/html-subscript-superscript-tags"> <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="/java-static-constructor">Статичний конструктор Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/system-exit-in-java">System.exit () у Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/isdigit-function-c-c-with-examples">функція isdigit() у C/C++ із прикладами</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/alphabet/">Алфавіт</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-make-an-executable-jar-file-java">Як створити виконуваний файл jar на Java</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="/er-diagram-dbms">e r приклади моделей</a>
</li><li><a href="/length-array-c">отримати довжину масиву в c</a>
</li><li><a href="/statement-coverage-testing">покриття заяви</a>
</li><li><a href="/latex-fonts-size-styles">розмір шрифту в латексі</a>
</li><li><a href="/what-is-10-10">10 з 10</a>
</li><li><a href="/gimp-fonts">шрифт gimp</a>
</li><li><a href="/underline-markdown">уцінка підкреслити</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="//pl.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>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>