在HTML中，CSS属性用于定义和修改网页的样式，包括字体、颜色、布局等方面。CSS属性非常丰富，其中，颜色属性是CSS中最常用的属性之一。通过使用颜色属性，我们可以改变页面中标签的文字颜色、背景颜色、边框颜色等，从而实现视觉上的效果和美化。
1、CSS中颜色常用的表示方法
颜色名表示：CSS支持使用英文颜色名直接来表示颜色，如red（红色）、green（绿色）、blue（蓝色）等。这些颜色名在CSS中是预定义的，可以直接使用。
十六进制颜色值：十六进制颜色值以“#”开头，后面跟随6个十六进制数字，分别代表红、绿、蓝三种颜色的强度。例如，#FF0000表示红色，#00FF00表示绿色，#0000FF表示蓝色。
RGB颜色值：RGB颜色值使用三个数值（红、绿、蓝）来表示颜色，每个数值的范围是0到255。例如，红色可以表示为rgb(255, 0, 0)，绿色可以表示为rgb(0, 255, 0)，蓝色可以表示为rgb(0, 0, 255)。
常见的CSS颜色代码表格如下：
| 中文颜色 | 英文颜色 | 十六进制 | RGB颜色值 |
|---|---|---|---|
| 黑色 | black | #000000 | rgb(0,0,0) |
| 红色 | red | #FF0000 | rgb(255,0,0) |
| 绿色 | green | #00FF00 | rgb(0,255,0) |
| 蓝色 | blue | #0000FF | rgb(0,0,255) |
| 黄色 | yellow | #FFFF00 | rgb(255,255,0) |
| 天蓝 | Aqua | #00FFFF | rgb(0,255,255) |
| 紫色 | purple | #FF00FF | rgb(255,0,255) |
| 浅灰色 | Silver | #C0C0C0 | rgb(192,192,192) |
| 白色 | white | #FFFFFF | rgb(255,255,255) |
以下是一些常见的CSS颜色示例代码：
动手练一练：
<!DOCTYPE html>
<html>
<!--head头部.用来完成一个网页的相关设置-->
<head>
<!--汉字编码-->
<meta charset="UTF-8">
<!--网页标题-->
<title>CSS颜色值</title>
<style>
.content {
width: 600px;
color: #000;
background-color: #FFFFFF;
margin: 5px 0;
padding: 5px;
border: 1px solid #d4d4d4;
}
table.reference {
border-collapse: collapse;
width: 100%;
margin-bottom: 4px;
margin-top: 4px;
background-color: #FFFFFF;
}
table.reference td {
line-height: 32px;
min-width: 24px;
border: 1px solid #d4d4d4;
padding: 5px;
padding-top: 7px;
padding-bottom: 7px;
vertical-align: top;
text-align: center;
}
table.reference th {
color: #fff;
background-color: #555;
border: 1px solid #555;
font-size: 14px;
padding: 3px;
vertical-align: top;
text-align: center;
}
</style>
</head>
<body>
<div class="content">
<table class="reference">
<tbody>
<tr>
<th width="30%">实际颜色</th>
<th width="30%">中文颜色</th>
<th width="20%">英文颜色</th>
<th width="20%">十六进制</th>
<th width="20%">RGB颜色值</th>
</tr>
<tr>
<td bgcolor="#000000"> </td>
<td>黑色</td>
<td>black</td>
<td>#000000</td>
<td>rgb(0,0,0)</td>
</tr>
<tr>
<td bgcolor="#FF0000"> </td>
<td>红色</td>
<td>red</td>
<td>#FF0000</td>
<td>rgb(255,0,0)</td>
</tr>
<tr>
<td bgcolor="#00FF00"> </td>
<td>绿色</td>
<td>green</td>
<td>#00FF00</td>
<td>rgb(0,255,0)</td>
</tr>
<tr>
<td bgcolor="#0000FF"> </td>
<td>蓝色</td>
<td>blue</td>
<td>#0000FF</td>
<td>rgb(0,0,255)</td>
</tr>
<tr>
<td bgcolor="#FFFF00"> </td>
<td>黄色</td>
<td>yellow</td>
<td>#FFFF00</td>
<td>rgb(255,255,0)</td>
</tr>
<tr>
<td bgcolor="#00FFFF"> </td>
<td>天蓝</td>
<td>Aqua</td>
<td>#00FFFF</td>
<td>rgb(0,255,255)</td>
</tr>
<tr>
<td bgcolor="#FF00FF"> </td>
<td>紫色</td>
<td>purple</td>
<td>#FF00FF</td>
<td>rgb(255,0,255)</td>
</tr>
<tr>
<td bgcolor="#C0C0C0"> </td>
<td>浅灰色</td>
<td>Silver</td>
<td>#C0C0C0</td>
<td>rgb(192,192,192)</td>
</tr>
<tr>
<td bgcolor="#FFFFFF"> </td>
<td>白色</td>
<td>white</td>
<td>#FFFFFF</td>
<td>rgb(255,255,255)</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
运行效果如下图所示：
2、CSS中字体和文本属性
CSS的字体和文本属性用于控制文本的外观和显示效果，常用的字体和文本属性如下：
font-family：设置字体类型，常见中文字体包括宋体、黑体、楷书、微软雅黑等。例如：font-family："宋体"。
font-size：设置字体大小，单位主要包括px(像素)、em、rem、cm、mm、pt、pc等。例如：font-size：15px。
font-style：设置字体风格，包括三个值normal(默认标准)、italic(倾斜)和oblique(倾斜)。例如：font-style：italic。
font-weight：设置字体的粗细程度，其属性值有100～900和normal（等同于400）、bold（等同于700）、bolder（更粗的字体）、lighter（更细的字体）。例如：font-weight：bold或者font-weight：700。
foot：在同一个声明中设置所有字体属性，字体属性的顺序：字体风格->字体粗细->字体大小->字体类型。例如： foot：italic bold 12px "楷书"。
color：设置文本颜色，可以使用英文颜色名称、十六进制代码、RGB等。color: red或者color: #FF0000或者color: rgb(255,0,0)。
text-align：设置文本的水平对齐方式，如text-align:left（左对齐，默认值）、text-align:right（右对齐）、text-align:center（居中）、text-align:justify（实现两端对齐文本效果）等。
text-decoration：设置文本的装饰效果，如text-decoration:none(默认值，定义的标准文本)、text-decoration:underline(设置文本的下划线)、text-decoration:overline(设置文本的上划线)、text-decoration:line-through(设置文本的删除线)、
line-height：设置文本的行高。例如：line-height:25px。
text-indent：设置首行缩进（只对第一行起作用）。例如，text-indent: 20px。
word-spacing：设置单词间距。例如，word-spacing: 4px。
letter-spacing：设置字母间距。例如，letter-spacing: 2px。
3、背景相关属性
background-color：设置标签的背景颜色。例如，background-color: #FFFFFF，设置背景颜色为白色。
background-image：设置标签的背景图片。例如，background-image: url('image.jpg')，设置背景图片为image.jpg。
background-repeat：设置背景图片的平铺方式。包括四个值repeat（沿水平和垂直两个方向平铺）、no-repeat（不平铺，即只显示一次）、repeat-x（只沿水平方向平铺）、repeat-y（只沿垂直方向平铺）。例如，background-repeat: no-repeat，不重复平铺背景图片。
background-position：设置背景图片的位置。水平方向的值包括left、center、right，垂直方向的值包括top、center、bottom。例如，background-position: right top，表示背景图像的右上角与标签的右上角对齐，background-position: center，表示背景图像居中。
4、布局属性
（1）边距和填充
margin（外边距）：外边距是指标签边框与相邻标签之间的距离，用于控制标签之间的间隔。外边距可以影响标签的布局和位置。margin可以分别设置上、右、下、左四个方向的外边距，例如：margin: 5px 10px 15px 30px。也可以使用缩写形式，如：margin: 10px（四个方向外边距均为10像素）。
padding（内边距）：内边距是指标签内容与边框之间的距离，用于在标签内部创建空白区域。padding可以分别设置上、右、下、左四个方向的内边距，例如：padding: 5px 10px 15px 30px。也可以使用缩写形式，如：padding: 20px;（四个方向内边距均为20像素）。
（2）边框属性
border-style：设置边框的样式，border-style属性值包括: none（无边框）、solid（实线）、dashed（虚线）以及dotted（点线）等。例如，border-style:solid。
border-width：设置边框的宽度。例如，border-width:2px。
border-color：设置边框的颜色。例如，border-color:red。
border：复合属性，用于设置边框宽度、样式以及颜色。例如，border:2px solid red。表示设置边框的宽度为2像素，样式为实线，颜色为红色。
border-radius：创建圆角边框。可以给标签添加圆角边框，从而让网页的视觉效果更加平滑和现代化。border-radius属性包括四个值，分别表示左上角、右上角、右下角和左下角的圆角半径。其中半径的像素值越大，圆角边框的效果越明显。例如，border-radius:5px 10px 15px 30px。如果只设置一个值，那么四个角落的圆角半径将相等。例如：border-radius:5px，表示所有角落的圆角半径为5px。
border-top-left-radius：创建圆角边框，设置左上圆角半径。例如：border-top-left-radius:5px。
border-top-right-radius：创建圆角边框，设置右上圆角半径。例如：border-top-right-radius:10px。
border-bottom-right-radius：创建圆角边框，设置右下圆角半径。例如：border-bottom-right-radius:15px。
border-bottom-left-radius：创建圆角边框，设置左下圆角半径。例如：border-bottom-left-radius:20px。
（3）显示和隐藏
display：控制标签的显示方式。display属性值包括inline（行内）、block（块级）、inline-block（行内块级）、none（无）。例如，display:inline（设置标签以行内标签的方式显示）。display:block（设置标签以块级标签的方式显示）。display:none（设置标签不显示，即隐藏标签）。display:inline-block（设置标签以行内块级标签的方式显示）。这里需要注意的是，设置display:none后，被隐藏的标签不占据页面空间，并且不会对页面布局产生影响。
visibility：控制标签的可见性。例如，visibility: hidden（隐藏标签）或visibility: visible（显示标签，这是默认值）。这里需要注意的是，visibility: hidden可以隐藏标签，与display:none类似，但是visibility: hidden隐藏标签后，虽然标签不可见，标签仍然会占据空间，而且会影响页面布局。
（4）溢出处理
overflow属性在HTML中用于指定当标签内容超出其容器尺寸时如何处理溢出的内容。该属性可以控制标签中内容的显示方式，包括剪裁、隐藏、滚动或自动显示滚动条。
overflow属性有以下几个常见取值：
“overflow:visible”：默认值，内容会溢出容器并继续显示在容器外部。
“overflow:hidden”：内容会被裁剪，超出容器的内容将被隐藏。
“overflow:scroll”：内容会被修剪，但浏览器会显示滚动条以便查看其余内容，即使内容没有溢出也会显示滚动条。
“overflow:auto”：如果内容超出容器尺寸，浏览器会自动显示滚动条；如果内容没有超出，则不显示滚动条。
“overflow:inherit”：继承父容器的overflow属性的值。
以上这些属性是CSS的基本功能，开发者可以通过合理使用这些属性，灵活地设计和调整网页的外观、布局和样式，创建出丰富且具有吸引力的网页界面。