day031--Css--HTML

最新推荐文章于 2023-03-20 10:56:06 发布

hai_qi

最新推荐文章于 2023-03-20 10:56:06 发布

阅读量121

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/hai_qi/article/details/126511070

版权

CSS概述

css是层叠样式表

功能：

美化HTNL

配合脚本动态的改变样式

提供代码复用

与HTML代码分离，方便后期维护

1.使用方式

1.1css样式与标签在一起

css与html在一起，在html标签中通过使用style属性引入css

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- style属性中不能有空格 -->
		<div style="width: 50px;height: 30px;background-color: aliceblue;font-size: 15px;"></div>
	</body>
</html>

1.2 css样式与html标签分离,但是在`<head>`内使用`<style>`引入css

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- css要在style属性中引用 -->
		<!-- 通过id选择器进行引用 -->
		<style>
			#d1{
				width: 40px;
				height: 20px;
				background-color: aqua;
				font-size: 15px;
				font-family: 楷体;
			}
		</style>
	</head>
	<body>
		<!-- style属性中不能有空格 -->
		<div style="width: 50px;height: 30px;background-color: aliceblue;font-size: 15px;"></div>
		<div id ="d1">狗蛋</div>
	</body>
</html>

1.3 css文件和html文件分离

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 需要使用link进行连接 -->
		<!--  在head标签内使用link标签,属性href="路径/xxx.css"引入外部的css文件,加上属性rel="stylesheet"-->
		<link href="css/d2.css" rel="stylesheet" />
	</head>
	<body>
		<!-- 不在同一个html中也可以调用，但需要link进行连接，除了上述必须，还可以加入 type="text/css"-->
		<div id="d2"></div>
	</body>
</html>

2.选择器

2.1标签选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 在style属性中引入html标签，相同标签名均可获得引入的属性 -->
		<style>
			div{
				width: 99px;
				height: 22px;
				font-size: 15px;
				font-family: 康体;
				border: 2px solid red;
			}
		</style>
	</head>
	<body>
		<!-- 此时已经具有style中div标签的属性 -->
		<div>
			狗蛋蛋
		</div>
	</body>
</html>

2.2id选择器

id选择器的口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用

id选择器和类选择器的区别：

（1）类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。

（2）id选择器好比人的身份证号码，全中国是唯一的，不得重复。

（3）id选择器和类选择器最大的不同在于使用次数上。

  (4)   类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JS搭配使

   用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- #加上id对应的名字 -->
		<style>
			#d3{
				width: 100px;
				height: 20px;
				border: 2px solid deeppink;
				background-color: aqua;
				font-size: 12px;
				font-family: 楷体;
			}
		</style>
	</head>
	<body>
		<!-- 将id作为css选择器引入到style属性中，从而获取相应属性 -->
		<div id = "d3">biubiubiu</div>
	</body>
</html>

2.3class选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 通过.类名进行引入赋属性 -->
		<style>
			.dh{
				width: 50px;
				height: 100px;
				border: 2px solid yellow;
			}
		</style>
	</head>
	<body>
		<!-- 在标签中使用class进行获取 -->
		<div class="dh">千里之行 始于足下</div>
	</body>
</html>

2.4属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		/* 	标签[属性=值]{
				
			} */
			input[type=text]{
				width: 350px;
				height: 35px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<form action="/java2212/login">
			用户名: <input type="text" value="" name="username" placeholder="首字母大写"/><br>
			密码: <input type="password" name="password"/><br>
			性别:<input type="radio" name="sex"/>男
			    <input type="radio" name="sex" />女<br>
			爱好:<input type="checkbox" name="hobby"/>学习
			    <input type="checkbox" name="hobby"/>敲代码
			    <input type="checkbox" name="hobby"/>睡觉<br>
			出生年月:<input type="date" name="birthday"/><br>
			年龄:<input type="range" name="age"/>18<br />
			头像:<input type="file" name="touxiang"/><br>
			邮箱:<input type="email"/><br>
		</form>
	</body>
</html>

2.5层级选择器

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 层级选择器 
			选择器1 选择器2 ...{}
			选择器之间是空格,递进关系,在选择器1的基础上,
			再进行选择器2的选择
			*/
			.d1 span{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="d1">
			<p>d1-p</p>
			<span>d1-s2</span>
		</div>
		<div>
			<span>d2-s1</span>
			<span>d2-s2</span>
		</div>
	</body>

2.6组合选择器

选择器1,选择器2{

}
两个选择器会同时生效,两个选择器是平级关系

3.属性

3.1文字属性

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.c1{
				font-size: 35px;
				font-family: 宋体;
			}
			.c2{
				font-size: 35px;
				font-family: 楷体;
			}
		</style>
	</head>
	<body>
		<p class="c1">一为迁客去长沙，</p>
		<p class="c1">西望长安不见家。</p>
		<p class="c2">黄鹤楼中吹玉笛，</p>
		<p class="c2">江城五月落梅花。</p>
	</body>

3.2文本属性

color: red;
text-align: center;
text-indent: 20px;  /*缩进*/

3.3背景属性

		<style>
			body{
				background-color: red; 
				background-image: url("img/1.jpg");
				background-repeat:no-repeat; 
				/* background-repeat: no-repeat 不平铺
				 repeat-x x轴平铺
				 repeat-y y轴平铺
				 background-size: 背景图片大小
				 */
				background-size: 250px;
				background-position: bottom;
			}
		</style>

3.4列表属性

			.l1{
				list-style-image: url("img/数字-1.png");
			}
			.l2{
				list-style-image: url("img/2.jpg");
			}
			.l3{
				list-style-image: url("img/3.jpg");
			}

3.5尺寸属性（重点）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f31ndZx2-1661339737942)(C:\Users\张海涛\Desktop\zht2212\web尺寸.png)]

