收藏
批改状态：合格
老师批语：写得不错
一、实例演示<iframe>标签的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <p> <iframe src="https://www.baidu.com" frameborder="1" width="500" height="500"> </iframe> </p> </body> </html>
二、CSS样式设置的优先级
1、CSS样式设置的优先级有3个，当对同一个标签设置样式式，分根据优先级来选择使用那个
2、优先级最高的是内联样式，在标签内添加样式
<p style="color:red;">nihao</p>
3、优先级第二的是内部样式表，使用<style>标签包含,插入到当前的html文档中
这个样式规则，仅适用于当前这个html文档中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
p {
color: green;
}
</style>
<title>Document</title>
</head>
<body>
<p>nihao</p>
</body>
</html>4、优先级最后的是外部样式表，需要新建一个css文件，然后在需要的时候引用这个文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel=stylesheet href="style1.css"> <title>Document</title> </head> <body> <p>nihao</p> </body> </html>
p {
color: yellow;
}三、CSS选择器的使用规则
选择器有三种分别为：id选择器，标签选择器 ，类选择器
当不同的选择器对同一个标签设置样式时，优先选择id选择器，再是类选择器，最后是标签选择器
如果是动态模式，还可以使用js来设置样式，优先级比id选择器更高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p {
color: red;
}
.g {
color: gold;
}
#gg {
color: green;
}
</style>
</head>
<body>
<p class="g" id="gg">选择器优先级</p>
</body>
</html>四、盒子模型大的五大要素
盒子模型五大要素为：width height padding border margin
盒子模型都可以设置5个样式
根据可见性可以把width，height，border分为可见的
bacground，pading，margin分为透明的
注意 padding，margin只允许设置宽度，不允许设置样式和颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.box {
width: 400px;
height: 300px;
background-color: green;
padding: 10px;
margin: 20px;
}
.box2 {
width: 100px;
height: 80px;
background-color: gold;
margin-left: 100px;
border: 4px solid pink;
}
</style>
<body>
<div class="box">
<div class="box2"></div>
</div>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
