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 | 范围 |
邮箱 | |
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是
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>