\n

This page is a demo <\/h1>\n<\/body>\n<\/html><\/pre>\n

代碼片段:<\/strong><\/p>\n

\"HTML<\/p>\n

要添加背景顏色,可以使用 bgcolor 屬性來(lái)顯示 <\/p> body bgcolor=''>.它與除 HTML 5 之外的所有瀏覽器兼容。

\n<\/strong>代碼:<\/p>\n

Color Name<\/h3>\n

Hexadecimal<\/h3>\n

RGB Value<\/h3><\/pre>\n

\n<\/h3>如何為 HTML 中的文本應(yīng)用顏色?

\n<\/p>對(duì) HTML 文本應(yīng)用顏色非常簡(jiǎn)單;我們可以通過(guò)三種方式添加\/更改文本的顏色,即十六進(jìn)制顏色、HSL 值和顏色名稱(chēng)。以下是向相應(yīng)網(wǎng)頁(yè)應(yīng)用顏色的三種不同技術(shù)。

\n<\/h4>1.顏色名稱(chēng)

\n<\/p>當(dāng)應(yīng)用程序直接使用這些顏色名稱(chēng)時(shí),使用英文顏色名稱(chēng)非常簡(jiǎn)單。指定顏色名稱(chēng)是直接方法,W3C已經(jīng)公布了16種基本顏色(黑色、黃色、紅色、栗色、灰色、石灰、綠色、橄欖色、銀色、水色、藍(lán)色、海軍藍(lán)、白色、紫色、紫紅色、青色)

\n\n\n<\/h4>2.福勝利

\n<\/p>色相飽和度和亮度顏色值。色調(diào)定義為 0 到 360 度,飽和度和亮度定義為 0 到 100 %。

\n<\/h4>3.十六進(jìn)制顏色

\n<\/p>為了獲得精確的結(jié)果,使用六位十六進(jìn)制數(shù)。詳細(xì)來(lái)說(shuō),前兩位表示紅色,后兩位表示綠色,另外兩位表示藍(lán)色值,前面帶有‘#’。

\n<\/p>以下示例說(shuō)明了向文檔應(yīng)用顏色的不同方法。

\n<\/strong>代碼:<\/p>\n

