Web前端开发（二）--表格结构，css选择器，优先级，背景图片，字体，边框，内外间距，盒子模型

最新推荐文章于 2022-02-10 11:52:39 发布

一个非常正经的人

最新推荐文章于 2022-02-10 11:52:39 发布

阅读量505

点赞数 1

分类专栏： Web前端文章标签：前端

本文链接：https://blog.csdn.net/qq_34244910/article/details/99462916

版权

Web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、表格的结构标签（不常用，了解即可）

thead、tbody、tfoot标签

这三个标签，不管是是什么顺序，都会是thead在上，tbody在中间，tfoot在下。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>表格</title>
</head>
<body>
	<!-- thead/tbody/tfoot放哪里都是head上body中foot下 -->
	<table border="1" cellspacing="0" cellpadding="10">
		<thead>
			<tr>
				<th colspan="3">用户信息表</th>
			</tr>
		</thead>

		<tbody>
			<tr>
				<td>用户编号</td>
				<td>用户名</td>
				<td>联系方式</td>
			</tr>
		</tbody>

		<tfoot>
			<tr>
				<th colspan="3">暂时没有更多内容了</th>
			</tr>
		</tfoot>
	</table>
</body>
</html>

二、CSS

（一）CSS简介

CSS指层叠样式表，是用来布局和美化页面的。CSS定义如何显示HTML元素。

1.CSS的三种引入方式

（1）外链式

在head中，通过link引入外部的css文件。

（2）嵌入式

将css嵌入到html代码中（head中的style标签）。

（3）行间样式

将css写在标签内的style属性中。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>css使用</title>
	<!-- 外链式 
		通过link引入外部的css文件
	-->
	<link rel="stylesheet" type="text/css" href="./css/2.css">
	<!-- 嵌入式 
		将css嵌入到html代码中
	-->
	<!-- <style type="text/css">
		div{
			width:200px;
			height:200px;
			background-color: gold;
		}
	</style> -->
</head>
<body>
	<!-- 行间样式 
		将css写在标签内的style属性
	-->
	<!-- <div style="width: 100px;height: 100px;background-color: green"></div> -->
	<!-- <div></div> -->
	<div></div>
	<p>哈哈哈哈</p>
</body>
</html>

2.css:

div{
	width: 200px;
	height:200px;
	background-color: pink;
}

p{color: blue;}

2.CSS的三种基本选择器

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>css基本的三种选择器</title>
	<style type="text/css">
		/*
		标签选择器：通过标签名选择元素
		选择符：标签名
		影响范围最大，一般很少单独使用
		 */
		div{
			width: 200px;
			height: 200px;
			background-color: blue;
		}
		/*id选择器：通过id选择元素
		选择符：#id值
		id属性的值不能重复，一个id值在一个html文件中只能出现一次
		影响范围最小
		*/
		#item1{
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		/*最常用 灵活
		类选择器：通过元素class属性的值选择元素
		选择符：.class值
		一个标签的class属性可以有多个值，一个class的值可以被多个标签使用
		影响范围介于id选择器与标签选择器之间
		 */
		.box{
			height: 150px;
			width: 150px;
			background-color: green;
		}
		.box1{
			border:3px solid black;
		}
	</style>
</head>
<body>
	<div class="box box1">1</div>
	<div id="item1">2</div>
	<div class="box">3</div>
</body>
</html>

（二）优先级

1.三种不同引入方式的css的优先级

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>优先级</title>
	<link rel="stylesheet" type="text/css" href="./css/4.css">
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			background-color: green;
		}
	</style>
</head>
<body>
	<!-- 引入方式的css优先级 
		问题：（前提是都用一种选择器）当使用三种方式对一个标签设置样式时，到底哪个生效？
		答：谁最靠近元素，谁生效。存在继承，属性复写则覆盖，不复写使用上面的。
	-->
	<div style="background-color: red;"></div>
</body>
</html>

4.css:

div{
	width: 200px;
	height: 200px;
	background-color: pink;
}

2.三种基本选择器的优先级

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择器优先级</title>
	<style type="text/css">
	#item{
		width: 200px;
		height: 200px;
		background: blue;
	}
	.box{
		width: 150px;
		height: 150px;
		background: red;
	}
	div{
		width: 100px;
		height: 100px;
		background: pink;
	}
	</style>
