问题目录
1、实例演示:<iframe>标签的使用
2、实例演示: css样式设置的优先级
3、实例演示: css的id, class与标签选择器的使用规则
4、实例演示盒模型的五大要素: width, height, padding, border, margin(margin可暂忽略)
1、内联框架：在当前页面中，加载另一个页面，俗称“画中画”。如：<iframe>标签
实例
<!-- 内联框架：画中画。在当前页面中，加载另一个页面。 --> <h1>内联框架的演示</h1> <h3><a href="https://baidu.com" target="baidu">度娘</a></h3> <p><iframe src="https://baidu.com" frameborder="1" name="baidu" width="500" height="300"></iframe> </p>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2、CSS的样式有三种：1.内联样式，2.内部样式，3.外部样式
内联样式：将元素的样式使用style属性应用到当前元素上，只适用于当前标签。<style=""
内部样式：高于外部样式。将元素的样式规则用style标签插入到当前的html文档中
这个样式规则，仅适用于当前的这个html文档。p{}
外部样式：将外部CSS文件资源引用到这个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">
<!-- 3.外部样式 -->
<link rel="stylesheet" href="css/style1.css">
<title>CSS简介与引入</title>
<style>
/* 2.内部样式 高于外部样式 */
/* 将元素的样式规则用style标签插入到当前的html文档中
这个样式规则，仅适用于当前的这个html文档 */
p {
color: green;
}
</style>
</head>
<body>
<!-- 1.内联样式：将元素的样式使用style属性应用到当前元素上，只适用于当前标签 -->
<p style="color:blue;">林志玲嫁给一个***人</p>
<p style="color:blue;">苍老师是一个***人</p>
<p style="color:red;">波波姐也是一个***人</p>
</body>
</html>
<!-- 显示级别：
内联样式 >内部样式 >外部样式
<style="" p{} style1.css -->运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
p {
color: goldenrod;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
3、css选择器：指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。四种基本选择器：id选择器；类选择器；标签选择器；js选择器
容器：通用容器和语句化标签
<!DOCTYPE html>
<html><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>容器</title>
</head><body>
<!-- 通用容器 -->
<div>最常用的块级容器</div>
<span>最常用的内联容器</span> <div id="header">头部</div>
<div id="nav">导航</div>
<div id="main">主题
<div>左边内容区</div>
<div>右边侧边栏</div>
</div>
<div id="footer">底部</div> <!-- 语句化标签 -->
<header>头部</header>
<nav ">导航</nav>
<main>主题
<article>左边内容区</artivle>
<aside>右边侧边栏</aside>
</main>
<footer>底部</footer>
</body></html>id选择器：针对某一个特定的标签使用。CSS中的id选择器用“#”来定义id样式，用id来引用。
HTML页面，不能出现相同的id，哪怕他们不是一个类型。比如页面上有一个id为pp的p，一个id为pp的div，是非法的！
类选择器：针对你想要的所有标签使用。CSS中用圆点“.”来定义类样式，用class来引用样式。
（1）不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同完成这个标签的样式。
（2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。例如：
<style type="text/css">
.lv{
color: green;
}
.da{
font-size: 30px;
}
.underline{
text-decoration: underline;
}
</style>然后让每个标签去选取自己想要用的类选择器：
<p class="lv da">段落1</p>
<p class="lv xian">段落2</p>
<p class="da xian">段落3</p>类上样式，id上行为。意思是说，class属性交给css使用，id属性交给js使用
标签选择器：针对页面上的一类标签。选择器的名字代表html页面上的标签。
注意：(1)所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、 div等。 （2）无论这个标签藏的多深，一定能够被选择上。（3）选择的所有，而不是一个。
三种选择器的区别：
标签选择器针对的是页面上的一类标签。
ID选择器是只针对特定的标签(一个)，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>CSS基本选择器</title> <style> /* id选择器：一个 */ #red { color: red; } /* 类选择器 ：一批*/ .green { color: green; } /* 标签选择器 */ p { color: aqua; } </style> </head> <body> <!-- 选择元素只会有两种可能： --> <!-- 1.找到了：又会有两种可能，找到一个，找到了一批 --> <!-- 2.没找到：第一种选择器语法错误，第二是页面中不存在与选择器匹配的元素 --> <p id="red">买了macbook的同学，后悔了吗？</p> <p class="green">原来CSS非常简单</p> <p class="green">做一个快乐的学习者</p> <!-- 优先级：标签< class < id < js --> <script> document.getElementsByTagName('p').item(0).style.color = 'blue'; </script> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
4 盒模型：
HTML文档中的每个元素在渲染的时候都会被描绘成一个矩形盒子，而盒模型正是用来表示每个元素盒子所占用空间大小的模型。
在我们现实生活中，描述一个矩形直接用宽和高即可。但是在CSS中主要通过四个部分来描述，分别为：margin（外边距），border（边框），padding（内边距），content（内容区域）。如下图：
1. 盒模型是布局的基础,页面上的一切可见元素皆可看做盒子
2. 盒子默认都是块级元素: 独占一行,支持宽度设置(根据盒子模型示意图分析)
3. 盒子模型可以设置5个样式: 宽高背景内外边距与边框
(1): width: 宽度(水平方向)
(2): height: 高度(垂直方向)
(3): background-color: 背景 (默认透明)
(4): padding: 内边距, 内容与边框之间的填充区域
(5): margin: 外边距,决定当前盒子与其它盒子之间的位置与关系
(3): border: 边框, 位于内外边距之间, 是可见元素,允许设置宽度, 样式和颜色
4. 根据是可见性可以分为二类:
(1). 可见的: width, height, border
(2). 透明的: background, padding, 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"> <link rel="stylesheet" href="css/style2.css"> <title>盒模型</title> </head> <body> <!-- 1. 盒模型是布局的基础,页面上的一切可见元素皆可看做盒子 2. 盒子默认都是块级元素: 独占一行,支持宽度设置(根据盒子模型示意图分析) 3. 盒子模型可以设置5个样式: 宽高背景内外边距与边框 (1): width: 宽度(水平方向) (2): height: 高度(垂直方向) (3): background-color: 背景 (默认透明) (4): padding: 内边距, 内容与边框之间的填充区域 (5): margin: 外边距,决定当前盒子与其它盒子之间的位置与关系 (3): border: 边框, 位于内外边距之间, 是可见元素,允许设置宽度, 样式和颜色 4. 根据是可见性可以分为二类: (1). 可见的: width, height, border (2). 透明的: background, padding, margin 注: padding,margin 只允许设置宽度, 不允许设置样式与颜色 --> <div class="box1"> <div class="box2"></div> </div> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
CSS: style2.css
实例
.box1 {
/* 内容区content */
width: 200px;
height: 200px;
background-color: lightblue;
/*padding-top: 20px;*/
/*padding-right: 30px;*/
/*padding-bottom: 40px;*/
/*padding-left: 50px;*/
/*padding: 20px 30px 40px 50px;*/
/* 内边距：上20，右30，下20，左30 */
padding: 20px 30px;
/* 边框 ：按顺时针方向*/
/* 上边框 */
border-top: 10px solid red;
/* 右边框 */
border-right: 10px dashed green;
/* 下边框 */
border-bottom-width: 10px;
border-bottom-style: dotted;
border-bottom-color: yellow;
/* 左边框 */
border-left-width: 20px;
border-left-style: double;
border-left-color: black;
}
.box2 {
height: inherit;
/*padding: inherit;*/
/*margin: inherit;*/
background-color: wheat;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
