H5C3-day04

最新推荐文章于 2024-08-15 18:19:19 发布

迷失555

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量711

点赞数 18

文章标签：前端 html

本文链接：https://blog.csdn.net/qq_62012576/article/details/136917973

版权

复合选择器

复合选择器：交集选择器、并集选择器、子代选择器、后代选择器

一、交集选择器：多个选择器的公共部分

          1、通配符选择器不与其他选择器相交，因为通配符选择器所有的元素
          2、id选择器不与其他选择器相交，因为id是唯一的
          3、标签不与标签相交
          4、一般都是标签与类名相交或者类名与类名相交

二、并集选择器：多个选择器的所有部分

          选择器1,
          选择器2,
          选择器3 { 
          }

三、子代选择器：选中亲儿子（直接子元素）父元素>子元素

四、后代选择器：选中所有的子元素（包括后代孙子元素……）祖先元素后代元素

总结：子代肯定是后代，后代不一定是子代

<head>
 <style>
/* 通配符选择器*/
      * {
        font-size: 30px;
      }
      /* .box {
        color: rgb(255, 0, 0);
      } */
      /*交集选择器*/
      aside.list {
        color: #ff0000;
      }
      /* *.list {
        text-decoration: underline;
      } */
      /* aside.list#navList {
        font-style: italic;
      } */
      #navList {
        font-style: italic;
      }
      /* asideheader {
        font-weight: bold;
      } */
      /* .poss {
        text-decoration: line-through;
      } */
      /* aside.poss {
        text-decoration: line-through;
      } */
      .list.poss {
        text-decoration: line-through;
      }
      /*并集选择器*/
      p,
      .content,
      #navBox,
      footer {
        text-align: center;
        color: orange;
        letter-spacing: 10px;
        font-style: oblique;
      }
      /* .content {
        text-align: center;
        color: orange;
        letter-spacing: 10px;
        font-style: oblique;
      }
      #navBox {
        text-align: center;
        color: orange;
        letter-spacing: 10px;
        font-style: oblique;
      }
      footer {
        text-align: center;
        color: orange;
        letter-spacing: 10px;
        font-style: oblique;
      } */
      /* 子代选择器*/
      ul#ulList > li {
        color: #ff0000;
      }
     /* 后代选择器*/
      ul li {
        text-decoration: underline;
        text-align: center;
      }
      div > h2,
      a {
        font-family: '黑体';
        /* text-indent: 2em; */
        color: blue;
      }
    </style>
  </head>
  <body>
    <header class="list">头部区域标签</header>
    <aside class="list poss" id="navList">第一个侧导航</aside>
    <aside class="poss">第二个侧导航</aside>
    <section>
      <p>我是段落标签</p>
      <article class="content">文章内容标签</article>
      <nav id="navBox">导航标签</nav>
    </section>
    <footer>底部区域</footer>
    <ul id="ulList">
      <li>ul的第一行</li>
      <div>
        <p>ul中的li中标的p</p>
        <ol>
          <li>ul中的第二个li中的ol的第一行</li>
        </ol>
      </div>
      <li>ul的第三行</li>
    </ul>
    <div class="box">
      <h2>box中的h2</h2>
    </div>
    <a href="#">链接标签</a>
  </body>

伪类选择器

一、伪类选择器：链接标签a的伪类，a:伪类名

      :link  未链接前
      :hover  鼠标移入时
      :active 鼠标单击时
      :visited 链接访问后
      清除浏览器缓存快捷键 ctrl+shift+del
      总结：非a标签:hover,:active都是可以使用的，但是:link，:visited都不行

二、去除a标签默认的下划线

      text-decoration:none

三、去除列表标签默认的数字和小点

      list-style:none

<style>
a:link {
        color: black;
      }
      a:hover {
        color: #ff0000;
        font-style: italic;
      }
      
      .linkBox:active {
        color: green;
        font-weight: bold;
      }
      /* .linkBox:visited {
        color: brown;
      } */
      </style>
      <body>
      <a href="https://www.baidu.com" class="linkBox">百度一下</a>
      </body>

标签的显示模式

元素===标签

一、块状元素 hn/p/hr/div/ul/ol/dl/li/table/thead/tbody/tr/form/header/section/footer/nav/aside/article

      特点：1、有默认的宽高，宽度是父元素的100%，高度是内容撑起来的（table系列除外）
            2、独占一行
            3、可以包含任意的元素（table系列除外，hn不能包含hn，p不能包含块状元素）
            4、可以设置宽高

二、行内元素 span/a/b/strong/i/em/u/ins/s/del

      特点：1、有默认的宽高，宽高都是内容撑起来的
            2、相邻的行内元素在同一行上显示
            3、只能包含行内元素和文本内容
            4、不可以设置宽高

三、行内块元素 img/audio/video/input/label/textarea/select/option/button

      特点：1、有默认的宽高
            2、相邻的行内元素或者行内块元素在同一行上显示
            3、一般不包含其他元素
            4、可以设置宽高

元素之间的转换

转换成块状元素

    display: block;

转换成行内块元素

    display: inline-block;

转换成行内元素

    display: inline;

背景属性

1、背景色

    /* background-color: pink; */
    /* background-color: #123456; */
    /* background-color: rgb(255, 255, 0); *

2、透明度

    /* 0-1 0完全透明  1完全不透明 0.5半透明 */
    /* background-color: rgba(0, 0, 255, 0.5); */
    background-color: brown;
    opacity: 0.5;
  }
  .sec {
    width: 800px;
    height: 600px;
    background-color: aqua;

3、背景图 */

    background-image: url(../day01/images/9.jpg);

4、背景图平铺 */

    /* 默认是平铺重复的 */
    background-repeat: no-repeat;

5、背景图尺寸:宽高

        a、像素  b、百分比
    */
    /* background-size: 800px 600px; */
    /* background-size: 100% 100%; */

6、背景图位置 : 水平方向垂直方向

        a、方位名词 b、像素  c、百分比
    */
    /* background-position: right top; */
    /* background-position: left bottom; */
    /* background-position: center; */
    /* background-position: 600px 0; */
    /* background-position: 86% 0%; */
    /* background-position-x: 500px; */
    /* background-position-x: 100%; */
    background-position-y: 100%;
  }

背景图background-image、图片img的区别是什么？

    1、图片是结构，背景图是样式
    2、图片是占位置的，背景图是不占位置的

迷失555

关注

18
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
H5C3-day04

head > < style > /* 通配符选择器*/ * {} */ /*交集选择器*/ aside.list {} /*并集选择器*/ p,.content,#navBox,footer {#navBox {footer {} */ /* 子代选择器*/ ul#ulList > li {} /* 后代选择器*/ ul li {a {font-family : '黑体';
复制链接

扫一扫