CSS的属性1

m0_66163230

已于 2022-02-07 13:17:24 修改

阅读量350

点赞数

文章标签： javascript html jquery

于 2022-02-07 13:16:47 首次发布

本文链接：https://blog.csdn.net/m0_66163230/article/details/122503790

版权

1、背景属性（background）

CSS允许为任何元素添加纯色、使用图像作为背景，也可以精准地控制背景图像，以此达到精美的效果。CSS背景属性如下所示：

background-color：用于设置背景颜色。它有一些如下属性值：

transparent：为初始值，透明色，很少情况会用到它。一般用户都喜欢开启夜间模式、护眼模式。

inherit：从父元素继承对背景颜色的设置

color-name：使用具体颜色名称为元素设置背景颜色，如：red、green、blue

hex-number：使用十六进制码为元素设置背景颜色，如：#ff0000（红色）、#808080（灰色）

rgb-number：使用 rgb() 函数为元素设置背景颜色，如：rgb(255,0,0)【红色】、rgb(0,100%,0)【绿色】

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>123</title>
	</head>
	<body>
		<table border="1">
		<tr>
			<td style="background-color: red;">红色</td>
			<td style="background-color: #00ff00;">灰色</td>
			<td style="background-color: rgb(128,128,128);">绿色</td>
		</tr>
		</table>
	</body>
</html>

运行结果如下：

background-image：用于设置元素的背景图片。如果设置了图片的URL，格式为url（图片的URL），就会从元素的左上角开始放置背景图片，并沿着x轴和y轴平铺，占满元素的全部尺寸。通常需要配合background-repeat控制图像的平铺。这个属性也有如下几个属性值：

none：默认值，不显示背景图像。

url（‘URL’）：指向图像的路径，可以将 url() 看作是一个函数，括号中的 URL 为图像的具体路径。

inherit：从父元素继承背景图像的设置。

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>123</title>
		<style>
		#bg{
			color: aqua;
			background-image: url(./8.jpeg);
			margin: 50px;/*设置外边距为50px*/
			padding: 50px;/*设置内边距为50px*/
			border: 30px dotted aqua;
		}
		</style>
	</head>
	<body>
		<h1 id="bg">background-image 属性</h1>
	</body>
</html>

运行结果如下：

background-repeat：控制背景图像是否重复（控制图像的平铺）。有以下的属性值：

repeat：默认值，背景图像将在垂直方向和水平方向上重复。

repeat-x：沿着x轴重复。（水平）

repeat-y：沿着y轴重复。（垂直）

no-repeat：只显示一次，不重复。

inherit：从父元素继承 background-repeat 属性的设置

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>123</title>
		<style>
		#bg{
			color: aqua;
			background-image: url(./8.jpeg);
			background-repeat: repeat-y;
			margin: 50px;/*设置外边距为25px*/
			padding: 50px;/*设置内边距为25px*/
			border: 30px dotted aqua;
		}
		</style>
	</head>
	<body>
		<h1 id="bg">background-image 属性</h1>
	</body>
</html>

运行结果如下：

background-attachment：用于设置背景图片是否固定或者随着页面一起滚动。该属性的属性值如下：

scroll：初始值，表示背景图像会随着页面的滚动而滚动。

fixed：表示当页面其余部分滚动时，背景图像不会滚动。

inherit：继承父元素background-attachment设置。

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>123</title>
		<style>
		body{
			color: red;
			background-image: url(8.jpeg);
			background-repeat: repeat-x;
			background-attachment: fixed;
		}
		</style>
	</head>
	<body>
		<p>background-image 属性</p>
		<p>background-image 属性</p>
		<p>background-image 属性</p>
		<p>background-image 属性</p>
		<p>background-image 属性</p>
		<p>background-image 属性</p>
		<p>background-image 属性</p>
		<p>background-image 属性</p>
		<p>background-image 属性</p>
		<p>background-image 属性</p>
		<p>background-image 属性</p>
		<p>background-image 属性</p>
		<p>background-image 属性</p>
		<p>background-image 属性</p>
		<p>background-image 属性</p>
		<p>background-image 属性</p>
		<p>background-image 属性</p>
		<p>background-image 属性</p>
		<p>background-image 属性</p>
		<p>background-image 属性</p>
		<p>background-image 属性</p>
		<p>background-image 属性</p>
		<p>background-image 属性</p>
		<p>background-image 属性</p>
		<p>background-image 属性</p>
		<p>background-image 属性</p>
	</body>
</html>

运行结果如下：

background-position：用于设置背景图像原点的位置。有以下属性值：

