CSS基础：background&font&字体样式_backgrounders" font-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_52854090/article/details/120616612

本文详细介绍了如何使用CSS创建一个绿色背景的div元素，并探讨了字体样式、大小、加粗、字体选择及行高设置。还展示了如何通过连续和分开书写CSS属性来实现不同的效果。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				height: 2000px;
			}
			/* background */
			#div1{
				width: 800px;
				height: 1200px;
				/* 背景颜色 */
				background-color: #98FB98;
				/* 背景图片 */
				background-image: url(../image/zun.png);
				/* 背景重复样式：默认值repeat(横纵都重复)、no-repeat（不重复）、
				 repeat-x（横向重复）、repeat(纵向不重复)*/
				 background-repeat: no-repeat;
				 /* 背景依赖模式：默认值scroll(随着页面滚动而滚动)、fixed(固定位置，不会随着页面滚动) */
				 /* scroll相对于网页是固定的，fixed在标签范围内相对显示器固定 */
				 /* background-attachment: fixed; */
				 /* 背景位置：
					值的类型：
						方向单词：
						top(上) bottom(下) center(中间) left(左) right(右)
						px像素单位：
						表示距离当前元素左上角的位置，先距离左后距离上，正数往左下，负数往右上
						百分比:
						表示距离当前元素左上角的比例值
				  */
				 /* background-position: left bottom; */
				 /* background-position: 10px 50px; */
				 background-position: 5% 30%;
				 /* 背景大小
					值的类型：
						px值
					百分比:
						是按照当前元素的宽高计算，不是按照图片原本宽高计算
					占满容器：
						contain:把图片缩放只适应容器，最长的一边占满容器
						cover:把图片缩放至足够铺满容器，最短的一边占满容器
						两种都是按照比例缩放，可能会有一部分超出容器*/
				/* background-size: cover; */
				background-size: contain;
			}
			/* 属性连写 */
			#div1{
				width: 900px;
				height: 1500px;
				background: #0000FF url(../image/1.jpg) no-repeat 10% 20%/contain;
				/* 连写的方式属性顺序不能更改，不能单独写size,如需写size必须写position,用/分开
				 可以先写连写，在分开单独写，单独写的部分会覆盖连写的部分；
				 先单独写再连写会将单独写的部分重置*/
			}
			
			/* font */
			#div1{
				/* 字体样式:默认值normal（不倾斜），italic（倾斜） */
				font-style:italic;
				/* 字体大小：主要设置高度 */
				font-size:40px;
				/* 字体加粗:值为100~500不加粗，600~900加粗，苹果系统会逐渐加粗 */
				font-weight: 900;
				/* 字体名称：可以是中文，也可以是英文，可以写多个字体避免字体在用户端无法生效 */
				font-family: "黑体","宋体";
				/* 行高:行高是上边距+下边距+文本大小，上下边距默认相等 */
				line-height: 200px;
			}
			/* 属性连写：属性最少写一个，属性顺序不能改变，字体大小size和字体名称family需要同时存在 */
			#div1{
				font:italic 900 40px/150px "黑体";
			}
			/* 其他常见字体相关样式 */
			#div2{
				height: 50px;
				/* 对其方式 */
				text-align: center;
				/* 设置边框 */
				border: 3px solid #000000;
				/* 删除线 下划线 */
				text-decoration: line-through underline;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			字节跳动、美团、滴滴
		</div>
		<div id="div2">
			字节跳动、美团、滴滴
		</div>
	</body>
</html>