CSS总结篇（一）_vscode 多标签左右进度-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_72975897/article/details/126413022

本文详细介绍了CSS的基础知识，包括样式表的三种类型：内联样式、内部样式表和外部样式表，以及它们各自的优缺点。强调了样式表在网页设计中的作用，通过选择器来定位和设置网页元素的样式，如元素选择器、ID选择器、类选择器、通配选择器、伪类和伪元素。此外，还涵盖了选择器的权重、继承和优先级规则，帮助读者深入理解CSS在网页布局和美化中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css介绍

网页分成三个部分结构 20个左右标签，先用一段时间表现外在显示的样子行为 css -层叠样式表 -网页实际上是一个多层的结构，通过css可以分别为网页的每一层来设置样式而最终我们能看到的只有最上边的一层 -设置网页中元素的样式

css书写位置

 使用css来修改元素的样式
       第二种方式：内部样式表
            ——将CSS样式编写到head中的style标签里,通过CSS选择器选中指定元素
                然后可以同时为这些元素一起设置样式，这样可以使样式进一步的复用
            ——好处
                1:将样式表编写到style标签中，也可以使表现和结构进一步分离，方便寻找并维护
                2:同时为多个标签设置样式，并修改时只需要修改一处即可全部应用
                3:方便对样式进行复用
                4:将样式编写到外部的css文件中，可以使用到浏览器的缓存机制，
                     加快网页的加载速度，提高用户体验
            ——问题：
               1:只对一个页面起作业，它里边的样式不能跨页面进行复用
        -->

    <!-- 第三种方式：外部样式表
              ——讲css样式编写到一个外部的文件中
                 然后讲外部文件引入到css文件中，link标签引入
              ——好处  
                    其他的网页可以对其进行引用，复用度进一步提高
              ——最佳推荐


    <link rel="stylesheet" href="./02.css外联样式.css" />
  </head>
  <body>
    <!-- 需求：字体变红，放大 -->
    <!-- <p >离离原上草，一岁一枯荣</p> -->
    <!-- 使用css来修改元素的样式
         第一种方式：内联样式/行内样式
           ——在标签内部通过style属性来设置元素的样式  样式名：样式值；可以有多个 
           ——问题：结构与样式耦合
               使用内联样式，样式只能对一个标签生效，如果希望影响其他，也得在其他标签中设置
               当样式发生变化，我们必须要一个一个修改，非常不方便
           ——开发时，不推荐使用内联样式
           -->
    <p style="color: red; font-size: 22px">野火烧不尽，春风吹又生</p>
    <p>野火烧不尽，春风吹又生</p>
    <p>野火烧不尽，春风吹又生</p>
    <p>野火烧不尽，春风吹又生</p>
  </body>

css语法

CSS的注释，作用和HTML注释类似，只不过它必须编写在style标签中，或者是css文件中 CSS的语法：选择器声明块选择器：

            - 通过选择器可以选中页面中指定的元素，
                例如：p 就是选中页面中所有的p元素              
        声明块：
            ——声明块紧跟在选择器的后边，使用一对{}括起来，
            ——通过声明块来指定要为元素设置的样式
            ——声明块中实际上就是一组一组的名值对结构，
                  一组一组的名值对我们称为声明，
                  声明的样式名和样式值之间使用:来连接，
                  在一个声明块中可以写多个声明，多个声明之间使用;隔开，
                  最后一个可以省略，但一般都写上

 p {
        color: green;
        font-size: 50px;
      }

选择器

常用选择器

