6.五种元素的CSS样式_css中第五个元素是什么-优快云博客

本文链接：https://blog.youkuaiyun.com/dyjkl/article/details/125712351

这篇博客详细介绍了CSS中关于背景、文本、字体、链接和表格的基本样式设置，包括颜色、图片、平铺、定位、对齐方式、字体家族、大小、链接状态及表格边框、宽度、高度、颜色等属性的用法，并通过代码实例展示了实际效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.CSS背景

CSS 背景属性用于定义HTML元素的背景。
CSS 属性定义背景效果:

(1)background-color（颜色）

十六进制 - 如：“#ff0000”
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”

h1 {background-color:#6495ed;}
p {background-color:rgb(255,0,0);}
div {background-color:red;}

(2)background-image（图片）

默认情况下进行平铺重复显示，以覆盖整个元素

body {background-image:url('../image/1.jpg');}

(3)background-repeat（设置图像不平铺/重复）

body
{
background-image:url('../image/1.jpg');
background-repeat:no-repeat;
}

(4)background-attachment（图像是否随页面滚动）

固定背景图像（background-attachment）：

body
{ 
    background-image:url('../image/1.jpg');
    background-repeat:no-repeat;
    background-attachment:fixed;
}

(5)background-position（图像起始位置）

默认从左上角开始

body
{
background-image:url('background.jpg');
background-repeat:no-repeat;
background-position:right top;
}

2.文本

(1)文本颜色（color）：

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

(2)文本的对齐方式（text-align）：

h1 {text-align:center;}（居中）
p.date {text-align:right;}（右）
p.main {text-align:justify;}（两端）

(3)去除链接下划线（text-decoration）：

a {text-decoration:none;}

(4)文本缩进（text-indent）：

p {text-indent:50px;}

3.字体

(1)font-family：

font-family 属性可以设置多个字体作为后备，如果浏览器不支持第一种字体，可尝试下一种字体。
注意: 如果字体系列的名称超过一个字，必须使用引号，如font-family：“宋体”
p{font-family:“楷体”, Times, serif;}

(2)字体样式（font-style）：

p.normal {font-style:normal;}   正常
p.italic {font-style:italic;}   斜体
p.oblique {font-style:oblique;}  倾斜

(3)字体大小（font-size）：

p {font-size:14px;}

4.链接

(1)链接状态：

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

(2)背景色的设置：

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

5.表格

表格边框（boder）：

table, th, td
{
    border: 1px solid black;
}

边框合并

table
{
    border-collapse:collapse;
}
table,th, td
{
    border: 1px solid black;
}

表格宽度（width）和高度（height）：

table 
{
    width:100%;
}
th
{
    height:50px;
}

表格文字对齐
水平对齐（text-align）：

td{text-align:right;}

垂直对齐（vertical-align）：

td
{
    height:50px;
    vertical-align:bottom;
}

表格边框颜色：

table, td, th
{
    border:1px solid green;
}
th
{
    background-color:green;
    color:white;
}

6.演示代码

<!DOCTYPE html>
<html><meta charset="UTF-8">
	<head>
		<title> 五种元素的CSS样式 </title>
		<link rel="stylesheet" type="text/css" href="amiao6.css">     <!-- 引入外部样式 -->
	</head>
	<body>
		<div class="background1"></div>
		<div class="background2"></div>
		<p class="text1">文本颜色</p>
		<p class="text2">文本的对齐方式</p>
		<p class="text3">缩进50px的一句话</p>
		<a href="">这是一个没有下划线的链接</a>		
		<p class="font1">这是一段使用楷体的文本</p>
		
		<table>
			<tr>
				<td>1-1</td>
				<td>1-2</td>
				<td>1-3</td>
			</tr>
			<tr>
				<td>2-1</td>
				<td>2-2</td>
				<td>2-3</td>
			</tr>
			<tr>
				<td>3-1</td>
				<td>3-2</td>
				<td>3-3</td>
			</tr>
		
		</table>
	
		
	</body>

</html>

amiao6.css

/* 设置两个背景 */
.background1{                /* 因为用了class,所以用.开头 */
	width:100%;
	height:30px;
	background-color:red;
    }
.background2{
	width:100%;
	height:30px;
	background-color:#ffff00;
    }

/* 引入背景图片 */
body{
	background-image:url('../image/1.jpg');
	background-repeat:no-repeat;                              /* 不要图片平铺 */
	background-position: top right;                          /* 从右上角平铺 */
	background-attachment:fixed;                            /* 固定背景不随页面滚动 */
    }

/* 设置整个页面大小,设置比屏幕大的,就可以滚动 */
.bigdiv{
	height:1500px;
    }

/* 设置文本颜色 */
.text1{
	color:red;
    }

/* 设置文本的对齐方式 */
.text2{
	text-align:center;
    }

/* 设置连接没有下划线 */
a{
	text-decoration:none;
    }

/* 设置首行缩进50px */
.text3{
	text-indent:50px;
    }

/* 设置字体样式 */
.font1{
	font-family:"楷体";
	font-style:oblique;         /* 使用斜体 */
	font-size:30px;
    }

/* 输入color:就会自动弹出颜色 */
a:link {color:#000000;}               /* 未访问链接*/
a:visited {color:#ff9900;}            /* 已访问链接 */
a:hover {color:#FF00FF;}              /* 鼠标移动到链接上 */
a:active {color:#0000FF;}             /* 鼠标点击时 */
a:link {background-color:#d399ff;}    /* 这些是链接的背景颜色 */
a:visited {background-color:#60f1fe;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

/* 设置表格的边框 */
/* 宽度只在table中设置,高度只在td里面设置 */
table,td{
	border:1px solid green;	  /* 设置表格边框 */
	border-collapse:collapse;      /* 设置表格边框合并成一条线 */
	background-color:rgb(124, 124, 245);
	color:white;                 /* 表格内容的颜色 */
    }
table{
	width: 50%;                  /* 占网页的多宽 */
	
    }
td{
	height: 100px;
	text-align:center;             /* 内容左右方向居中 */
	vertical-align:top;           /* 内容上下方向居上 */
}