\nEDUCBA<\/title>\n<style type=\"text\/css\">\nh1{\ncolor:#97cae0;\nbackground-color: hsl(200, 50%, 20%);\ncolor: hsl(200, 20%, 90%);\n}\nh4{\ncolor:rgb(0, 255, 0);\nbackground-color: hsl(130, 10%, 30%);\ncolor: hsl(280, 20%, 80%);\n}\nli{\ncolor:rgba(12, 88, 120, 1);\nbackground-color: hsl(210, 36%, 50%);\ncolor: hsl(145, 45%, 81%);\n}\n<\/style>\n<\/head>\n<body>
<h1><a href="http://m.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>\n<h1>EDUCBA<\/h1>\n<h4>List of operating System<\/h4>\n<ul>\n<li> Windows<\/li>\n<li>MACINTOSH<\/li>\n<li>LINUX<\/li>\n<li>UBUNTU<\/li>\n<\/ul>\n<\/body>\n<\/html><\/pre>\n<p>\n<strong><\/strong>輸出:<\/p>\n<p>\n<img  src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543884158403.png\" alt=\"HTML 顏色?\" ><\/p>\n<p>\n<\/p>有不同的方法來(lái)設(shè)置文本顏色,因?yàn)?HTML 有很多可定制的應(yīng)用程序。<ul>\n<li>\n<\/li>應(yīng)用樣式部分<li>\n<\/li>創(chuàng)建單獨(dú)的 CSS 樣式表<li>\n<\/li>換行文本<\/ul>\n<h3>\n<\/h3>如何使用 <style> 應(yīng)用文本顏色部分?<p>\n讓我們看看使用 HTML 顏色的各種方法:<h4>\n1.使用 HTML 顏色包裹<p>\n下面的代碼通過(guò)簡(jiǎn)單的 HTML 代碼更改了段落中文本的顏色。有 140 個(gè)彩色名稱(chēng)可以為網(wǎng)站著色。<p>\n下面的代碼演示了如何使用 <style> 應(yīng)用文本顏色部分。<p>\n<strong>代碼:<pre><!DOCTYPE html>\n<title> Text color<\/title>\n<html>\n<head>\n<title>HTML BG Color<\/title>\n<\/head>\n<body >\n<h1> changing text color <\/h1>\n<p> This content is very clear <\/p>\n<p style=\"color: pink;\"> pink paragraph text <\/p>\n<\/body>\n<\/html>\n<p>\n<strong>輸出:<p>\n<img  src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543884223352.png\"\/ alt=\"HTML 顏色?\" ><h4>\n2.使用 HEXCOLOR<p>\n同樣,此示例采用樣式部分來(lái)聲明十六進(jìn)制顏色,后跟“#”符號(hào)。<p>\n<strong>代碼:<pre><!DOCTYPE html>\n<html>\n<head>\n<title> Color Picker<\/title>\n<\/head>\n<body >\n<h1> changing text color? <\/h1>\n<p> hello world <\/p>\n<p style=\"color:#8e47b1\"> Hexa paragraph text <\/p>\n<\/body>\n<\/html>\n<p>\n<strong>輸出:<p>\n<img  src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543884565656.png\"\/ alt=\"HTML 顏色?\" ><h4>\n3.使用 RGB 顏色<p>\n紅、綠、藍(lán)各使用8位,其值在0到255之間變化,從而產(chǎn)生各種顏色。下面的示例根據(jù) RGB 值選擇 RGB 顏色。<p>\n<strong>代碼:<pre><!DOCTYPE html>\n<html>\n<head>\n<title> Color Picker<\/title>\n<\/head>\n<body>\n<p style=\"color:rgb(0,0,255);\">Blue paragraph text<\/p>\n<\/body>\n<\/html>\n<p>\n<strong>輸出:<p>\n<img  src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543884782832.png\"\/ alt=\"HTML 顏色?\" ><h4>\n4.使用樣式表的方法<p>\n<strong>代碼:<pre><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<title> Style Sheet in HTML<\/title>\n<style type=\"text\/css\">\n@import url(\"https:\/\/cdn.educba.com\/examples\/css\/style.css\");\np {\ncolor: green;\nfont-size: 26px;\n}\n<\/style>\n<\/head>\n<body>\n<h1>The styles for Html documents<\/h1>\n<p> Each tag to be styled with colors.<\/p>\n<\/body>\n<\/html>\n<p>\n<strong>輸出:<p>\n<img  src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543884852266.png\"\/ alt=\"HTML 顏色?\" ><h4>\n5.創(chuàng)建個(gè)人 CSS 樣式<p>\n<strong>代碼:<p>\n<strong>.html 文件:<pre><!DOCTYPE html>\n<html>\n<head>\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"lcolor.css\">\n<\/head>\n<body>\n<h1>? CSS style sheet<\/h1>\n<p>Multiple HTMl Document.<\/p>\n<p class=\"lcolor\">Hello world!<\/p>\n<\/body>\n<\/html>\n<p>\n<strong>外部 CSS 文件 lcolor.css:<p>\n<strong>代碼:<pre>.lcolor { font-size: 40px;\ncolor:red }\n<p>\n<strong>輸出:<p>\n<img  src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543885182059.png\"\/ alt=\"HTML 顏色?\" ><??>\n<h3>How to Set Border Color in HTML?\n<p>It is done using an attribute border color=” “. It is done using the Html element <table> and even we can create 3D effects. The border color is applied using different attributes like border= “width”, bordercolor= “color def”, bordercolorlight=” “. CSS has some enhanced border properties that help in creating borders. The below example shows setting a single border color to the corresponding table. Here <tr> denotes table row and <td> denotes table data and it is started using <table> tag. And the border for them is applied using their width and colors\n<p><strong>Code:\n<pre><!DOCTYPE html>\n<html>\n<head>\n<table border=\"8\" bordercolor=\"Orange\">\n<tr>\n<td>Chicago<\/td>\n<td>new york<\/td>\n<td> Texas<\/td>\n<td> California <\/td>\n<\/tr>\n<\/table> <\/head>\n<\/html>\n<p><strong>Output:\n<p><img  src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543885343959.png\"\/ alt=\"HTML 顏色?\" >\n<p>Now let’s see setting two border-color separately. The below code uses table attribute with their elements.\n<p><strong>Code:\n<pre><!DOCTYPE html>\n<html>\n<head>\n<TABLE BORDER=20 BORDERCOLORLIGHT= BLUE BORDERCOLORDARK= ROSE> <TR> <TD> Samsung<\/TD> <TD> Nokia<\/TD> <\/TR> <TR> <TD> Apple Iphone<\/TD> <TD>? Xiami Redmi<\/TD> <\/TR> <\/TABLE>\n<\/head>\n<\/html>\n<p><strong>Output:\n<p><img  src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543885747344.png\"\/ alt=\"HTML 顏色?\" >\n<p><strong>Using <div> tag\n<p>It is used to group all the elements and helps in view of a web page at its particular position. In the below code, we have used two <div> one for a paragraph and the other to implement style attribute by setting border pixels and thickness is increased by giving out the width, and we have added padding to demonstrate them to the left.\n<p><strong>Code:\n<pre><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\" \/>\n<title> Sample border color using div<\/title>\n<\/head>\n<body>\n<div><p> Nature is beautiful<\/p><\/div>\n<div style=\"border:4px dashed #c62d64;padding-left:3px;\"><p> div with a border color.<\/p><\/div>\n<\/body>\n<\/html>\n<p><strong>Output:\n<p><img  src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543885835283.png\"\/ alt=\"HTML 顏色?\" >\n<p><strong>Example: This explains how to set the color for padding and margin using class and list tags.\n<p><strong>Code:\n<pre><!DOCTYPE HTML>\n<HTML>\n<HEAD>\n<TITLE>Borders<\/TITLE>\n<STYLE type=\"text\/css\">\nUL {\nbackground: Green;\nmargin: 10px 10px 5px 5px;\npadding: 4px 4px 4px 4px;\n}\nLI {\ncolor: red;\nbackground:yellow;\nmargin: 11px 11px 7px 6px;\npadding: 10px 0px 10px 10px;\nlist-style: none\n}\nLI.colorbord {\nborder-style: dashed;\nborder-width: small;\nborder-color: orange;\n}\n<\/STYLE>\n<\/HEAD>\n<BODY>\n<UL>\n<LI> DOM model\n<li id="377j5v51b"    class=\"colorbord\">Document object model helps in creating document tree\n<\/UL>\n<\/BODY>\n<\/HTML>\n<p><strong>Output:\n<p><img  src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543886038363.png\"\/ alt=\"HTML 顏色?\" >\n\n\n<h3>How to Specify Color Using Values in HTML?\n<p>The basic color values vary from 0 to 255 for red, blue, green. The color value is important in giving out lightness.\n<p>The below table shows sample values for the colors.\n<p><img  src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543886336443.png\"\/ alt=\"HTML 顏色?\" >\n<p><strong>Example: The below?example shows different color values in their background settings.\n<p><strong>Code:\n<pre><!DOCTYPE html>\n<html>\n<body>\n<p> Data Mining techniques is to understand a patterns<\/p>\n<h1 style=\"background-color:rgb(255, 91, 61);\">Classification<\/h1>\n<h1 style=\"background-color:#e66465;\">Prediction<\/h1>\n<h1 style=\"background-color:hsl(10, 70%, 100%);\"> Regression<\/h1>\n<p>Classification, Prediction techniques<\/p>\n<h1 style=\"background-color:rgba(255, 80, 91, 0.4);\"> HTML colors<\/h1>\n<h1 style=\"background-color:hsla(100%, 9%, 62%, 0.5);\"> Table colors<\/h1>\n<\/body>\n<\/html>\n<p><strong>Output:\n<p><img  src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543886550535.png\"\/ alt=\"HTML 顏色?\" >\n<h3>How to use RGB Color Values in HTML?\n<p>RGB denotes Red, Green blue colors directly and uses the RGB function. It takes those three values as parameters and declared them as integers sometimes in percentage. Whichever color we want, its intensity is given a higher value 255 as an integer value falls between o to 255. For instance, to have a blue color, it is preferred to denote (0,0,255). here the first two values are marked as 0,0, and the last value is 255 for blue.\n<p><strong>Example: RGB color\n<p><strong>Code:\n<pre><!DOCTYPE html>\n<html>\n<style>\ndiv {\nbackground-color: rgb(255, 0, 180);\ncolor: rgb(0, 255, 255);\npadding: 30px;\n}\n<\/style>\n<body>\n<div>\n<h1>Norway the most beautiful place it’s a Scandinavian Country. <\/h1>\n<p> It is the most expensive country in the world, Oslo is the capital of this green city. <\/p>\n<\/div>\n<\/body>\n<\/html>\n<p><strong>Output:\n<p><img  src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543886761776.png\"\/ alt=\"HTML 顏色?\" >\n<h3>How to Specify the Lightness of Colors in HTML?\n<p>The lightness of color is defined by the brightness we prefer; it is measured in percentage. Most web designers wish to use lightness than RGB, which can be adjusted as per the requirements. Here a black set the brightness to 0% white set to 100%. It is specified using function hsl().\n<p><strong>Code:\n<pre><!DOCTYPE html>\n<html>\n<style>\ndiv {\nbackground-color: hsl(150, 50%, 60%);\ncolor: hsl(100%, 0%, 0%);\npadding: 30px;\n}\n<\/style>\n<body>\n<div>\n<h1>Norway the most beautiful place its an Scandinavian Country.<\/h1>\n<p>It is the most expensive country in the world, Oslo is the capital of this green city.<\/p>\n<\/div>\n<\/body>\n<\/html>\n<p><strong>Output:\n<p><img  src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543886988457.png\"\/ alt=\"HTML 顏色?\" >\n<p>You can try with different values for color in the above example.\n<h3>Conclusion – HTML Colors\n<p>Therefore, to conclude, we have seen that this has different properties. In earlier days, web development has many ways to specify colors for their website, and nowadays, the most popular colorways are RGB and Hex color codes (RGB is well-known). There are different applications where colors are implemented, like a sliding scale, color palette, etc.<\/style>"}	</script>
	
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>