<style>
      /* 需求一：标题变红色 */
      h1 {
        color: red;
      }
      /* 1:元素选择器
               作用：根据标签名来选中指定的元素
               语法：标签名{}
               例子：p{},h1{},h3{}
         */
      /* 需求二：将第一句诗变绿色 */
      #p1 {
        color: green;
      }
      /* 2:id选择器
                作用：根据元素的id属性值选中一个元素
                语法：#id属性值{}
                例子：#p1{} 
      */
      /* 需求二：将第二句诗也变绿色 */
      .p2 {
        color: green;
      }
      .a2 {
        font-size: 22px;
      }
      /* 
      3:
      class选择器
            作用：根据元素的class属性值为元素分组，它和id类似，不同的是可以重复使用
            语法：.class属性值{}
            例子：.p2{} 
      */
      /* 需求三：给所有的标签字体变为24px */
      * {
        font-size: 24px;
      }
      /*  4:通配选择器
              作用：选中页面中的所有元素
              语法：*{}  
              */
    </style>
  </head>
  <body>
    <div id="">
      <h1>登高</h1>
      <h3>杜甫</h3>
      <p id="p1">风急天高猿啸哀，渚清沙白鸟飞回。</p>
      <p class="p2 a2">无边落木萧萧下，不尽长江滚滚来。</p>
      <p>万里悲秋常作客，百年多病独登台。</p>
      <p>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</p>
      <h1>登高</h1>
      <h3>杜甫</h3>
      <p id="p1">风急天高猿啸哀，渚清沙白鸟飞回。</p>
      <p class="p2 a2">无边落木萧萧下，不尽长江滚滚来。</p>
      <p>万里悲秋常作客，百年多病独登台。</p>
      <p>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</p>
      <h1>登高</h1>
    </div>
    <h3>杜甫</h3>
    <p id="p1">风急天高猿啸哀，渚清沙白鸟飞回。</p>
    <p class="p2 a2">无边落木萧萧下，不尽长江滚滚来。</p>
    <p>万里悲秋常作客，百年多病独登台。</p>
    <p>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</p>
  </body>

复合选择器

 <style>
      /* 需求一：将class为red的诗句变为红色，同时将class为red的div字体变为24px */
      .red {
        color: red;
        /* background-color: violet; */
      }
      div.red {
        font-size: 24px;
      }
      /*  1:交集选择器
                作用：选中同时符合多个条件的元素
                语法：选择器1选择器2选择器n{}
                注意：若交集选择器中有元素选择器，必须使用元素选择器开头*/
      /* 需求二：将h1,h3字体颜色变为黄色 */
      h1,
      h3 {
        color: yellowgreen;
      }
      /* 2:并集选择器（分组选择器）
                作用：同时选择多个选择器对应的元素
                语法：选择器1，选择器2，选择器3····{}
                例子：#b1,p,.red */
    </style>
  </head>
  <body>
    <h1>满江红·写怀</h1>
    <h3>岳飞·宋</h3>
    <p class="red">怒发冲冠，凭栏处、潇潇雨歇。</p>
    <div class="red">抬望眼，仰天长啸，壮怀激烈。</div>
    <div>nihao</div>
    <br />
    <span>三十功名尘与土，八千里路云和月。</span>
    <p>莫等闲，白了少年头，空悲切！</p>
    <p>靖康耻，犹未雪。臣子恨，何时灭！</p>
    <p>驾长车，踏破贺兰山缺。</p>
    <p>壮志饥餐胡虏肉，笑谈渴饮匈奴血。</p>
    <p>待从头、收拾旧山河，朝天阙。</p>
  </body>

关系选择器

<style>
      /* 需求一：为div的子元素span设置一个字体颜色红色 */
      div > span {
        color: red;
      }
      /* 1:子元素选择器 
            作用：选中指定父元素的指定子元素
            语法：父元素>子元素{}
      */
      /* 需求二：div里的span元素字体都变为30px */
      div .rou {
        font-size: 30px;
      }
      /* 2: 后代元素选择器：
              作用：选中指定元素内的指定后代元素
              语法：祖先 后代 
         */
      div > p > span {
        color: violet;
      }
      /* 需求三： 选择零食区，字体颜色变为blue*/
      p + span {
        color: blue;
      }
      /* 3:选择下一个兄弟(仅挨着我的)
            语法：前一个+下一个{}
            例子：p+span 
      */

      /* 4:选择下面所有的兄弟(前面的不选)
             语法：兄～弟{}
             例子：p～span */
      p ~ span {
        background-color: tomato;
      }
    </style>
  </head>
  <body>
    <div id="c1">
      我是超市<br />
      <span>我是零食区</span>
      <p>
        我是生鲜区
        <span class="rou" id="">肉类</span>
      </p>
      <span>我是鞋包区</span><br />
      <span>我是洗护区</span>
    </div>
    <br />
    <span>我是超市外的小卖部</span>
    <!-- 元素之间的关系
            父元素：直接包含子元素的元素
            子元素：直接被父元素包含的元素
            祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
            后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
            兄弟元素：拥有相同父元素的元素叫做兄弟元素
    -->
  </body>

属性选择器

