音视频元素及 css 样式及优先级作业(4种选择器的展示方式)

音视频元素及 css 样式及优先级作业

1.音视频元素

• 视频标签
  <video src="demo.mp4" width="300" controls muted autoplay loop poster="girl.jpg "></video>
  </br>

  controls 控制按钮
  muted 播放时静音
  autoplay 自动播放
  loop 循环播放
  poster=”girl.jpg “给视频增加封面 与 autoplay 只能二选一

• 音频标签
  <audio src="123.mp3" width="300" controls autoplay></audio>
  </br>

  controls 控制按钮
  muted 播放时静音
  autoplay 自动播放
  loop 循环播放

2.CSS 样式及优先级

• iframe 内联框架元素
  <iframe src="https://j.map.baidu.com/f4/Lmsg" height="300" frameborder="3"></iframe>
  </br>

  frameborder=”3” 为内联框架线条宽度
  height=”300” 为页面宽度

  展示效果图:
  ![展示效果图]()

• 选项卡 以 iframe+地图形式举例

  ```html
  代码展示:
  <div class="box">
    <div>
      <a style="color: rgb(0, 0, 0)">请选择所在城市<a/>
      <a href="https://j.map.baidu.com/f4/Lmsg" target="1">河南</a>
      <a href="https://j.map.baidu.com/24/xobg" target="1">安徽</a>
    </div>
    <iframe frameborder="3" width="500" height="500" name="1"></iframe>
  </div>

  </br>

  在做选项卡时需注意`iframe`中的`name`标签 需与target标签属性一致.
  width="500" 为iframe标签 宽度
  height="500" 为iframe标签 高度
  name="1" 为选项卡绑定数据
  展示效果图:
  ![]()

• CSS 样式来源

  预定义样式(浏览器默认样式)
  自定义(开发者自己编写的样式)
  继承样式(简化,例如字体,字号,前景色等)

• 自定义样式类型
  1.以行内样式添加,效果仅限当前行元素
  举例:
  html <h1 style="color:red">hello 张金明</h1>
  2.使用<style></style> 元素,将当前页面中的公共样式进行提取,实现样式复用后,再通过选择器对样式进行设置.
  举例:

  <h1>hello 张金明</h1>
  <h1>hello kuangna</h1>
  <style>
    h1 {
      color: red;
    }
  </style>

  3.引用外部样式文件使用
  <link rel="styleshee" href="xxx.css" />
  4.自定义样式类型
  4.1 行业样式使用:ele.style 应用于当前元素
  4.2 文档样式使用<style>应用于当前文档
  4.3 行内样式大于外部样式

• 简单选择器 *选择器==元素=标签+属性
  1.标签选择器
  针对单行标签做选择叠加属性
  举例:

  <h1>你好</h1>
  <!-- css 应该写为 -->
  <style>
    h1 {
      color: red;
    }
  </style>

  2.属性选择器

  2.1 针对属性标签选择叠加属性(class 属性) 举例:
  <h1 class="name">你好呀</h1>
  <!-- css 应该写为  -->
  <style>
    h1[class="name"] {
      color: red;
    }
  </style>
  <!-- - 语法糖形式 -->
  <style>
    h1.name {
      color: rgb(10, 186, 127);
    }
  </style>
  2.2针对属性标签选择叠加属性(id 属性)
  <h1 id="name">你好</h1>
  <style>
    [id="name"] {
      color: red;
    }
  </style>
  <!-- - 语法糖形式  -->
  <style>
    h1#name {
      color: red;
    }
  </style>

  3.上下文选择器,通过元素的位置与层级来匹配.

  3.1父子关系:(仅限父子关系)
  <ul class="list">
    <li class="itml">itml1</li>
    <li class="itml">itml2</li>
    <li class="itml">itml3</li>
    <li class="itml">itml4</li>
    <li class="itml">itml5</li>
    <li class="itml">itml6</li>
  </ul>
  <style>
    .list > .itml {
      border: 1px solid red;
    }
  </style>
  3.2后代关系:`空格` (后级所有元素)
  <ul class="list">
    <li class="itml">itml1</li>
    <li class="itml">itml2</li>
    <li class="itml">
      itml3
      <ul>
        <li class="itml">itml1</li>
        <li class="itml">itml2</li>
        <li class="itml">itml3</li>
      </ul>
    </li>
    <li class="itml">itml4</li>
    <li class="itml">itml5</li>
    <li class="itml">itml6</li>
  </ul>
  <style>
    .list .itml {
      border: 1px solid red;
    }
  </style>
  3.3兄弟关系:`+` (相邻的下一个元素)
  <ul class="list">
    <li class="itml">itml1</li>
    <li class="itml">itml2</li>
    <li class="itml">
      itml3
      <ul>
        <li class="itml">itml1</li>
        <li class="itml">itml2</li>
        <li class="itml">itml3</li>
      </ul>
    </li>
    <li class="itml one1">itml4</li>
    <li class="itml">itml5</li>
    <li class="itml">itml6</li>
  </ul>
  <style>
    /* 选中指定列 */
    .list > .itml.one1 {
      background-color: aqua;
    }
    /* 选中指定兄弟下一列 */
    .list > .itml.one1 + * {
      background-color: aqua;
    }
  </style>
  3.4同级关系:`~` (与当前元素同级的后面的全部元素)
  <ul class="list">
    <li class="itml">itml1</li>
    <li class="itml">itml2</li>
    <li class="itml">
      itml3
      <ul>
        <li class="itml">itml1</li>
        <li class="itml">itml2</li>
        <li class="itml">itml3</li>
      </ul>
    </li>
    <li class="itml one1">itml4</li>
    <li class="itml">itml5</li>
    <li class="itml">itml6</li>
  </ul>
  <style>
    /* 选中后代所有 */
    .list > .itml.one1 ~ * {
      background-color: bisque;
    }
  </style>

  张金明 你是最棒的~~~~