<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
	<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
    <div   id="377j5v51b"   class="head">
        <div   id="377j5v51b"   class="haed_left">
            <div   id="377j5v51b"   class="haed_logo">
                <a href="http://m.miracleart.cn/zh/" title="" class="haed_logo_a">
                    <img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
                </a>
            </div>
            <div   id="377j5v51b"   class="head_nav">
                <div   id="377j5v51b"   class="head_navs">
                    <a href="javascript:;" title="社區(qū)" class="head_nava head_nava-template1">社區(qū)</a>
                    <div   class="377j5v51b"   id="dropdown-template1" style="display: none;">
                        <div   id="377j5v51b"   class="languagechoose">
                            <a href="http://m.miracleart.cn/zh/article.html" title="文章" class="languagechoosea on">文章</a>
                            <a href="http://m.miracleart.cn/zh/faq/zt" title="合集" class="languagechoosea">合集</a>
                            <a href="http://m.miracleart.cn/zh/wenda.html" title="問(wèn)答" class="languagechoosea">問(wèn)答</a>
                        </div>
                    </div>
                </div>

                <div   id="377j5v51b"   class="head_navs">
                    <a href="javascript:;" title="學(xué)習(xí)" class="head_nava head_nava-template1_1">學(xué)習(xí)</a>
                    <div   class="377j5v51b"   id="dropdown-template1_1" style="display: none;">
                        <div   id="377j5v51b"   class="languagechoose">
                            <a href="http://m.miracleart.cn/zh/course.html" title="課程" class="languagechoosea on">課程</a>
                            <a href="http://m.miracleart.cn/zh/dic/" title="編程詞典" class="languagechoosea">編程詞典</a>
                        </div>
                    </div>
                </div>

                <div   id="377j5v51b"   class="head_navs">
                    <a href="javascript:;" title="工具庫(kù)" class="head_nava head_nava-template1_2">工具庫(kù)</a>
                    <div   class="377j5v51b"   id="dropdown-template1_2" style="display: none;">
                        <div   id="377j5v51b"   class="languagechoose">
                            <a href="http://m.miracleart.cn/zh/toolset/development-tools" title="開(kāi)發(fā)工具" class="languagechoosea on">開(kāi)發(fā)工具</a>
                            <a href="http://m.miracleart.cn/zh/toolset/website-source-code" title="網(wǎng)站源碼" class="languagechoosea">網(wǎng)站源碼</a>
                            <a href="http://m.miracleart.cn/zh/toolset/php-libraries" title="PHP 庫(kù)" class="languagechoosea">PHP 庫(kù)</a>
                            <a href="http://m.miracleart.cn/zh/toolset/js-special-effects" title="JS特效" class="languagechoosea on">JS特效</a>
                            <a href="http://m.miracleart.cn/zh/toolset/website-materials" title="網(wǎng)站素材" class="languagechoosea on">網(wǎng)站素材</a>
                            <a href="http://m.miracleart.cn/zh/toolset/extension-plug-ins" title="擴(kuò)展插件" class="languagechoosea on">擴(kuò)展插件</a>
                        </div>
                    </div>
                </div>

                <div   id="377j5v51b"   class="head_navs">
                    <a href="http://m.miracleart.cn/zh/ai" title="AI工具" class="head_nava head_nava-template1_3">AI工具</a>
                </div>

                <div   id="377j5v51b"   class="head_navs">
                    <a href="javascript:;" title="休閑" class="head_nava head_nava-template1_3">休閑</a>
                    <div   class="377j5v51b"   id="dropdown-template1_3" style="display: none;">
                        <div   id="377j5v51b"   class="languagechoose">
                            <a href="http://m.miracleart.cn/zh/game" title="游戲下載" class="languagechoosea on">游戲下載</a>
                            <a href="http://m.miracleart.cn/zh/mobile-game-tutorial/" title="游戲教程" class="languagechoosea">游戲教程</a>

                        </div>
                    </div>
                </div>
            </div>
        </div>
                    <div   id="377j5v51b"   class="head_search">
                <input id="key_words"  onkeydown="if (event.keyCode == 13) searchs('zh')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
                <a href="javascript:;" title="搜索"  onclick="searchs('zh')"><img src="/static/imghw/find.png" alt="搜索"></a>
            </div>
                <div   id="377j5v51b"   class="head_right">
            <div   id="377j5v51b"   class="haed_language">
                <a href="javascript:;" class="layui-btn haed_language_btn">簡(jiǎn)體中文<i class="layui-icon layui-icon-triangle-d"></i></a>
                <div   class="377j5v51b"   id="dropdown-template" style="display: none;">
                    <div   id="377j5v51b"   class="languagechoose">
                                                <a href="javascript:;" title="簡(jiǎn)體中文" class="languagechoosea">簡(jiǎn)體中文</a>
                                                <a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a>
                                                <a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
                                                <a href="javascript:setlang('ja');" title="日本語(yǔ)" class="languagechoosea">日本語(yǔ)</a>
                                                <a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
                                                <a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a>
                                                <a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
                                                <a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a>
                                            </div>
                </div>
            </div>
            <span id="377j5v51b"    class="head_right_line"></span>
                            <div style="display: block;" id="login" class="haed_login ">
                    <a href="javascript:;"  title="Login" class="haed_logina ">Login</a>
                </div>
                <div style="display: block;" id="reg" class="head_signup login">
                    <a href="javascript:;"  title="singup" class="head_signupa">singup</a>
                </div>
            
        </div>
    </div>