<style>
     /* 需求一：有title属性的p标签，颜色变为红色 */
     /* p[title]{color: tomato;} */
     /* 1:属性选择器
            语法：[属性名]{} 选择含有指定属性的元素
                 [属性名=属性值]{} 选择含有指定属性和属性值的元素
                 [属性名^=属性值]{} 选择属性值以指定值开头的元素  
                 [属性名$=属性值]{} 选择属性值以指定值结尾的元素
                 [属性名*=属性值]{} 选择属性值含有某值的元素
    */
    /* [title=abc]{font-size: 30px;} */
    /* [title^=ab]{color: blue;} */
    /* [title$=ab]{color: turquoise;} */
    [title*=c]{color: skyblue;}
    </style>
</head>
<body>
    <h1 title="a" >满江红·写怀</h1>
    <h3 title="ab">岳飞·宋</h3>
    <p>····</p>
    <p title="abc">靖康耻，犹未雪。臣子恨，何时灭！</p>
    <p title="abcdab">驾长车，踏破贺兰山缺。</p>
    <p>壮志饥餐胡虏肉，笑谈渴饮匈奴血。</p>
    <p>待从头、收拾旧山河，朝天阙。</p>
</body>

伪类选择器

<style>
      /*去掉项目符号*/
      ul {
        list-style: none;
      }
      body{
        font-size: 20px;
      }
      /* 需求一：将ul里的第一个li自动一直设置为红色 */
      /* 一 、伪类（不存在的类，特殊的类）
          -伪类用来描述一个元素的特殊状态
          -比如：第一个元素，被点击的元素，鼠标移入的元素···
          -特点：一般请情况下，使用：开头
             1、 :first-child  第一个子元素
             2、 :last-child   最后一个子元素
             3、 :nth-child()  选中第n个子元素
                   特殊值： n    所有的
                          2n或even  选中偶数
                          2n+1或odd  选中奇数
          —以上这些伪类都是根据所有的子元素进行排序
             1、:first-of-type
             2、:last-of-type
             3、:nth-of-type() 
                  功能跟上面相似，
              不同的是，这是在同类型的子元素中去选择
                          
               */
      /* 二、:not() 否定伪类
           -将符合条件的元素从选择器中去除  */
           
      /* ul>span:first-child{color:red} */
      /* ul>li:last-child{color:blue} */

      /* ul>li:not(:nth-child(3)){color: green;} */
      /* ul>li:not(:nth-of-type(3)){color: green;} */
      /* li:nth-child(1) {
        color: pink;
      } */
      /* li:nth-of-type(1){
        background-color: red;
      } */
      /* li:not(:first-of-type){
        font-size: 50px;
      } */
      /* 需求：ul里面所有的文字，除了‘望长城内外····’ ，字体都变红*/
  /*    ul{
       color: red;
     }
     .l1{
       color: black;
     } */
     ul>span,ul>p,ul>li:not(.l1){
       color: red;
     } 
    </style>
  </head>
  <body>
    <h1>沁园春·雪</h1>
    <h3>毛泽东</h3>
    <ul>
      <span>测试</span>
      <p>北国风光，千里冰封，万里雪飘。</p>
      <li  class="l1">望长城内外，惟余莽莽；大河上下，顿失滔滔。</li>
      <li>山舞银蛇，原驰蜡象，欲与天公试比高。</li>
      <li>须晴日，看红装素裹，分外妖娆。</li>
      <li>江山如此多娇，引无数英雄竞折腰。</li>
      <li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li>
      <li>一代天骄，成吉思汗，只识弯弓射大雕。</li>
    </ul>

  </body>

a元素的伪类

 <style>
      /* 需求一：给未访问过的超链接加红色字体 */
      a:link {
        color: red;
      }
      /*1、 :link  用来表示未访问过的链接（正常链接） */
      /* 需求二：给访问过的超链接加绿色字体 
      */
      a:visited {
        color: rgb(255, 255, 255);
        font-size: 30px;
      }
      /*2、 :visited 用来表示访问过的链接
               由于隐私的原因，所以visited只能改颜色 */
      /* 需求三：鼠标移入，链接字体变大到30px */
      a:hover {
        font-size: 30px;
      }
      /* 3、:hover 用来表示鼠标移入的状态 */

      /* 需求四：鼠标点击后，增加背景色pink */
      a:active {
        background-color: pink;
      }
      /* 4、:active  鼠标点击后的状态 */

      /* 总结：link和visited是a标签独有的状态，
                hover和active是所有的元素都可以设置的

                正确排序：L-V-H-A    love hate原则
                       l（link）ov（visited）e h（hover）a（active）te
       */
      p:hover {
        color: red;
      }
    </style>
  </head>
  <body>
    <a href="https://www.baidu.com">百度(访问过的)</a>
    <a href="https://www.jquery123.com/">jQuery</a>
    <a href="https://qq.com">QQ（未访问过的）</a>
    <a href="#">测试</a>
    <p>逝关娇</p>
  </body>

