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

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
音视频元素及 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” 为页面宽度

    1. 展示效果图:
    2. ![展示效果图]()

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

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

    </br>

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

  • CSS 样式来源

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

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

    1. <h1>hello 张金明</h1>
    2. <h1>hello kuangna</h1>
    3. <style>
    4.   h1 {
    5.     color: red;
    6.   }
    7. </style>

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

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

    1. <h1>你好</h1>
    2. <!-- css 应该写为 -->
    3. <style>
    4.   h1 {
    5.     color: red;
    6.   }
    7. </style>

    2.属性选择器

    1. 2.1 针对属性标签选择叠加属性(class 属性) 举例:
    2. <h1 class="name">你好呀</h1>
    3. <!-- css 应该写为  -->
    4. <style>
    5.   h1[class="name"] {
    6.     color: red;
    7.   }
    8. </style>
    9. <!-- - 语法糖形式 -->
    10. <style>
    11.   h1.name {
    12.     color: rgb(10, 186, 127);
    13.   }
    14. </style>
    16. 2.2针对属性标签选择叠加属性(id 属性)
    17. <h1 id="name">你好</h1>
    18. <style>
    19.   [id="name"] {
    20.     color: red;
    21.   }
    22. </style>
    23. <!-- - 语法糖形式  -->
    24. <style>
    25.   h1#name {
    26.     color: red;
    27.   }
    28. </style>

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

    1. 3.1父子关系:(仅限父子关系)
    2. <ul class="list">
    3.   <li class="itml">itml1</li>
    4.   <li class="itml">itml2</li>
    5.   <li class="itml">itml3</li>
    6.   <li class="itml">itml4</li>
    7.   <li class="itml">itml5</li>
    8.   <li class="itml">itml6</li>
    9. </ul>
    10. <style>
    11.   .list > .itml {
    12.     border: 1px solid red;
    13.   }
    14. </style>
    16. 3.2后代关系:`空格` (后级所有元素)
    17. <ul class="list">
    18.   <li class="itml">itml1</li>
    19.   <li class="itml">itml2</li>
    20.   <li class="itml">
    21.     itml3
    22.     <ul>
    23.       <li class="itml">itml1</li>
    24.       <li class="itml">itml2</li>
    25.       <li class="itml">itml3</li>
    26.     </ul>
    27.   </li>
    28.   <li class="itml">itml4</li>
    29.   <li class="itml">itml5</li>
    30.   <li class="itml">itml6</li>
    31. </ul>
    32. <style>
    33.   .list .itml {
    34.     border: 1px solid red;
    35.   }
    36. </style>
    38. 3.3兄弟关系:`+` (相邻的下一个元素)
    39. <ul class="list">
    40.   <li class="itml">itml1</li>
    41.   <li class="itml">itml2</li>
    42.   <li class="itml">
    43.     itml3
    44.     <ul>
    45.       <li class="itml">itml1</li>
    46.       <li class="itml">itml2</li>
    47.       <li class="itml">itml3</li>
    48.     </ul>
    49.   </li>
    50.   <li class="itml one1">itml4</li>
    51.   <li class="itml">itml5</li>
    52.   <li class="itml">itml6</li>
    53. </ul>
    54. <style>
    55.   /* 选中指定列 */
    56.   .list > .itml.one1 {
    57.     background-color: aqua;
    58.   }
    59.   /* 选中指定兄弟下一列 */
    60.   .list > .itml.one1 + * {
    61.     background-color: aqua;
    62.   }
    63. </style>
    65. 3.4同级关系:`~` (与当前元素同级的后面的全部元素)
    66. <ul class="list">
    67.   <li class="itml">itml1</li>
    68.   <li class="itml">itml2</li>
    69.   <li class="itml">
    70.     itml3
    71.     <ul>
    72.       <li class="itml">itml1</li>
    73.       <li class="itml">itml2</li>
    74.       <li class="itml">itml3</li>
    75.     </ul>
    76.   </li>
    77.   <li class="itml one1">itml4</li>
    78.   <li class="itml">itml5</li>
    79.   <li class="itml">itml6</li>
    80. </ul>
    81. <style>
    82.   /* 选中后代所有 */
    83.   .list > .itml.one1 ~ * {
    84.     background-color: bisque;
    85.   }
    86. </style>

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

【本文来源：韩国服务器 http://www.558idc.com/kt.html欢迎留下您的宝贵建议】
更多阅读