收藏
批改状态：合格
老师批语：今晚会讲到更多的选择器, 不要缺课哟
一、<iframe>标签的使用
功能：iframe标签用于定义内联框架。
语法：<iframe></iframe>
内联框架是在一个页面中嵌入另一个页面。
有很多网页看上去是一个网页，但实际上它其中可能镶嵌有其它网页，<iframe>标签就可以把其它网页无缝地嵌入在一个页面中。
<iframe>主要用于那些多个网页的共有部分，如导航栏、广告栏等。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <iframe src="https://www.taobao.com/" width="1200" height="500"></iframe> </body> </html>
二，CSS常用选择器
1.通用元素选择器 *: 所有的标签都变色
2.标签选择器：匹配所有使用p标签的样式 p{color:red}
3.id选择器：匹配指定的标签 #p2{color:red}
4.class类选择器：谁指定class谁的变色，可选多个 .c1{color:red} 或者 div.c1{color:red}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
/*标签选择器*/
/*所有标签是div的都变了*/
div{
font-family: 华文彩云;
}
/*id选择器*/
/*给id='c2'的设置样式，id一般不常用。因为id是不能重复的。*/
#c2{
background-color: blueviolet;
font-size: larger;
}
/*calss类选择器*/
.a1{
color: red;
}
或
p.a1{
color: blue;
}
/*通用元素选择器*/
*{
background-color: aquamarine;
color: red;
}
</style>
<body>
<div id="c1">
<div id="c2">
<p>hello haiyan</p>
<div>哇啊卡卡</div>
</div>
<p>hi haiyan</p>
</div>
<span>啦啦啦</span>
<p>p2</p>
<div>
<p>你好啊</p>
<h1>我是h1标签</h1>
</div>
</body>
</html>三、CSS样式优先级
1，CSS 优先规则1： 最近的祖先样式比其他祖先样式优先级高
<!-- 类名为 son 的 div 的 color 为 blue --> <div style="color: red"> <div style="color: blue"> <div class="son"></div> </div> </div>
2，CSS 优先规则2："直接样式"比"祖先样式"优先级高
<!-- 类名为 son 的 div 的 color 为 blue --> <div style="color: red"> <div class="son" style="color: blue"></div> </div>
3，CSS 优先规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
// HTML
<div class="content-class" id="content-id" style="color: black"></div>
// CSS
#content-id { color: red;}
.content-class {color: blue;}
div {color: grey;}4，CSS 优先规则4：计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断
// HTML
<div id="con-id">
<span class="con-span"></span>
</div>
// CSS
#con-id span {color: red;}
div .con-span {color: blue;}5，CSS 优先规则5：属性后插有 !important 的属性拥有最高优先级。若同时插有 !important，则再利用规则 3、4 判断优先级
// HTML
<div class="father">
<p class="son"></p>
</div>
// CSS
p {background: red !important;}
.father .son {background: blue;}四、css的四种引入方式
1，行内式
2，内嵌式
3，链接式
4，导入式
五、盒子模型
一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：
width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>box</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid red;
padding: 20px;
margin: 30px;
}
</style>
</head>
<body>
<div>盒子</div>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