</header>

	
	<main>
		<div   id="377j5v51b"   class="Article_Details_main">
			<div   id="377j5v51b"   class="Article_Details_main1">
							<div   id="377j5v51b"   class="Article_Details_main1L">
					<div   id="377j5v51b"   class="Article_Details_main1Lmain" id="Article_Details_main1Lmain">
						<div   id="377j5v51b"   class="Article_Details_main1L1">目錄</div>
						<div   id="377j5v51b"   class="Article_Details_main1L2" id="Article_Details_main1L2">
							<!-- 左側(cè)懸浮,文章定位標(biāo)題1 id="Article_Details_main1L2s_1"-->
															<div   id="377j5v51b"   class="Article_Details_main1L2s ">
									<a href="#如何在-HTML-中設(shè)置背景顏色" title="如何在 HTML 中設(shè)置背景顏色?" >如何在 HTML 中設(shè)置背景顏色?</a>
								</div>
														</div>
					</div>
				</div>
							<div   id="377j5v51b"   class="Article_Details_main1M">
					<div   id="377j5v51b"   class="phpgenera_Details_mainL1">
						<a href="http://m.miracleart.cn/zh/" title="首頁(yè)"
							class="phpgenera_Details_mainL1a">首頁(yè)</a>
						<img src="/static/imghw/top_right.png" alt="" />
												<a href="http://m.miracleart.cn/zh/web-designer.html"
							class="phpgenera_Details_mainL1a">web前端</a>
						<img src="/static/imghw/top_right.png" alt="" />
												<a href="http://m.miracleart.cn/zh/div-tutorial.html"
							class="phpgenera_Details_mainL1a">html教程</a>
						<img src="/static/imghw/top_right.png" alt="" />
						<span>HTML 顏色?</span>
					</div>
					
					<div   id="377j5v51b"   class="Articlelist_txts">
						<div   id="377j5v51b"   class="Articlelist_txts_info">
							<h1 class="Articlelist_txts_title">HTML 顏色?</h1>
							<div   id="377j5v51b"   class="Articlelist_txts_info_head">
								<div   id="377j5v51b"   class="author_info">
									<a href="http://m.miracleart.cn/zh/member/465014.html"  class="author_avatar">
									<img class="lazy"  data-src="https://img.php.cn/upload/avatar/000/465/014/627b58ba8fa6c600.jpg" src="/static/imghw/default1.png" alt="王林">
									</a>
									<div   id="377j5v51b"   class="author_detail">
																			<a href="http://m.miracleart.cn/zh/member/465014.html" class="author_name">王林</a>
                                										</div>
								</div>
                			</div>
							<span id="377j5v51b"    class="Articlelist_txts_time">Sep 04, 2024 pm	 04:33 PM</span>
															<div   id="377j5v51b"   class="Articlelist_txts_infos">
																			<span id="377j5v51b"    class="Articlelist_txts_infoss on">html</span>
																			<span id="377j5v51b"    class="Articlelist_txts_infoss ">html5</span>
																			<span id="377j5v51b"    class="Articlelist_txts_infoss ">HTML Tutorial</span>
																			<span id="377j5v51b"    class="Articlelist_txts_infoss ">HTML Properties</span>
																			<span id="377j5v51b"    class="Articlelist_txts_infoss ">HTML tags</span>
																	</div>
														
						</div>
					</div>
					<hr />
					<div   id="377j5v51b"   class="article_main php-article">
						<div   id="377j5v51b"   class="article-list-left detail-content-wrap content">
						<ins class="adsbygoogle"
							style="display:block; text-align:center;"
							data-ad-layout="in-article"
							data-ad-format="fluid"
							data-ad-client="ca-pub-5902227090019525"
							data-ad-slot="3461856641">
						</ins>
						

					<p>本文介紹了如何使用 HTML 以簡(jiǎn)單易行的方式在網(wǎng)站中使用顏色。顏色在創(chuàng)建網(wǎng)站的外觀(guān)和感覺(jué)方面發(fā)揮著重要作用。 HTML 中沒(méi)有單獨(dú)的標(biāo)簽;相反,它使用樣式屬性或顏色屬性。準(zhǔn)確地說(shuō),顏色是使用層疊樣式表 (CSS) 嵌入到 HTML 元素中的。顏色賦予網(wǎng)頁(yè)優(yōu)雅的外觀(guān)。為網(wǎng)頁(yè)添加顏色包括設(shè)置背景顏色、表格、段落等</p>
