搜尋

首頁 >web前端 >html教學 >HTML 顏色 

HTML 顏色 

王林
王林原創
2024-09-04 16:33:57644瀏覽

本文介紹如何使用 HTML 以簡單易行的方式在網站中使用顏色。顏色在創建網站的外觀和感覺方面發揮著重要作用。 HTML 中沒有單獨的標籤；相反，它使用樣式屬性或顏色屬性。準確地說，顏色是使用層疊樣式表 (CSS) 嵌入到 HTML 元素中的。顏色賦予網頁優雅的外觀。為網頁新增顏色包括設定背景顏色、表格、段落等

如何在 HTML 中設定背景顏色？

讓背景顏色變亮使網站看起來更漂亮、更大膽。它是透過使用顏色、十六進制顏色代碼來完成的。 RGB 和 RGBA 顏色值（Alpha 值 0 到 1）。

使用 Html body 元素內的 Style 屬性將十六進位顏色直接套用於 Html 程式碼。十六進制是數字和字母的組合。以下是網頁背景顏色的範例。

代碼：

<!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>

程式碼片段：

HTML 顏色 

要新增背景顏色，可以使用 bgcolor 屬性來顯示

body bgcolor=''>.它與除 HTML 5 之外的所有瀏覽器相容。

代碼：

<h3 style="color: blue">Color Name</h3>
<h3 style="color: #0000ff">Hexadecimal</h3>
<h3 style="color: rgb (0,0,255)">RGB Value</h3>

如何為 HTML 中的文字套用顏色？

對 HTML 文字套用顏色非常簡單；我們可以透過三種方式添加/更改文字的顏色，即十六進位顏色、HSL 值和顏色名稱。以下是將顏色應用到對應網頁的三種不同技術。

1.顏色名稱

當應用程式直接使用這些顏色名稱時，使用英文顏色名稱非常簡單。指定顏色名稱是直接方法，W3C已經公佈了16種基本顏色（黑色、黃色、紅色、栗色、灰色、石灰、綠色、橄欖色、銀色、水色、藍色、海軍藍、白色、紫色、紫紅色、青色）

2.福勝利

色相飽和度和亮度顏色值。色調定義為 0 到 360 度，飽和度和亮度定義為 0 到 100 %。

3.十六進位顏色

為了得到精確的結果，應用六位十六進位數。詳細來說，前兩位表示紅色，後兩位表示綠色，另外兩位表示藍色值，前面有「#」。

以下範例解釋了向文件應用顏色的不同方法。

代碼：

<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>

輸出：

HTML 顏色 

有不同的方法來設定文字顏色，因為 HTML 有很多可自訂的應用程式。
    • 套用樣式部分
    • 建立單獨的 CSS 樣式表
    • 換行文字

如何使用

The styles for Html documents

Each tag to be styled with colors.

輸出：

HTML 顏色 

5.建立個人 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 
 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 顏色 的詳細內容。更多資訊請關注PHP中文網其他相關文章！
css html Integer for try using class Attribute Property number symbol function this display position margin padding border background table td tr
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：RGB顏色模型下一篇：RGB顏色模型
相關文章
看更多