</head>
<body>
	<!-- 三种基本选择器的优先级？
		标签选择器<类选择器<id选择器
		谁的影响范围大，谁的优先级就小
	-->
	<div class="box" id="item"></div>
</body>
</html>

（三）关系选择器

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Document</title>
	<style type="text/css">
	/*
	后代选择器
	选择选定标签内的，所有符合要求的标签，忽略层级关系
	需求：设置.wrap内的所有p标签的样式
	选择符：空格
	*/
	/*.wrap p{
		color: blue;
	}*/

	/*
	子选择器
	只获取指定元素的直接子元素
	需求：设置.wrap的子元素p样式
	选择符：>
	 */
	/*.wrap>p{
		color: red;
	}*/

	/*
	并集选择器（组选择器/并列选择器）
	一次性给多个元素设置相同的样式
	需求：给wrap的子元素span和最外面的span标签设置字体颜色为粉色
	选择符：,
	 */
	/*.wrap>span,span{
		color: pink;
	}*/

	/*
	伪类选择器 hover
	当鼠标移入指定元素时，修改当前元素的样式
	 */
	.aaa{
		width: 100px;
		height: 100px;
		background-color: yellow;
	}
	.aaa:hover{
		width: 300px;
		color: green;
	}

	/*
	伪元素选择器
	before
	需求：在aaa内部的前面插入内容
	after
	需求：在aaa内部的后面插入内容
	 */
	.aaa:before{
		/*内容属性，必须有*/
		content: '你看';
	}
	.aaa:after{
		/*内容属性，必须有*/
		content: '嘿嘿'
	}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="innner">
			<p>我是inner中的p</p>
		</div>
		<p>我是wrap中的p</p>
		<span>我是wrap中的span</span>
	</div>

	<p>我是p标签</p>
	<span>我是最外层的span</span>

	<div class="aaa">
		我在这儿
	</div>
</body>
</html>

三、CSS常用属性

（一）CSS颜色的表示方法

1.直接使用单词表示

2.十六进制表示方式

取值范围0-f
格式：#0000ff或#00f
一共有六位十六进制数，表示最终显示的颜色。
每两个数为一组，分别代表红、绿、蓝。当两两相同时，可省略为三位。

3.十进制表示方式

取值范围0-255
格式：rgb（红，绿，蓝）
由三个十进制数，表示最终显示的颜色。

4.带透明度的颜色表示

透明度：值为小数
rgba（红，绿，蓝，透明度）

（二）背景属性