<h3 id="如何在-HTML-中設(shè)置背景顏色">如何在 HTML 中設(shè)置背景顏色?</h3>
<p>使背景顏色變亮使網(wǎng)站看起來(lái)更漂亮、更大膽。它是通過(guò)使用顏色、十六進(jìn)制顏色代碼來(lái)完成的。 RGB 和 RGBA 顏色值(Alpha 值 0 到 1)。</p>








<p>使用 Html body 元素內(nèi)的 Style 屬性將十六進(jìn)制顏色直接應(yīng)用于 Html 代碼。十六進(jìn)制是數(shù)字和字母的組合。以下是網(wǎng)頁(yè)背景顏色的示例。</p>
<p><strong>代碼:</strong></p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<title>My Sample</title>
<html>
<head>
<title>HTML BG Color</title>
</head>
<body style="background-color:red;">
<h1> This page is a demo </h1>
</body>
</html></pre>
<p><strong>代碼片段:</strong></p>
<p><img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543883915222.png" class="lazy" alt="HTML 顏色?" ></p>
<p>要添加背景顏色,可以使用 bgcolor 屬性來(lái)顯示 </p> body bgcolor=''>.它與除 HTML 5 之外的所有瀏覽器兼容。<p>
<strong></strong>代碼:</p>
<pre class="brush:php;toolbar:false"><h3 style="color: blue">Color Name</h3>
<h3 style="color: #0000ff">Hexadecimal</h3>
<h3 style="color: rgb (0,0,255)">RGB Value</h3></pre>
<h3>
</h3>如何為 HTML 中的文本應(yīng)用顏色?<p>
</p>對(duì) HTML 文本應(yīng)用顏色非常簡(jiǎn)單;我們可以通過(guò)三種方式添加/更改文本的顏色,即十六進(jìn)制顏色、HSL 值和顏色名稱(chēng)。以下是向相應(yīng)網(wǎng)頁(yè)應(yīng)用顏色的三種不同技術(shù)。<h4>
</h4>1.顏色名稱(chēng)<p>
</p>當(dāng)應(yīng)用程序直接使用這些顏色名稱(chēng)時(shí),使用英文顏色名稱(chēng)非常簡(jiǎn)單。指定顏色名稱(chēng)是直接方法,W3C已經(jīng)公布了16種基本顏色(黑色、黃色、紅色、栗色、灰色、石灰、綠色、橄欖色、銀色、水色、藍(lán)色、海軍藍(lán)、白色、紫色、紫紅色、青色)<h4>


