CSS总结(2)_css border top是什么意思-CSDN博客

本文链接：https://blog.csdn.net/WildKingxue/article/details/119812913

一.CSS背景设置

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

CSS 属性定义背景效果:

1.background-color--定义元素的背景颜色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景颜色</title>
	</head>
	<body>
		<div style="width: 200px;height: 200px;background-color: aqua;">
			<div style="width: 6.25rem; height: 6.25rem;float: left; background-color: aliceblue;">
				白色
			</div>
			<div style="width: 6.25rem; height: 6.25rem;float: left;">
				背景颜色
			</div>
			<div style="width: 6.25rem; height: 6.25rem;float: left;">
				背景颜色
			</div>
			<div style="width: 6.25rem; height: 6.25rem;float: left;background-color: red;">
				红色
			</div>
		</div>
	</body>
</html>

2.background-image--定义元素的背景图像。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景图像</title>
		<style type="text/css">
			body {
				margin：0px;
				background-image: url(img/1.jpg);
				color: yellow;
				justify-content: center;
				display: flex;
			}

			#div1 {
				width: 500px;
				height: 700px;
				background-color: blueviolet;
				opacity: 0.5;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<h2>张云雷</h2>
			<h3>张云雷，本名张磊， 1992年1月11日出生于天津市，中国内地相声男演员、影视演员、歌手，德云演出八队队长。</h3>
			<h3>2011年，张云雷结束倒仓期，回归德云社 [1] ；同年，参加郭德纲单口相声专场，从而正式复出。</h3>
			<h3>2016年，参加东方卫视的原创喜剧真人秀节目《笑傲江湖第三季》。</h3>
			<h3>2017年，任德云社德云八队队长；同年，其出演的喜剧电影《相声大电影之我要幸福》上映。</h3>
			<h3>2018年，在上海举行“德云社-张云雷相声专场”，同年，作为“国风召集人”参加爱奇艺国风文化创新推广唱演秀节目《国风美少年》。</h3>
			<h3>2019年，推出首支个人单曲《毓贞》；3月，张云雷因身体原因提前退出东方卫视喜剧竞演综艺节目《欢乐喜剧人第五季》；10月，推出个人首张EP《蓝色天空》。</h3>
			<h3>2020年6月，发行单曲《探清水河》；10月，发行个人第二张EP《牵挂》。</h3>
		</div>

	</body>
</html>

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

(1)background-repeat

background-repeat--设置背景图像水平或垂直平铺。

不平铺：background-repeat：no-repeat；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景图像</title>
		<style type="text/css">
			body{
				margin: 0px;
				background-image: url(img/faq03.jpg);
				background-repeat: no-repeat;
			}
		</style>
	</head>
	<body>
	</body>
</html>

水平平铺：background-repeat：repeat-x;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>水平平铺</title>
		<style type="text/css">
			body{
				margin: 0px;
				background-image: url(img/faq03.jpg);
				background-repeat:space;
			}
		</style>
	</head>
	<body>
	</body>
</html>

垂直平铺：background-repeat: repeat-y;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直平铺</title>
		<style type="text/css">
			body{
				margin: 0px;
				background-image: url(img/faq03.jpg);
				background-repeat: repeat-y;
			}
		</style>
	</head>
	<body>
	</body>
</html>

(2)background-attachment

background-attachment--设置背景图像是否固定或者随着页面的其余部分滚动。

scroll	背景图片随着页面的滚动而滚动，这是默认的。
fixed	背景图片不会随着页面的滚动而滚动。
local	背景图片会随着元素内容的滚动而滚动。
initial	设置该属性的默认值。
inherit	指定 background-attachment 的设置应该从父元素继承。

主要为两点：随着页面的滚动而滚动还是不滚动

scroll--背景图片随着页面的滚动而滚动，这是默认的。

fixed--背景图片不会随着页面的滚动而滚动。

(3)background-position

background-position--属性设置背景图像的起始位置。

x% y%--第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。。默认值为：0％0％。

xpos ypos--第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions。

inherit--指定background-position属性设置应该从父元素继承。

background-position不常用

二.CSS 文本属性设置

1.color--设置颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>color</title>
		<style type="text/css">
			p{
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<p>我喜欢你</p>
	</body>
</html>

2.text-align--设置文本的水平对齐方式

居中:center

左对齐:left

右对齐:right

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>color</title>
		<style type="text/css">
			p{
				color: #FF0000;
			}
			#b1{
				text-align: center;
			}
			#b2{
				text-align: right;
			}
			#b3{
				text-align: left;
			}
		</style>
	</head>
	<body>
		<p id="b1">我喜欢你</p>
		<p id="b2">我喜欢你</p>
		<p id="b3">我喜欢你</p>
	</body>