伪元素选择器

 <style>
      /* lorem  生成随机英文段落
        下载Chinese Lorem插件，jw 生成随机中文段落 */

      /* 需求一：让文章的首字母一直为字体为24px */
      p::first-letter {
        font-size: 24px;
      }
      /* 需求二：让文章的第一行添加背景色黄色 */
      /* 需求三：让选中的内容，字体为红色 */
      /* 需求四：在元素开始的位置前+'abc' */

      /* 伪元素，表示页面中一些特殊的并不真实存在的元素（元素的位置）
          ::first-letter  表示第一个字母
          ::first-line  表示第一行
          ::selection  选中的内容
          ::before  元素的开始位置
          ::after   元素的结束位置
               before和after必须要结合content使用 */
      p::before {
        content: "匚";
        color: red;
      }
      p::after {
        content: "你好";
        color: red;
      }
    </style>
  </head>
  <body>
    <q>hello</q>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro fugiat maiores sit ex expedita beatae, sint quisquam amet quod cupiditate, tempora omnis impedit deleniti, iure fuga illo
      quibusdam. Alias, soluta?
    </p>
  </body>

继承

<style>
      /* 共同的祖先元素，设置统一的字体大小 */
      body {
        font-size: 34px;
      }
      /* 样式的继承（继承祖先的资产）
            定义：为一个元素设置的样式，同时也会应用到它的后代元素上
            优势：方便我们开发，讲一些通用的样式统一设置到共同的祖先元素上，子元素的样式都可以获取到样式
            注意：并不是所有的样式都会被继承，比如：背景相关的，布局相关等不会被继承
            */
      p {
        color: red;
        background-color: cadetblue;
        font-size: 20px;
      }
      /* span 的背景色是透明的，你给p设置了背景色，给p设置，透出来，就是这个色了
            背景图片等，也都不会被继承 */
    </style>
  </head>
  <body>
    <p>
      我是一个p元素
      <span
        >我是p元素的span元素
        <em>我是span里面的em元素，我也可以继承</em>
      </span>
    </p>
    <span>我是p元素外的span元素，我不会继承</span>
  </body>

选择器的权重

<!-- 样式冲突 通过不同的选择器选中同一个元素，进行一样的样式设定
         发生样式冲突时，应用哪一个样式由选择器的权重（优先级）决定-->
    <style>
      /* 选择器的权重      
           内联样式                                1000  
           id选择器                                100
           类和伪类选择器                            10
           元素选择器                                1
           通配符、子选择器、相邻选择器等。如*、>、+     0000
           继承的样式      没有优先级
           !important    最高优先级
        注意：
            比较优先级时，需要将所有选择器的优先级进行相加计算，最后优先级越高，则优先显示
            (并集选择器)分组选择器是单独计算的
            如果优先级计算后相同，此时则优先使用靠下的样式
            选择器的累加，不会超过上一级数量级，例如：类选择器再高也不会超过id选择器  量变达不到质变 
          
            一般来说：
            选择器越具体，优先级越高
            
            !important  慎用   */

      div,#box1 {
        color: pink;
      }

      /* .red {
        background-color: yellow !important;
      } */
      /* 设置了字体大小，span会继承，但如果通配选择器设置了，就听通配选择器的 */
      #box1 {
        color: blue;
        font-size: 30px;
      }
      /* 标签选择器+id选择器 */
      #box1 {
        color: red;
        font-size: 30px;
      }

      /* 单独计算 */
      /*   div,span {
        color: slateblue;
      } */

      /* 没有优先级，谁都能改 */
      /* * {
        font-size: 50px;
      } */
      span{
        color: royalblue !important;
      }
    </style>
  </head>
  <body>
    <!-- 
         class="red" -->
    <div id="box1" class="red" >
      我是div元素
      <span class="s1 red" style="color: salmon">我是div中的span元素</span>
      <em class="e1" >我是div中的em元素</em>
    </div>
  </body>