位置参数：x轴有3个参数，分别是left、center、right，y轴有3个参数，分别是top、center、bottom。通常，x轴、y轴各取一个组成属性值。如果只给定一个值，则另一个值默认为center。

百分比：写成x%y%，表示背景图像距离元素左上角的距离。左上角：0%0%，右下角：100%100%。如果只给定一个值，则另一个值默认为50%。

长度（xpos ypos）:表示x轴、y轴距离原点的长度。单位：可以是px，也可以与百分比混合使用。

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>456</title>
	</head>
	<body>
		<div style="width: 150px;height: 150px;
		background-image: url(1.png);
		background-repeat: no-repeat;
		background-position: left top">
		</div>
		<hr />
		<div style="width: 150px;height: 150px;
		background-image: url(1.png);
		background-repeat: no-repeat;
		background-position: 50% 60%;">
		</div>
		<hr />
		<div style="width: 150px;height: 150px;
		background-image: url(1.png);
		background-repeat: no-repeat;
		background-position: 45pos 65pos;"></div>
	</body>
</html>

运行结果如下：

background-size：用于设置背景图像的尺寸。有以下属性值：

xpos ypos：用于设置背景图像的宽度（xpos）和高度（ypos），如果只设置第一个值，则第二个值将被设置为默认值 auto（自动）。

x% y%：表示背景图像相对于所在元素宽度（x%）和高度（y%），如果只设置第一个值，则第二个值将被设置为默认值 auto（自动）

cover：使背景图像足够大，可以完全覆盖元素所在的区域，但是这样可能会导致背景图像可会超出元素区域而无法显示。

contain：使背景图像足够大，背景图像可以完全显示在元素所在区域，但可能无法完全覆盖整个元素区域。

示例1如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>123</title>
		<style>
		body{
			color: red;
			background-image: url(8.jpeg);
			background-repeat: repeat-x;
			background-size: contain;
		}
		</style>
	</head>
	<body>
		<p>background-image 属性</p>
	</body>
</html>

运行结果如下：

示例2如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>123</title>
		<style>
		body{
			color: red;
			background-image: url(8.jpeg);
			background-repeat: repeat-x;
			background-size: cover;
		}
		</style>
	</head>
	<body>
		<p>background-image 属性</p>
	</body>
</html>

运行结果如下：

background-origin：用于设置 background-position属性相对那个位置来定位背景图像，有如下属性值：

padding-box：相当于元素的内边距区域来定位背景图像。

border-box：相当于元素的边框区域来定位背景图像。

content-box：相当于元素的内容区域来定位背景图像。

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>123</title>
		<style>
		#i{
			color: red;
			background-image: url(8.jpeg);
			background-repeat: no-repeat;
			background-origin: border-box;
			background-position: 10px 10px;
			margin: 50px;
			padding: 50px;
			border: 12px dotted blue;
		}
		</style>
	</head>
	<body>
		<p id="i">background-image 属性</p>
	</body>
</html>

运行结果如下：

background-clip：用于设置背景图像的显示区域。有以下的属性值：

border-box：默认值，在边框及边框以内的区域显示背景图像。

padding-box：在元素内边距及内边距以内的区域显示背景图像。

content-box：在元素内容区域中显示背景图像。

示例如下：

1、
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>123</title>
		<style>
		#i{
			color: red;
			background-image: url(8.jpeg);
			background-clip: content-box;
			background-position: 10px 10px;
			margin: 50px;
			padding: 50px;
			border: 12px dotted blue;
		}
		</style>
	</head>
	<body>
		<p id="i">background-image 属性</p>
	</body>
</html>

2、
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>123</title>
		<style>
		#i{
			color: red;
			background-image: url(8.jpeg);
			background-clip: padding-box;
			background-position: 10px 10px;
			margin: 50px;
			padding: 50px;
			border: 12px dotted blue;
		}
		</style>
	</head>
	<body>
		<p id="i">background-image 属性</p>
	</body>
</html>
3、
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>123</title>
		<style>
		#i{
			color: red;
			background-image: url(8.jpeg);
			background-clip: border-box;
			background-position: 10px 10px;
			margin: 50px;
			padding: 50px;
			border: 12px dotted blue;
		}
		</style>
	</head>
	<body>
		<p id="i">background-image 属性</p>
	</body>
</html>

运行结果如下：

background： 简写属性，可以将background-color、background-position、background-attachment、background-image、background-repeat全部设置在一个样式中；也可以省略几项。以上属性的属性值可以用空格拼接作为background的属性值。

2、字体属性（font）

HTML最核心的内容还是以文本内容为主，CSS也是为HTML的文字设置字体属性，不仅可以更换不同的字体，还可以设置文字的不同的风格，使用户有更好的体验。CSS中也会有一些常用的字体属性，如下所示：