尺寸属性的使用场景

当使用相对长度单位定义尺寸时，元素的大小跟随窗口大小变化。
为保证元素的正常显示，需要设定元素的最大、最小长度。
手机端开发时需要声明元素的最大或最小长度，pc端通常使用像素。
最大或最小长度应使用像素单位。

3.6显示属性（重点）

块级元素和行内元素的相互转换

我们可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。

1）块级元素可以转换为行内元素：

一旦，给一个块级元素（比如div）设置：

display: 
inline;

那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：

此时这个div不能设置宽度、高度；
此时这个div可以和别人并排了
行内元素转换为块级元素：

同样的道理，一旦给一个行内元素（比如span）设置：
```
display: block;
```
那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：
- 此时这个span能够设置宽度、高度
- 此时这个span必须霸占一行了，别人无法和他并排
- 如果不设置宽度，将撑满父亲

3.7浮动属性float

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#d1{
				width: 200px;
				height: 200px;
				background-color: red;
				/* 浮动,会脱离当前的文档流 */
				float: right;
			}
			#d2{
				width: 200px;
				height: 200px;
				background-color: green;
				float: right;
			}
			#d3{
				width: 200px;
				height: 200px;
				background-color: blue;
				float: right;
			}
		</style>
	</head>
	<body>
		<div id="d1"></div>
		<div id="d2"></div>
		<div id="d3"></div>
	</body>
</html>

3.8定位属性(重点)

CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。
一、position 属性的作用
position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值。

1.相对定位：relative
相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调），它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。而且不脱出文档流，还占据着位置。

2.绝对定位：absolute

绝对定位：相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。它有一个重要的限制条件：定位基点（一般是父元素）不能是static定位，否则定位基点就会变成整个网页的根元素html。另外，absolute定位也必须搭配top、bottom、left、right这四个属性一起使用。absolute脱出文档流，不占据本身的位置。

3.固定定位：fixed

固定定位：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。比如我们经常看到的网页右下角显示的“返回到顶部”，就可以固定定位。

4.static 属性值
static：是position属性的默认值。如果省略position属性，浏览器就认为该元素是static定位。

3.9相对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		#d0{
			border: 2px solid red;
			width: 500px;
			height: 700px;
			margin: auto;
		}
		#d1{
			width: 200px;
			height: 200px;
			background-color: red;
			
			/* 
			相对定位不会脱离原来的文档流
			
			加了定位就可以使用位置属性: left,right,top,bottom
			相对与父级进行位置移动
			*/
			position: relative; /*相对定位 */
			left: 30px;
			top: 30px;
		}
		#d2{
			width: 200px;
			height: 200px;
			background-color: green;
		}
		#d3{
			width: 200px;
			height: 200px;
			background-color: blue;
		}
	</style>
	<body>
		<div id="d0">
		<div id="d1"></div>
		<div id="d2"></div>
		<div id="d3"></div>
		</div>
	</body>
</html>

3.10绝对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		#d0{
			border: 2px solid red;
			width: 500px;
			height: 700px;
			margin: auto;
		}
		#d1{
			width: 200px;
			height: 200px;
			background-color: red;
			
			/* 
			绝对定位会脱离原来的文档流
			绝对定位是根据页面左上角进行位置移动
			*/
			position: absolute; /*绝对定位 */
			left: 30px;
			top: 30px;
		}
		#d2{
			width: 200px;
			height: 200px;
			background-color: green;
		}
		#d3{
			width: 200px;
			height: 200px;
			background-color: blue;
		}
	</style>
	<body>
		<div id="d0">
		<div id="d1"></div>
		<div id="d2"></div>
		<div id="d3"></div>
		</div>
	</body>