background-color
background-image
background-position
background-repeat

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>background</title>
	<style type="text/css">
		.box{
			width: 400px;
			height: 400px;
			border:1px solid red;

			background-image: url(./img/0.jpg);
			/*不重复*/
			background-repeat: no-repeat;
			/*设置位置，这里使居中*/
			background-position: 0px 51px;
			/*调整大小*/
			background-size: 100%,100%;

			/*简写*/
			background:url(./img/0.jpg) no-repeat 0px 51px;
		}

		.item{
			width: 50px;
			height: 50px;
			border: 1px solid white;
			background: url(./img/1.jpg) no-repeat -4px -107px;
		}
		.item:hover{
			background: url(./img/1.jpg) no-repeat -346px -270px;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<div class="item"></div>
</body>
</html>

（三）字体属性

1.color

2.font-size

浏览器的默认大小是16px
谷歌浏览器最小只能设置到12px

3.font-weight

4.font-family

5.font-style–是否倾斜

normal–不倾斜
italic–倾斜

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>字体</title>
	<style type="text/css">
		/*默认字体大小 16px*/
		.box{
			font-size: 50px;
			/*加粗*/
			font-weight: bold;
			/*注：你所使用的字体，用户的电脑上要有，没有会以默认字体显示*/
			/*若第一个没有，就用第二个，以此类推*/
			/*如果字体是由多个单词组成的，要加引号*/
			font-family:楷体,'Angsana new',微软雅黑,宋体;
			font-style: italic;
		}
		em{
			font-style: normal;
		}
	</style>
</head>
<body>
	<div class="box">
		大海啊，全是水
	</div>
	<em>倾斜不</em>
</body>
</html>

（四）边框属性

border-top
border-bottom
border-right
border-left
边框的颜色边框的样式边框粗细
边框样式：solid–实线 dotted–点状边框 dashed–虚线

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>字体</title>
	<style type="text/css">
		.item1{
			width: 200px;
			height: 200px;
			/*简写 设置四边边框的粗细 设置边框的样式 设置边框的颜色*/
			/*border: 1px solid red;*/
			border-top: 1px solid red;
			border-bottom: 5px dotted pink;
			border-right: 3px dashed green;
			border-left: 3px solid blue;
		}
	</style>
</head>
<body>
	<div class="item1"></div>
</body>
</html>

（五）内外间距

1.内间距:padding

设置元素边界距离内部内容之间的间距
注：会改变元素的实际大小

2.外间距:margin

设置元素距离四周外部元素之间的间距
使用和padding一样，可以单独指定方向，还可以不指定方向一次设置多个值
一般情况下，我们用margin去实现块元素的水平居中

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>内间距</title>
	<style type="text/css">
	.box{
		width: 100px;
		height: 100px;
		background: #00ff00;
		/*会改变元素大小*/
		padding-top: 20px;
		padding-bottom: 20px;
		padding-right: 20px;
		padding-left: 20px;

		/*
		简写
		一个值，代表四边的间距
		两个值：上下 左右
		三个值：上 左右 下
		四个值：从上顺时针旋转，一个值代表一个边
		*/
		/*padding: 20px;*/
		/*padding: 10px 20px 30px 40px;*/
		/*padding: 10px 20px 30px;*/
		/*padding: 10px 20px;*/
	}
	/*外间距 外补白 margin*/
	.item2,.item3{
		width:200px;
		height:200px;
	}
	.item2{
		border:1px solid red;
		margin-top:20px;
		margin-bottom:20px;
		margin-left:20px;
		margin-right:20px;
	}
	.item3{
		border:1px solid blue;
	}
	/*设置item4 水平居中*/
	.item4{
		width:200px;
		height:200px;
		border:1px solid red;

		margin:0 auto;
	}

	/*margin 为负值 主要应用于边框的合并*/
	.item5,.item6{
		width:200px;
		height:200px;
		border:5px solid red;
	}
	.item6{
		margin-top:-5px;
	}
	</style>
</head>
<body>
	<div class="box">1</div>
	<div class="item2">2</div>
	<div class="item3">3</div>

	<div class="item4">4</div>

	<div class="item5">5</div>
	<div class="item6">6</div>
</body>
</html>

（六）盒子模型

使用现实中的盒子来描述页面中的元素的属性
盒子的实际宽度=width+左border+右border+左padding+右padding
盒子的实际高度=height+上border+下border+上padding+下padding
box-sizing:border-box 让盒子大小=css样式的实际大小

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>盒子模型</title>
	<style type="text/css">
	*{margin: 0;padding: 0}
	.box1{
		width: 100px;
		height: 100px;
		background: yellow;
	}
	.box2{
		width: 100px;
		height: 100px;
		background: yellow;
		border:20px solid #000;
		/*让盒子的实际大小=css设置的实际大小*/
		box-sizing: border-box;
	}
	.box3{
		width: 100px;
		height: 100px;
		background: yellow;
		border:20px solid #000;
		padding: 20px;
		box-sizing: border-box;
	}
	.box4{
		/*手动计算*/
		/*
		要求：元素大小为100*100
		边框 20
		padding 20
		*/
		width: 20px;
		height: 20px;
		background: yellow;
		border:20px solid #000;
		padding: 20px;
	}
	</style>
</head>
<body>
	<div class="box1">1</div>
	<div class="box2">2</div>
	<div class="box3">3</div>
	<div class="box4">4</div>
</body>
</html>

一个非常正经的人

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发（二）--表格结构，css选择器，优先级，背景图片，字体，边框，内外间距，盒子模型

一、表格的结构标签（不常用，了解即可）thead、tbody、tfoot标签这三个标签，不管是是什么顺序，都会是thead在上，tbody在中间，tfoot在下。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>表格</title></he...
复制链接

扫一扫

专栏目录