📜  HTML | DOM 样式颜色属性(1)

📅  最后修改于: 2023-12-03 15:31:13.799000             🧑  作者: Mango

HTML | DOM 样式颜色属性

HTML和DOM中的颜色属性用于设置文本、背景或边框的颜色。以下是一些常用的HTML | DOM样式颜色属性:

color

color属性用于设置文本的颜色。可以使用颜色名称、RGB值、HEX值,或者HSL值。

<p style="color: red;">红色文本</p>
<p style="color: #ff0000;">红色文本</p>
<p style="color: rgb(255, 0, 0);">红色文本</p>
<p style="color: hsl(0, 100%, 50%);">红色文本</p>
background-color

background-color属性用于设置元素的背景色。可以使用颜色名称、RGB值、HEX值,或者HSL值。

<p style="background-color: yellow;">黄色背景</p>
<p style="background-color: #ffff00;">黄色背景</p>
<p style="background-color: rgb(255, 255, 0);">黄色背景</p>
<p style="background-color: hsl(60, 100%, 50%);">黄色背景</p>
border-color

border-color属性用于设置元素的边框颜色。可以使用颜色名称、RGB值、HEX值,或者HSL值。

<p style="border: 1px solid red;">红色边框</p>
<p style="border: 1px solid #ff0000;">红色边框</p>
<p style="border: 1px solid rgb(255, 0, 0);">红色边框</p>
<p style="border: 1px solid hsl(0, 100%, 50%);">红色边框</p>
opacity

opacity属性用于设置元素的透明度。值从0到1,0为完全透明,1为完全不透明。

<p style="background-color: red; opacity: 0.5;">半透明红色背景</p>
rgba()

rgba()函数用于设置元素的颜色和透明度。第四个参数为透明度,值从0到1,0为完全透明,1为完全不透明。

<p style="background-color: rgba(255, 0, 0, 0.5);">半透明红色背景</p>

以上就是HTML | DOM样式颜色属性的介绍。可以根据需求选择不同的颜色属性来设置网站的样式。