css选择器-2019.9.2

1. 实例演示:<iframe>标签的使用

实例

<div>
  <h3>这是一个内联框架标签</h3>
  <h3><a href="https://baidu.com" target="baidu">百度</a></h3>
  <iframe frameborder="1" width="300" height="200" name="baidu"></iframe>
  
</div>

2. 实例演示: css样式设置的优先级

实例

<style>
    /* 内部样式 */
    /* 将元素的样式规则用style标签插入到当前的HTML文档中 */
    p{color: blue;}
</style>
<!-- 外部样式 -->
<link rel="stylesheet" href="demo.css">
<div>
  <!-- 内联样式 -->
  <p style="color:red;">这是一段测试文本</p>
</div>

3. 实例演示: css的id, class与标签选择器的使用规则

实例

<style>
  .center {
      color: blue;
  }

  #center {
      color:green;
  }

</style>
<div>
  <h1 id="center">测试文本1</h1>
  <p class="center">测试文本2</p>
</div>

4. 实例演示盒模型的五大要素: width, height, padding, border, margin(margin可暂忽略)

实例

<style>
  .box {
    width: 500px;
    height: 500px;
    padding: 10px;
    border: 5px dashed black;
    margin: 0;
  }
</style>

<div>
  <div class="box">这是一个盒子</div>

</div>

5.总结

    1）iframe 内联框架：iframe 元素会创建包含另外一个文档的内联框架（即行内框架，文档中的文档）。

        作用：在当前页面中，加载另一个页面，让页面变得美观。

        其中的src属性可以设置iframe显示页面的访问地址，也可以使用name属性配合超链接的target属性进行跳转。

    2）css样式的优先级：内联样式 > 内部样式 > 外部样式；

    3）选择器的优先级：标签选择器 < class选择器 < id选择器。

    4）id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，CSS 中 id 选择器以 “#” 来定义；

         class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用，在 CSS 中，类选择器以一个点”.”号显示；

   5）盒模型由内容(content)、填充(padding)、边框(border)、边界(margin)组成，一个盒子中主要的属性就5个：width（内容宽度）、height（内容高度）、padding（内边距）、border（边框，三个要素：粗细、线型、颜色。）、margin（外边距）。 其中内外边距方向分为为上、右、下、左。