在CSS中,可以使用color属性、background-color属性、border-color属性来设置颜色。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。
color属性
color属性指定文本的颜色。
该属性设置了一个元素的前景色(在 HTML 表现中,就是元素文本的颜色);光栅图像不受 color 影响。这个颜色还会应用到元素的所有边框,除非被 border-color 或另外某个边框颜色属性覆盖。
要设置一个元素的前景色,最容易的方法是使用 color 属性。
语法:color : value;
属性值color_name:规定颜色值为颜色名称的颜色(比如 red)。
hex_number:规定颜色值为十六进制值的颜色(比如 #ff0000)。
rgb_number:规定颜色值为 rgb 代码的颜色(比如 rgb(255,0,0))。
注:在使用color设置文本字体的颜色时,需要使用合理的背景颜色和文本颜色搭配,这样可以提高文本的可读性。
在HTML中,可以直接在文字所在标签中通过css使用color属性设置。或使用id或class引入外部CSS字体颜色样式设置字体颜色。
background-color属性
background-color 属性设置元素的背景颜色。
background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。
属性值color_name:规定颜色值为颜色名称的背景颜色(比如 red)。
hex_number:规定颜色值为十六进制值的背景颜色(比如 #ff0000)。
rgb_number:规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。
transparent:默认。背景颜色为透明。
border-color属性
border-color属性设置一个元素的四个边框颜色。此属性可以有一到四个值。
注意:需始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。
属性值:color:指定背景颜色。color_name:规定颜色值为颜色名称的颜色(比如 red)。
hex_number:规定颜色值为十六进制值的颜色(比如 #ff0000)。
rgb_number:规定颜色值为 rgb 代码的颜色(比如 rgb(255,0,0))。
transparent:指定边框的颜色应该是透明的。这是默认
示例:
p {
width: 400px;
height: 200px;
border-style: solid;
border-color: #0000ff;
color: red;
background-color: pink;
}
One-colored border!
效果图:
更多前端开发知识,请关注 HTML中文网 !!