font-family：用于设置元素的字体。该元素属性值可以设置多个字体，如果浏览器不支持第一个，则会尝试下一个，以此类推。它的属性值如下：

family-name：字体名称。一个字体名称代表一种字体，例如：宋体。

generic-family：字体系列。一个字体系列代表一种类型的字体，其中会包含很多相似但又不同的字体。例如：

serif：有衬线字体，即在文字笔画的结尾添加特殊的装饰线或衬线。

sans-serif：无衬线字体，即在文字笔画结尾处是平滑的。

monospace：等宽字体，即每个文字的宽度都是相同的。

cursive：草书字体，该字体有连笔或特殊的斜体效果，给人一种手写的感觉。

fantasy：具有特殊艺术效果的字体。

inherit：从父元素继承字体的设置。

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>123</title>
		<style>
		#i{
			font-family: "Fira Mono",monospace,cursive,serif;
		}
		</style>
	</head>
	<body>
		<p id="i">数据结构<br>计算机网络<br>friend</p>
	</body>
</html>

运行结果如下：

font-size：用于设置字体的尺寸（大小）。它的属性值如下：

绝对大小：把字体设置为不同的尺寸。默认值：medium，取值范围：xx-small~xx-large，分别是xx-small、x-small、small、medium、large、x-large、xx-large。

相对大小：设置的尺寸是与父元素相比较的。取值为small（设置一个比父元素还小的字体）、large（设置一个比父元素还大的字体）。

长度（length）：设置成一个固定的值，例如：9px、2em。

百分比（%）：设置的尺寸是基于父元素的一个百分比。

inherit：从父元素继承字体的尺寸。

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>123</title>
		<style>
			#i{
				font-size: xx-small;
			}
			#a{
				font-size: xx-large;
			}
			#b{
				font-size: small;
			}
			#c{
				font-size: medium;
			}
			#d{
				font-size: large;
			}
			#e{
				font-size: smaller;
			}
			#f{
				font-size: larger;
			}
		</style>
	</head>
	<body>
		<p id="i">数据结构</p>
		<p id="a">计算机网络</p>
		<p id="b">数据库</p>
		<p id="c">大学语文</p>
		<p id="d">高等数学</p>
		<p id="e">大学英语</p>
		<p id="f">管理学</p>
	</body>
</html>

运行结果如下：

font-style：用于设置字体是否是斜体。它的属性值如下：

normal：默认值，显示效果：正常字体。

italic：显示字体为斜体的样式。

oblique：显示字体为倾斜的样式。

inherit：从父元素继承字体样式。

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>123</title>
		<style>
			#a{
				font-style: normal;
			}
			#b{
				font-style: italic;
			}
			#c{
				font-style: oblique;
			}
		</style>
	</head>
	<body>
		<p id="a">计算机网络</p>
		<p id="b">数据库</p>
		<p id="c">大学语文</p>
	</body>
</html>

运行结果如下：

font-variant：用于设置字体使用小写字体（相当于小写英文字母转化为大写英文字母但是它的尺寸要小。）它的属性值如下：

normal：默认值，显示效果：标准字体。

small-caps：将文本中的小写英文字母转换为小型大写字母。

inherit：从父元素继承 font-variant 属性的值。

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>123</title>
		<style>
			#a{
				font-variant: normal;
			}
			#b{
				font-variant: small-caps;
			}
		</style>
	</head>
	<body>
		<p id="a">friend</p>
		<p id="b">friend</p>
	</body>
</html>

运行结果如下：

font-weight：用于设置字体的粗细。它的属性值如下：

normal：默认值，显示为正常字体，相当于400。

bold：粗体字体，相当于700。

bolder：更粗的字体。

lighter：更细的字体。

inherit：从父元素继承字体的粗细。

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>123</title>
		<style>
			#a{
				font-weight: normal;
			}
			#b{
				font-weight: 100;
			}
			#c{
				font-weight: bold;
			}
			#d{
				font-weight: bolder;
			}
			#e{
				font-weight: lighter;
			}
		</style>
	</head>
	<body>
		<p id="a">学习</p>
		<p id="b">写作业</p>
		<p id="c">数据结构</p>
		<p id="d">数据库</p>
		<p id="e">计算机网络</p>
	</body>
</html>

运行结果如下：

font：也是简写属性，与之前的background属性的用法相似。不同的是使用 font 属性需要遵循以下顺序：

font：【[font-style||font-variant||font-weight||font-stretch]?font-size[/line-height]?font-family】| capion | icon | menu | massage-box | small-capion |status-bar