</h4>2.福勝利<p>
</p>色相飽和度和亮度顏色值。色調(diào)定義為 0 到 360 度,飽和度和亮度定義為 0 到 100 %。<h4>
</h4>3.十六進(jìn)制顏色<p>
</p>為了獲得精確的結(jié)果,使用六位十六進(jìn)制數(shù)。詳細(xì)來(lái)說(shuō),前兩位表示紅色,后兩位表示綠色,另外兩位表示藍(lán)色值,前面帶有‘#’。<p>
</p>以下示例說(shuō)明了向文檔應(yīng)用顏色的不同方法。<p>
<strong></strong>代碼:</p>
<pre class="brush:php;toolbar:false"><head>
<title>EDUCBA</title>
<style type="text/css">
h1{
color:#97cae0;
background-color: hsl(200, 50%, 20%);
color: hsl(200, 20%, 90%);
}
h4{
color:rgb(0, 255, 0);
background-color: hsl(130, 10%, 30%);
color: hsl(280, 20%, 80%);
}
li{
color:rgba(12, 88, 120, 1);
background-color: hsl(210, 36%, 50%);
color: hsl(145, 45%, 81%);
}
</style>
</head>
<body>
<h1>EDUCBA</h1>
<h4>List of operating System</h4>
<ul>
<li> Windows</li>
<li>MACINTOSH</li>
<li>LINUX</li>
<li>UBUNTU</li>
</ul>
</body>
</html></pre>
<p>
<strong></strong>輸出:</p>
<p>
<img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543884158403.png" class="lazy" alt="HTML 顏色?" ></p>
<p>
</p>有不同的方法來(lái)設(shè)置文本顏色,因?yàn)?HTML 有很多可定制的應(yīng)用程序。<ul>
<li>
</li>應(yīng)用樣式部分<li>
</li>創(chuàng)建單獨(dú)的 CSS 樣式表<li>
</li>換行文本</ul>
<h3>
</h3>如何使用 <style> 應(yīng)用文本顏色部分?<p>
讓我們看看使用 HTML 顏色的各種方法:<h4>
1.使用 HTML 顏色包裹<p>
下面的代碼通過(guò)簡(jiǎn)單的 HTML 代碼更改了段落中文本的顏色。有 140 個(gè)彩色名稱(chēng)可以為網(wǎng)站著色。<p>
下面的代碼演示了如何使用 <style> 應(yīng)用文本顏色部分。<p>
<strong>代碼:<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<title> Text color


HTML BG Color


changing text color

This content is very clear

pink paragraph text

輸出:

HTML 顏色?

2.使用 HEXCOLOR

同樣,此示例采用樣式部分來(lái)聲明十六進(jìn)制顏色,后跟“#”符號(hào)。

代碼:




 Color Picker


changing text color?

hello world

Hexa paragraph text

輸出:

HTML 顏色?

3.使用 RGB 顏色

紅、綠、藍(lán)各使用8位,其值在0到255之間變化,從而產(chǎn)生各種顏色。下面的示例根據(jù) RGB 值選擇 RGB 顏色。

代碼:




 Color Picker


Blue paragraph text

輸出:

HTML 顏色?

4.使用樣式表的方法

代碼:





 Style Sheet in HTML



The styles for Html documents

Each tag to be styled with colors.

輸出:

HTML 顏色?

5.創(chuàng)建個(gè)人 CSS 樣式

代碼:

.html 文件:







? CSS style sheet

Multiple HTMl Document.

Hello world!

外部 CSS 文件 lcolor.css:

代碼:

.lcolor { font-size: 40px;
color:red }

輸出:

HTML 顏色?

How to Set Border Color in HTML?

It is done using an attribute border color=” “. It is done using the Html element

