css中颜色如何设置？

在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：指定边框的颜色应该是透明的。这是默认

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			p {
				width: 400px;
				height: 200px;
				border-style: solid;
				border-color: #0000ff;
				color: red;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<p>One-colored border!</p>
	</body>
</html>

效果图：