</html>

HTML标签

1.1表格标签

格式

<table>
   <tr>
       <td></td>
   </tr>
</table>

1.2表单标签（重点）

格式

input输入框的输入类型

name: 暂时不用,但是后续很重要!后续java代码用name属性获得输入框值

type	功能
text	文本输入框
password	密码框
radio	单选框
checkbox	多选框
date	日期
range	范围
email	邮箱
file	文件
button	按钮
submit	提交
result	重置

		select 下拉框
			option 选项
		textarea 文本域

<form  action = "路径">
   <!--input为输入框 select为下拉框  -->
   <input type = "类型" />
   <select >
   <option> ? </option>
   <option> ? </option>
   </select>
</form>

1.3框架标签

1.3.1frameset

注意：会扩展页面容量

一个页面展示多个页面内容
框架集标签和body不能共存
frameset的属性cols是将页面按列分几份

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<frameset rows="4,6">
			<frame src="demo.html">
			<frameset cols="3,7">
				<frame src="demo1.html">
				<frame src="id.html">
			</frameset>
		</frameset>
</html>

1.3.2iframe

 <iframe> 标签规定一个内联框架。

一个内联框架被用来在当前 HTML 文档中嵌入另一个文档

一，什么是iframe

1.iframe是html元素，用于在网页中内嵌另一个网页。

2.iframe默认有一个宽高,存在边界

3.iframe是一个行内快级元素，可以通过display修改
二，iframe元素属性介绍

1.src : 指定内联网页的地址

2.frameborder: iframe默认有个边界，可以设置frameborder为0清除边界。

3.width,height: 控制iframe的宽高。

4.name：框架的名称

5.scrolling：是否可滚动，yes ,no , auto
三，iframe互相操作

1.首先明确一点，每个iframe里各自维护自己的全局window对象。

2.另外明确一点，只有同域才能进行iframe之间的读改写，跨域时，只能进行简单的路由跳转。

3.在父级使用window.frames[name]可以获取子iframe的window对象,相应的可以获取document对象，从而对子iframe进行dom操作。

4.在子iframe想要操作父元素的iframe，直接使用子元素的window.parent来获取父级元素的window对象，从而获取document来操作dom。
四，iframe之间的通信

1.发送信息：
当我们要向指定iframe发送信息时，首先要获取该iframe自己的window对象，然后使用该window对象的postMessage发送消息。

otherWindow.postMessage(data, orgin,[transfer])；
data是待发送的数据
orgin是发送的地址，为‘*’表示无限制，该参数必传，否则会报错
transfer是

2.接受信息：
在要接受信息的地方，我们使用window的onmessage事件来接受消息，该事件会返回一个事件对象，其中data包含了返回的数据，orgin返回发送源。

3.安全问题：当我们明确知道orgin是谁时，不要使用‘*’，当要接受信息时，先判断orgin是否是我们要接受的源，在做后续操作。
五，注意事项

1.获取子元素的document时要确保子元素所有dom元素已经挂载完毕，因此在原生的写法时，必须写在window的onload事件中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <!--在同一个网页中将超链接展示到一个新的框架中 -->
		<a href="demo.html" target="myiframe"> 跳转到demo.html</a>
		<a href="demo1.html" target="myiframe">跳转到demo1.html</a>
		<a href="index.html" target="myiframe">跳转到index.html</a>
		<iframe name="myiframe" src="demo.html" width="500px" height="300px"></iframe>
	</body>
</html>

数必传，否则会报错
transfer是

3.安全问题：当我们明确知道orgin是谁时，不要使用‘*’，当要接受信息时，先判断orgin是否是我们要接受的源，在做后续操作。
五，注意事项

1.获取子元素的document时要确保子元素所有dom元素已经挂载完毕，因此在原生的写法时，必须写在window的onload事件中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <!--在同一个网页中将超链接展示到一个新的框架中 -->
		<a href="demo.html" target="myiframe"> 跳转到demo.html</a>
		<a href="demo1.html" target="myiframe">跳转到demo1.html</a>
		<a href="index.html" target="myiframe">跳转到index.html</a>
		<iframe name="myiframe" src="demo.html" width="500px" height="300px"></iframe>
	</body>
</html>