and even we can create 3D effects. The border color is applied using different attributes like border= “width”, bordercolor= “color def”, bordercolorlight=” “. CSS has some enhanced border properties that help in creating borders. The below example shows setting a single border color to the corresponding table. Here denotes table row and <label id="hdisv"></label>
    • denotes table data and it is started using tag. And the border for them is applied using their width and colors

      Code:

      
      
      
      
      Chicago new york Texas California

      Output:

      HTML 顏色?

      Now let’s see setting two border-color separately. The below code uses table attribute with their elements.

      Code:

      
      
      
      
      Samsung Nokia
      Apple Iphone ? Xiami Redmi

      Output:

      HTML 顏色?

      Using

      tag

      It is used to group all the elements and helps in view of a web page at its particular position. In the below code, we have used two

      one for a paragraph and the other to implement style attribute by setting border pixels and thickness is increased by giving out the width, and we have added padding to demonstrate them to the left.

      Code:

      
      
      
      
       Sample border color using div
      
      
      

      Nature is beautiful

      div with a border color.

      Output:

      HTML 顏色?

      Example: This explains how to set the color for padding and margin using class and list tags.

      Code:

      
      
      
      Borders
      
      
      
      
      • DOM model
      • Document object model helps in creating document tree

      Output:

      HTML 顏色?

      How to Specify Color Using Values in HTML?

      The basic color values vary from 0 to 255 for red, blue, green. The color value is important in giving out lightness.

      The below table shows sample values for the colors.

      HTML 顏色?

      Example: The below?example shows different color values in their background settings.

      Code:

      
      
      
      

      Data Mining techniques is to understand a patterns

      Classification

      Prediction

      Regression

      Classification, Prediction techniques

      HTML colors

      Table colors

      Output:

      HTML 顏色?

      How to use RGB Color Values in HTML?

      RGB denotes Red, Green blue colors directly and uses the RGB function. It takes those three values as parameters and declared them as integers sometimes in percentage. Whichever color we want, its intensity is given a higher value 255 as an integer value falls between o to 255. For instance, to have a blue color, it is preferred to denote (0,0,255). here the first two values are marked as 0,0, and the last value is 255 for blue.

      Example: RGB color

      Code:

      
      
      
      
      

      Norway the most beautiful place it’s a Scandinavian Country.

      It is the most expensive country in the world, Oslo is the capital of this green city.

      Output:

      HTML 顏色?

      How to Specify the Lightness of Colors in HTML?

      The lightness of color is defined by the brightness we prefer; it is measured in percentage. Most web designers wish to use lightness than RGB, which can be adjusted as per the requirements. Here a black set the brightness to 0% white set to 100%. It is specified using function hsl().

      Code:

      
      
      
      
      

      Norway the most beautiful place its an Scandinavian Country.

      It is the most expensive country in the world, Oslo is the capital of this green city.

      Output:

      HTML 顏色?

      You can try with different values for color in the above example.

      Conclusion – HTML Colors

      Therefore, to conclude, we have seen that this has different properties. In earlier days, web development has many ways to specify colors for their website, and nowadays, the most popular colorways are RGB and Hex color codes (RGB is well-known). There are different applications where colors are implemented, like a sliding scale, color palette, etc.

      以上是HTML 顏色?的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章!

      本站聲明
      本文內(nèi)容由網(wǎng)友自發(fā)貢獻(xiàn),版權(quán)歸原作者所有,本站不承擔(dān)相應(yīng)法律責(zé)任。如您發(fā)現(xiàn)有涉嫌抄襲侵權(quán)的內(nèi)容,請(qǐng)聯(lián)系admin@php.cn

      熱AI工具

      Undress AI Tool

      Undress AI Tool

      免費(fèi)脫衣服圖片

      Undresser.AI Undress

      Undresser.AI Undress

      人工智能驅(qū)動(dòng)的應(yīng)用程序,用于創(chuàng)建逼真的裸體照片

      AI Clothes Remover

      AI Clothes Remover

      用于從照片中去除衣服的在線(xiàn)人工智能工具。

      Clothoff.io

      Clothoff.io

      AI脫衣機(jī)

      Video Face Swap

      Video Face Swap

      使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉!

      熱工具

      記事本++7.3.1

      記事本++7.3.1

      好用且免費(fèi)的代碼編輯器

      SublimeText3漢化版

      SublimeText3漢化版

      中文版,非常好用

      禪工作室 13.0.1

      禪工作室 13.0.1

      功能強(qiáng)大的PHP集成開(kāi)發(fā)環(huán)境

      Dreamweaver CS6

      Dreamweaver CS6

      視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具

      SublimeText3 Mac版

      SublimeText3 Mac版

      神級(jí)代碼編輯軟件(SublimeText3)

      熱門(mén)話(huà)題

      '`vs.` `在html中 '`vs.` `在html中 Jul 19, 2025 am 12:41 AM

      是塊級(jí)元素,用于劃分大塊內(nèi)容區(qū)域;是內(nèi)聯(lián)元素,適合包裹小段文字或內(nèi)容片段。具體區(qū)別如下:1.獨(dú)占一行,可設(shè)置寬高、內(nèi)外邊距,常用于布局結(jié)構(gòu)如頭部、側(cè)邊欄等;2.不換行,僅占據(jù)內(nèi)容寬度,用于局部樣式控制如變色、加粗等;3.使用場(chǎng)景上,適用于整體區(qū)域的排版與結(jié)構(gòu)組織,而用于不影響整體布局的小范圍樣式調(diào)整;4.嵌套時(shí),可包含任何元素,而內(nèi)部不應(yīng)嵌套塊級(jí)元素。

      如何在HTML5中使用無(wú)線(xiàn)電按鈕? 如何在HTML5中使用無(wú)線(xiàn)電按鈕? Jul 21, 2025 am 01:08 AM

      在HTML5中使用單選按鈕的關(guān)鍵在于理解其工作原理并正確組織代碼結(jié)構(gòu)。1.每個(gè)radio按鈕的name屬性必須相同,以實(shí)現(xiàn)互斥選擇;2.使用label標(biāo)簽提升可訪(fǎng)問(wèn)性和點(diǎn)擊體驗(yàn);3.推薦將每個(gè)選項(xiàng)包裹在div或label中以增強(qiáng)結(jié)構(gòu)清晰度和樣式控制;4.通過(guò)checked屬性設(shè)置默認(rèn)選中項(xiàng);5.value值應(yīng)簡(jiǎn)潔有意義,便于表單提交處理;6.可通過(guò)CSS自定義樣式,但需確保功能正常。掌握這些要點(diǎn)能有效避免常見(jiàn)問(wèn)題并提升使用效果。

      HTML5中是否仍在使用標(biāo)簽? HTML5中是否仍在使用標(biāo)簽? Jul 21, 2025 am 02:47 AM

      是的,是HTML5的一部分,但其使用已逐漸減少且存在爭(zhēng)議。用于將主標(biāo)題與副標(biāo)題組合在一起,使文檔大綱中僅識(shí)別最高級(jí)別的標(biāo)題;例如,主標(biāo)題和副標(biāo)題可被包裹在中,以表明僅為輔助標(biāo)題而非獨(dú)立章節(jié)標(biāo)題;然而,其不再?gòu)V泛使用的原因包括:1.瀏覽器和屏幕閱讀器對(duì)其支持不一致,2.存在更簡(jiǎn)單的替代方案如使用CSS控制樣式,3.HTML文檔大綱算法未被廣泛支持;盡管如此,在語(yǔ)義要求較高的網(wǎng)站或文檔中仍可考慮使用;而大多數(shù)情況下,開(kāi)發(fā)者傾向使用單一、通過(guò)CSS管理樣式并保持清晰的標(biāo)題層級(jí)。

      影子dom概念和HTML集成 影子dom概念和HTML集成 Jul 24, 2025 am 01:39 AM

      ShadowDOM是Web組件技術(shù)中用于創(chuàng)建隔離DOM子樹(shù)的技術(shù)。1.它允許在普通HTML元素上掛載獨(dú)立的DOM結(jié)構(gòu),擁有自己的樣式和行為,不與主文檔互相影響;2.通過(guò)JavaScript創(chuàng)建,例如使用attachShadow方法并設(shè)置mode為open;3.結(jié)合HTML使用時(shí)具備結(jié)構(gòu)清晰、樣式隔離和內(nèi)容投影(slot)三大特點(diǎn);4.注意事項(xiàng)包括調(diào)試復(fù)雜、樣式作用域控制、性能開(kāi)銷(xiāo)及框架兼容性問(wèn)題。總之,ShadowDOM提供了原生封裝能力,適用于構(gòu)建可復(fù)用且不污染全局的UI組件。

      您可以在另一個(gè)標(biāo)簽中放置一個(gè)標(biāo)簽嗎? 您可以在另一個(gè)標(biāo)簽中放置一個(gè)標(biāo)簽嗎? Jul 27, 2025 am 04:15 AM

      ?Youcannotnesttagsinsideanothertagbecauseit’sinvalidHTML;browsersautomaticallyclosethefirstbeforeopeningthenext,resultinginseparateparagraphs.?Instead,useinlineelementslike,,orforstylingwithinaparagraph,orblockcontainerslikeortogroupmultipleparagraph

      初學(xué)者的基本HTML標(biāo)簽 初學(xué)者的基本HTML標(biāo)簽 Jul 27, 2025 am 03:45 AM

      要快速入門(mén)HTML,只需掌握幾個(gè)基礎(chǔ)標(biāo)簽即可搭建網(wǎng)頁(yè)骨架。1.頁(yè)面結(jié)構(gòu)必備、和,其中是根元素,包含元信息,是內(nèi)容展示區(qū)域。2.標(biāo)題使用到,級(jí)別越高數(shù)字越小,正文用標(biāo)簽分段,避免跳級(jí)使用。3.鏈接使用標(biāo)簽并配合href屬性,圖片使用標(biāo)簽并包含src和alt屬性。4.列表分為無(wú)序列表和有序列表,每個(gè)條目用表示且必須嵌套在列表中。5.初學(xué)者不必強(qiáng)記所有標(biāo)簽,邊寫(xiě)邊查更高效,掌握結(jié)構(gòu)、文本、鏈接、圖片和列表即可制作基礎(chǔ)網(wǎng)頁(yè)。

      為什么我的圖像未顯示在HTML中? 為什么我的圖像未顯示在HTML中? Jul 28, 2025 am 02:08 AM

      圖像未顯示通常因文件路徑錯(cuò)誤、文件名或擴(kuò)展名不正確、HTML語(yǔ)法問(wèn)題或?yàn)g覽器緩存導(dǎo)致。1.確保src路徑與文件實(shí)際位置一致,使用正確的相對(duì)路徑;2.檢查文件名大小寫(xiě)及擴(kuò)展名是否完全匹配,并通過(guò)直接輸入U(xiǎn)RL驗(yàn)證圖片能否加載;3.核對(duì)img標(biāo)簽語(yǔ)法是否正確,確保無(wú)多余字符且alt屬性值恰當(dāng);4.嘗試強(qiáng)制刷新頁(yè)面、清除緩存或使用隱身模式排除緩存干擾。按此順序排查可解決大多數(shù)HTML圖片顯示問(wèn)題。

      html中的``optGroup`標(biāo)簽'' html中的``optGroup`標(biāo)簽'' Jul 19, 2025 am 02:01 AM

      在HTML表單中,使用標(biāo)簽可將下拉菜單中的選項(xiàng)進(jìn)行分組展示,以提升可讀性和用戶(hù)體驗(yàn)。1.是元素下的一個(gè)標(biāo)簽,用于將多個(gè)分組,并通過(guò)label屬性定義組名;2.使用時(shí)需將其置于內(nèi)部并嵌套,且每個(gè)必須有l(wèi)abel屬性;3.注意事項(xiàng)包括不能嵌套、可通過(guò)disabled屬性禁用整組選項(xiàng)、可使用CSS自定義樣式以及需考慮無(wú)障礙訪(fǎng)問(wèn)支持;4.適用場(chǎng)景包括多分類(lèi)數(shù)據(jù)選擇、選項(xiàng)較多需視覺(jué)分層或存在邏輯層級(jí)關(guān)系的情況。合理使用可有效提升表單交互體驗(yàn)。

      See all articles
      <blockquote id="hdisv"></blockquote>
      1. <p id="hdisv"><strike id="hdisv"></strike></p>