</html>

3.text-decoration--设置或删除文本的装饰

4.text-transform--用来指定在一个文本中的大写和小写字母,可设置大写或小写字母，或每个单词的首字母大写。

5.text-indent--指定文本的第一行的缩进

6.letter-spacing--设置字符间距

7.line-height--设置行高

8.text-shadow--设置文字阴影

格式:text-shadow: h-shadow v-shadow blur color;

h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。

9.word-spacing--增加或减少字与字之间的空白

综合举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS的文本属性</title>
		<style type="text/css">
			p{
				background-color: blue;
				color: red;
				width: 400px;
				height: 50px;
				text-align: center;
				font-size: 1.875rem;
				text-shadow: 10px 10px 3px #FFFF00;
			}
			open{
				color: #0000FF;
				text-decoration: underline;
				word-spacing: 20px;
			}
			a{
				text-transform: capitalize;
				text-indent: 30px;
				background-color: #8A2BE2;
			}
		</style>
	</head>
	<body>
		<p>我喜欢舞蹈</p>
		<open>舞蹈有地板舞 机械舞 爵士舞......</open><br>
		<a>my love dance</a>
	</body>
</html>

10.vertical-align--设置一个元素的垂直对齐方式

top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部
bottom	使元素及其后代元素的底部与整行的底部对齐
text-bottom	把元素的底端与父元素字体的底端对齐

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对齐方式</title>
		<style type="text/css">
		img{
			width: 100px;
			height: 100px;
		}
			#b1{
				vertical-align: top;
			}
			#b2{
				vertical-align: middle;
			}
			#b3{
				vertical-align: bottom;
			}
		</style>
	</head>
	<body>
		<b>奔驰图标 上对齐<img id="b1" src="img/3.jpg" ></b>
		<br>
		<br>
		<b>奔驰图标 中对齐<img id="b2" src="img/3.jpg" ></b>
		<br>
		<br>
		<b>奔驰图标 下对齐<img id="b3" src="img/3.jpg" ></b>
	</body>
</html>

三.CSS字体属性

1.font-family--指定一个元素的字体

2.font-size--用于设置字体大小

3.font-style--指定文本的字体样式

normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

4.font-weight--设置文本的粗细

综合举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS字体属性</title>
		<style type="text/css">
			ul{
				list-style-type: none;
			}
			#b1{
				color: #FF0000;
				font-size: 30px;
			}
			#b2{
				color: #00FFFF;
				font-family: 宋体;
				font-weight: 900;
				text-decoration: underline;
			}
			#b3{
				color: #FFFF00;
				font-size: 25px;
				font-style: italic;
			}
			#b4{
				color: #0000FF;
				font-size: 2.1875rem;
				font-weight: 100;
			}
		</style>
	</head>
	<body>
		<ul>
			<li id="b1">春眠不觉晓</li>
			<li id="b2">处处闻啼鸟</li>
			<li id="b3">夜来风雨声</li>
			<li id="b4">花落知多少</li>
		</ul>
	</body>
</html>

四.列表属性

1.list-style-image--使用图像来替换列表项的标记

2.list-style-position--指示如何相对于对象的内容绘制列表项标记

3.list-style-type--设置列表项标记的类型。

综合举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS列表属性</title>
		<style type="text/css">
			ul,ol{
				list-style-image: url('img/4.png');
			}
			li{
				border: 1px solid black;
				width: 130px;
			}
			ul{
				list-style-position: inside;
			}
			ol{
				list-style-position: outside;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>春眠不觉晓</li>
			<li>处处闻啼鸟</li>
			<li>夜来风雨声</li>
			<li>花落知多少</li>
		</ul>
		<ol>
			<li>春眠不觉晓</li>
			<li>处处闻啼鸟</li>
			<li>夜来风雨声</li>
			<li>花落知多少</li>
		</ol>
	</body>
</html>

五.CSS 表格属性

1.border--设置表格边框

2.border-collapse--设置表格的边框是否被折叠成一个单一的边框或隔开

3.width和height--定义表格的宽度和高度

4.text-align--设置水平对齐方式，向左，右，或中心

5.vertical-align--设置垂直对齐方式，顶部，底部或中间

6.padding--控制边框和表格内容之间的间距，应使用td和th元素

7.background-color--设置背景颜色

综合实例：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS 表格属性</title>
		<style type="text/css">
			table,td{
				border: 1px solid #000000;
				border-collapse:collapse;
			}
			table{
				width: 700px;
				height: 300px;
				background-image: url(img/2.jfif);
			}
			tr{
				text-align: center;
			}
			#b1{
				vertical-align: bottom;
			}
			#b2{
				background-color: #FF1493;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td colspan="7" align="center">XX公司人员信息统计表</td>
			</tr>
			<tr id="b1">
				<td>序号</td>
				<td>姓名</td>
				<td>性别</td>
				<td>名族</td>
				<td>身份证号后四位</td>
				<td>年龄</td>
				<td>备注</td>
			</tr>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>男</td>
				<td>汉族</td>
				<td align="center">6269</td>
				<td>40</td>
				<td></td>
			</tr>
			<tr id="b2">
				<td>2</td>
				<td>李四</td>
				<td>女</td>
				<td>汉族</td>
				<td align="center">0003</td>
				<td>49</td>
				<td></td>
			</tr>
			<tr>
				<td>3</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>

六.CSS 边框属性

border属性--定义四边边框的宽度，样式，颜色。

格式：border:宽度样式颜色；【中间用空格隔开】

也可以拆开来单个使用：

1.也可以只定义一边的属性

border-top---上边的宽度样式颜色

border-right---上边的宽度样式颜色

border-bottom---上边的宽度样式颜色

border-left---上边的宽度样式颜色

2.border-width--定义四边的宽度

也可以只设置一边的宽度：

border-top-width---上边宽度

border-right-width---右边宽度

border-bottom-width---下边宽度

border-left-width---左边宽度

3.border-style--定义四边的样式

也可以只设置一边的样式：

border-top-style---上边样式

border-right-style---右边样式

border-bottom-style---下边样式

border-left-style---左边样式

4.border-color--定义四边的颜色

也可以只设置一边的颜色：

border-top-color---上边颜色

border-right-color---右边颜色

border-bottom-color---下边颜色

border-left-color---左边颜色

综合举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS 边框属性</title>
		<style type="text/css">
			img{
				border-top: 20px dashed #000000;
				border-left: 10px double #0000FF;
				border-right: 5px dotted #FF0000;
				border-bottom: 15px solid blueviolet;
			}
		</style>
	</head>
	<body>
		<img src="img/2.jpg" >
	</body>
</html>

七.CSS 盒子模型

所有 HTML 元素可以看作盒子，在 CSS 中，"box model "这一术语是用来设计和布局时使用。

CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型 (Box Model)：

Margin（外边距） - 清除边框区域。Margin 没有背景颜色，它是完全透明
Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响
Content（内容） - 盒子的内容，显示文本和图像

当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。.

计算他的宽度和高度：

width:300px;        

padding:10px;        

border:5px solid gray;        

margin:20px;

宽度=Margin（外边距）*2+Border（边框）*2+Padding（内边距）*2+Content（内容）=

20*2+5*2+10*2+300=370px

高度同理；

内边距和外边距的了解图：

1.Padding（内边距）【填充】

在CSS中，它可以指定不同的侧面不同的填充：

padding属性可以有一到四个值。

1、padding为四个值时---依次表示上边值右边值下边值左边值

2、padding为三个值时---依次表示上边值左右两边值下边值

3、padding:为两个值时---依次表示上下两边值和左右边两边值

4、padding:为一个值时---依次表示四个边值

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内边距</title>
		<style type="text/css">
			body{
				margin: 0px;
			}
			div{
				background-color: #FFFF00;
				width: 800px;
				height: 500px;
			}
			img{
				width: 300px;
				height: 300px;
				padding-left: 10px;
				padding-top: 30px;
				padding-bottom: 20px;
				padding-right: 0.3125rem;
				border: 30px double #FF0000;
			}
		</style>
	</head>
	<body>
		<div>
			<img src="img/2.jpg" >
		</div>
	</body>
</html>

2.Margin（外边距）

在CSS中，它可以指定不同的侧面不同的边距：

margin属性可以有一到四个值。

1、margin为四个值时---依次表示上边值右边值下边值左边值

2、margin为三个值时---依次表示上边值左右两边值下边值

3、margin:为两个值时---依次表示上下两边值和左右边两边值

4、margin:为一个值时---依次表示四个边值

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外边距</title>
		<style type="text/css">
		body{
			margin: 0px;
		}
			img{
				width: 600px;
				height: 600px;
				border: 30px solid #FFFF00;
				margin-top: 60px;
				margin-left: 100px;
			}
		</style>
	</head>
	<body>
		<img src="img\chen.jpg" >
	</body>
</html>

综合实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内边距</title>
		<style type="text/css">
		body{
			margin: 0px;
		}
		div{
			width: 37.5rem;
			height: 600px;
			background-color: #8A2BE2;
		}
			img{
				width: 300px;
				height: 400px;
				padding: 20px;
				border: 10px solid #000000;
				margin: 30px;
			}
		</style>
	</head>
	<body>
		<div>
			<img src="img/1.jpg" >
		</div>
	</body>
</html>