CSS基础必备知识点02

最新推荐文章于 2023-11-10 17:34:25 发布
最新推荐文章于 2023-11-10 17:34:25 发布
阅读量231 收藏 1
点赞数 1
分类专栏： 前端初级H5+C3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38148024/article/details/102236337
版权

1、继承性

特点：
- 外层元素身上的样式会被内层元素所继承；
- 当内层元素与外层元素身上的样式相同时，外层元素的样式会被内层元素的样式覆盖。
- 并不是所有的样式属性都能够被继承，只有文本与字体样式属性能够被继承，其他的样式属性都不能。
- 注意：在实际工作中，往往会给body标签设置字体大小以及字体颜色。因为body标签是最外层的元素，内层的元素会继承外层元素的样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>继承性</title>
  <style type="text/css">
      body{
          color:#f00;
      }
      div{
          color: #00f;
          /*给div标签设置一个边框，div标签相对于h2和p标签来说，他是一个外层元素
          现在给外层元素设置一个边框的样式，这个边框会不会被继承？
          如果会，那么h2和p标签都会有一个边框,如果不会，则只有div有一个边框。
          */
          border: 1px solid #ccc;
      }
  </style>
</head>
<body>
  <!--div>h2+p : 表示div是父元素，h2与p都是其子元素，h2与p标签紧挨着，并且p标签在h2标签的下面-->
  <div>
      <h2>故事是从一个叫做张小凡的普通少年开始的</h2>
      <p>故事是从一个叫做张小凡的普通少年开始的故事是从一个叫做张小凡的普通少年开始的故事是从一个叫做张小凡的普通少年开始的故事是从一个叫做张小凡的普通少年开始的
          故事是从一个叫做张小凡的普通少年开始的故事是从一个叫做张小凡的普通少年开始的故事是从一个叫做张小凡的普通少年开始的
          故事是从一个叫做张小凡的普通少年开始的故事是从一个叫做张小凡的普通少年开始的故事是从一个叫做张小凡的普通少年开始的
      </p>
  </div>
</body>
</html>

2、优先级

类型优先级值
标签选择器1
类选择器10
ID选择器100
行内样式1000

优先级数值越大表示其优先级越高。一般而言，选择器的指向越准确，优先级就会越高。 不管是单个选择器还是多个选择器组合，它们之间的优先级都可以通过上面这个公式来进行计算。我们将其值称之为权重值，权重值越大就表示其优先级越高。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>优先级</title>
    <style type="text/css">
        /*标签选择器、类选择器、id选择器、行内样式 优先级由低到高*/
        div{
            color:#f00;
        }

        .d{
            color: rgba(63, 238, 28, 0.667);
        }

        #dd{
            color: #00f;
        }

        div h2{  /*1+1=2 */
            color: #ccc;
        }
        .d h2{   /*10+1=11 */
            color:#000;
        }
        #dd h2{  /*100+1=101 */
            color: rgb(184, 48, 105);
        }

    </style>
</head>
<body>
    <div class="d" id="dd" style="color: skyblue;">
        <h2>故事是从一个叫做张小凡的普通少年开始的</h2>
        <p>故事是从一个叫做张小凡的普通少年开始的故事是从一个叫做张小凡的普通少年开始的故事是从一个叫做张小凡的普通少年开始的故事是从一个叫做张小凡的普通少年开始的
            故事是从一个叫做张小凡的普通少年开始的故事是从一个叫做张小凡的普通少年开始的故事是从一个叫做张小凡的普通少年开始的
            故事是从一个叫做张小凡的普通少年开始的故事是从一个叫做张小凡的普通少年开始的故事是从一个叫做张小凡的普通少年开始的
        </p>
    </div>
</body>
</html>

3、!important 属性

  • !important在CSS 中的作用：主要是用来提升属性的权重。其属性的权重值无穷大。
  • 语法格式：属性：值 !important;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>!import 属性</title>
    <style type="text/css">
        p{ /*加了!import属性，它的权重值会变成无穷大。*/
            color:#f00 !important;
        }
        .d1{
            color: #0f0;
        }
        #p2{
            color: #00f;
        }
    </style>
</head>
<body>
    <p class="d1" id="p2">黑马程序员</p>
</body>
</html>
  • 使用!important属性，一定要注意以下几点：
    • !important是提升的属性的权重，而不是提升选择器的权重；
      <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>!import 属性</title>
   <style type="text/css">
   /*如果!import 提升的是选择器的权重，字体大小应该会是20px，
   但是此处它是提升的color属性的优先级权重，因此字体显示的是100px。*/

       p{ /*加了!import属性，它的权重值会变成无穷大。*/
           color:#f00 !important;
           font-size: 20px;
       }
       .d1{
           color: #0f0;
       }
       #p2{
           color: #00f;
           font-size: 100px;
       }
   </style>
</head>
<body>
   <p class="d1" id="p2">黑马程序员</p>
</body>
</html>
    • !important 不能提升继承过来的权重
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>!important不能提升继承过来的属性优先级权重</title>
    <style type="text/css">
        div{
            color:#f00 !important;  /*不能提升该颜色属性的优先级*/
        }
        h2{
            color: #0f0;
        }
    </style>
</head>
<body>
    <div>
        <h2>黑马程序员</h2>  <!--最终还是显示绿色-->
    </div>
    
</body>
</html>

4、一个标签内可以携带多个类名

  • 类名：class的属性值
  • 一个标签内可以携带多个类名，指的是class的属性值可以有多个，每一个属性值之间使用空格分隔。
    举例： <标签名 class=“值1 值2 值3”></标签名>
  • 多个类名的优点：
    • 减少css的代码量
    • 多个类名的样式会叠加到当前元素上
    <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>一个标签内可以携带多个类名</title>
      <style type="text/css">
          /*给class=div1的元素内容设置为加粗效果
          给class=div2的元素内容字体设置为红色
          给class=div3的元素内容设置为加粗并且颜色为红色
          */
          .div1{
              font-weight: bold;
          }
          .div2{
              color: #f00;
          }
          /*.div3{
              font-weight: bold;
              color: #f00;
          }*/
          
      </style>

  </head>
  <body>
      <!--div.div${黑马程序员$}*3表示的是  
          div盒子 
          .div 表示类，类名为div 
          ${...$} 表示div框架，其中的...位置显示的是div中的内容
          *3 表示形成3个 div 并自动编号
      -->
      <div class="div1">黑马程序员1</div>
      <div class="div2">黑马程序员2</div>
      <!--<div class="div3">黑马程序员3</div>-->
      <div class="div1 div2">黑马程序员3</div>
  </body>
  </html>
    • 注意：如果说一个标签内的多个类名，它们设置的样式是一样的话，就会存在样式的冲突。
    <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>样式冲突</title>
      <style type="text/css">
          .c1{
              color: #f00;
          }
          .c2{
              color: #f0f;
          }
      </style>
  </head>
  <body>
      <p class="c1 c2">文本</p>
  </body>
  </html>
    以上代码说明：如果一个标签内的多个类名上面设置的样式一样的话，就会出现样式冲突，那么将会以css代码中写在最下面的那个为标准，和HTML中的class属性值的顺序没有关系。

5、背景样式属性（非常重要）

属性值含义
background-color#ff0000、red、rgb(255,0,0)背景颜色
background-imageurl(图像路径和名称)背景图像
background-repeatrepeat、repeat-x、repeat-y、no-repeat背景图像是否重复
background-positioncenter center或x% y%或xpos ypos背景图像起始位置
background-attachmentscroll(滚动)、fixed(固定)设置背景图像是否固定或者随着页面的其余部分滚动
backgroundurl(1.jpg) no-repeat center center设置背景的简写属性
  • 使用background-color设置背景颜色的前提是要么这个元素是有内容的，要么设置了一定的高度和宽度。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景颜色</title>
    <style type="text/css">
        .b{
            height: 100px;
            width: 100px;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <div class="b"></div>
</body>
</html>
  • 使用background-img设置背景图像时，同样要具备前提条件：要么这个元素是有内容的，要么设置了一定的高度和宽度。 背景图片默认是平铺的。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景图片</title>
    <style type="text/css">
        .b{
            width: 1000px;
            height: 1000px;
            background-image: url(./img/fengfeng.jpg);
        }
    </style>
</head>
<body>
    <div class="b"></div>
</body>
</html>
  • background-repeat 设置背景图片是否平铺,同样是要满足以上前提：要么这个元素是有内容的，要么设置了一定的高度和宽度。 背景图片默认是平铺的。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景图片平铺效果设置</title>
    <style type="text/css">
         .b{
            width: 1000px;
            height: 1000px;
            border: 1px solid #f00;
            background-image: url(./img/fengfeng.jpg);
            background-repeat: repeat-x;
         }
    </style>
</head>
<body>
    <div class="b"></div>
</body>
</html>
  • background-position: 水平位置 垂直位置
    • 有三种表示方式： 英文单词、固定值、百分比, 这三种方式可以混合使用，可以同时使用英文单词或者是固定值或者百分比。
      • 英文单词表示方式：
        • 水平位置：left、center、right
        • 垂直位置：top、center、bottom
        <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>背景图片的位置</title>
     <style type="text/css">
         .box{
             width: 1000px;
             height: 1000px;
             border: 1px solid #000;
             margin-left: auto;
             margin-right: auto;
             background-image: url(./img/fengfeng.jpg);
             background-repeat: no-repeat;
             background-position: center center; /*中心位置*/

         }
     </style>
 </head>
 <body>
     <div class="box"></div>
 </body>
 </html>
      • 固定值的表示方式
        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景图片的位置</title>
    <style type="text/css">
        .box{
            width: 1000px;
            height: 1000px;
            border: 1px solid #000;
            margin-left: auto;
            margin-right: auto;
            background-image: url(./img/fengfeng.jpg);
            background-repeat: no-repeat;
            background-position: 100px 100px;  /*距离左边和上边分别是100px的位置*/

        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
      • 百分比表示
        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景图片的位置</title>
    <style type="text/css">
        .box{
            width: 1000px;
            height: 1000px;
            border: 1px solid #000;
            margin-left: auto;
            margin-right: auto;
            background-image: url(./img/fengfeng.jpg);
            background-repeat: no-repeat;
            background-position: 100% 0%; /*右上角*/

        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
      • 混合使用
        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景图片的位置</title>
    <style type="text/css">
        .box{
            width: 1000px;
            height: 1000px;
            border: 1px solid #000;
            margin-left: auto;
            margin-right: auto;
            background-image: url(./img/fengfeng.jpg);
            background-repeat: no-repeat;
            background-position: 100% top;  /*右上角*/

        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
  • background-attachment
    <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>背景图片是否固定</title>
      <style type="text/css">
          .box{
              width: 1000px;
              height: 1000px;
              border: 1px solid #00f;
              margin-left: auto;
              margin-right: auto;
              background-image: url(./img/fengfeng.jpg);
              background-repeat: no-repeat;
              background-position: center center;
              background-attachment: scroll;
          }
          h2{
              text-align: center;
          }
          p{
              text-indent: 2em;
          }
      </style>
  </head>
  <body>
      <div class="box">
          <h2>心理罪</h2>
          <p>
          方木是绿藤市公认的犯罪心理学天才，在与警察邰伟联手破获一起离奇的校园连环杀人案中，经历了他一生难以弥合的创伤，因而颓废沉沦，甚至自欺欺人地选择将一切遗忘。然而魔鬼的挑衅却从未停止，又一起神秘的连环凶案让方木身陷囹圄。他不得不撕开自己永远不愿面对的伤疤，凝视自己内心的心理罪，与身份诡秘的魔鬼缠斗。
      方木是绿藤市公认的犯罪心理学天才，在与警察邰伟联手破获一起离奇的校园连环杀人案中，经历了他一生难以弥合的创伤，因而颓废沉沦，甚至自欺欺人地选择将一切遗忘。然而魔鬼的挑衅却从未停止，又一起神秘的连环凶案让方木身陷囹圄。他不得不撕开自己永远不愿面对的伤疤，凝视自己内心的心理罪，与身份诡秘的魔鬼缠斗。
      方木是绿藤市公认的犯罪心理学天才，在与警察邰伟联手破获一起离奇的校园连环杀人案中，经历了他一生难以弥合的创伤，因而颓废沉沦，甚至自欺欺人地选择将一切遗忘。然而魔鬼的挑衅却从未停止，又一起神秘的连环凶案让方木身陷囹圄。他不得不撕开自己永远不愿面对的伤疤，凝视自己内心的心理罪，与身份诡秘的魔鬼缠斗。
      方木是绿藤市公认的犯罪心理学天才，在与警察邰伟联手破获一起离奇的校园连环杀人案中，经历了他一生难以弥合的创伤，因而颓废沉沦，甚至自欺欺人地选择将一切遗忘。然而魔鬼的挑衅却从未停止，又一起神秘的连环凶案让方木身陷囹圄。他不得不撕开自己永远不愿面对的伤疤，凝视自己内心的心理罪，与身份诡秘的魔鬼缠斗。
      方木是绿藤市公认的犯罪心理学天才，在与警察邰伟联手破获一起离奇的校园连环杀人案中，经历了他一生难以弥合的创伤，因而颓废沉沦，甚至自欺欺人地选择将一切遗忘。然而魔鬼的挑衅却从未停止，又一起神秘的连环凶案让方木身陷囹圄。他不得不撕开自己永远不愿面对的伤疤，凝视自己内心的心理罪，与身份诡秘的魔鬼缠斗。
      方木是绿藤市公认的犯罪心理学天才，在与警察邰伟联手破获一起离奇的校园连环杀人案中，经历了他一生难以弥合的创伤，因而颓废沉沦，甚至自欺欺人地选择将一切遗忘。然而魔鬼的挑衅却从未停止，又一起神秘的连环凶案让方木身陷囹圄。他不得不撕开自己永远不愿面对的伤疤，凝视自己内心的心理罪，与身份诡秘的魔鬼缠斗。
      方木是绿藤市公认的犯罪心理学天才，在与警察邰伟联手破获一起离奇的校园连环杀人案中，经历了他一生难以弥合的创伤，因而颓废沉沦，甚至自欺欺人地选择将一切遗忘。然而魔鬼的挑衅却从未停止，又一起神秘的连环凶案让方木身陷囹圄。他不得不撕开自己永远不愿面对的伤疤，凝视自己内心的心理罪，与身份诡秘的魔鬼缠斗。
      方木是绿藤市公认的犯罪心理学天才，在与警察邰伟联手破获一起离奇的校园连环杀人案中，经历了他一生难以弥合的创伤，因而颓废沉沦，甚至自欺欺人地选择将一切遗忘。然而魔鬼的挑衅却从未停止，又一起神秘的连环凶案让方木身陷囹圄。他不得不撕开自己永远不愿面对的伤疤，凝视自己内心的心理罪，与身份诡秘的魔鬼缠斗。
      方木是绿藤市公认的犯罪心理学天才，在与警察邰伟联手破获一起离奇的校园连环杀人案中，经历了他一生难以弥合的创伤，因而颓废沉沦，甚至自欺欺人地选择将一切遗忘。然而魔鬼的挑衅却从未停止，又一起神秘的连环凶案让方木身陷囹圄。他不得不撕开自己永远不愿面对的伤疤，凝视自己内心的心理罪，与身份诡秘的魔鬼缠斗。
      方木是绿藤市公认的犯罪心理学天才，在与警察邰伟联手破获一起离奇的校园连环杀人案中，经历了他一生难以弥合的创伤，因而颓废沉沦，甚至自欺欺人地选择将一切遗忘。然而魔鬼的挑衅却从未停止，又一起神秘的连环凶案让方木身陷囹圄。他不得不撕开自己永远不愿面对的伤疤，凝视自己内心的心理罪，与身份诡秘的魔鬼缠斗。
      方木是绿藤市公认的犯罪心理学天才，在与警察邰伟联手破获一起离奇的校园连环杀人案中，经历了他一生难以弥合的创伤，因而颓废沉沦，甚至自欺欺人地选择将一切遗忘。然而魔鬼的挑衅却从未停止，又一起神秘的连环凶案让方木身陷囹圄。他不得不撕开自己永远不愿面对的伤疤，凝视自己内心的心理罪，与身份诡秘的魔鬼缠斗。
      方木是绿藤市公认的犯罪心理学天才，在与警察邰伟联手破获一起离奇的校园连环杀人案中，经历了他一生难以弥合的创伤，因而颓废沉沦，甚至自欺欺人地选择将一切遗忘。然而魔鬼的挑衅却从未停止，又一起神秘的连环凶案让方木身陷囹圄。他不得不撕开自己永远不愿面对的伤疤，凝视自己内心的心理罪，与身份诡秘的魔鬼缠斗。
      方木是绿藤市公认的犯罪心理学天才，在与警察邰伟联手破获一起离奇的校园连环杀人案中，经历了他一生难以弥合的创伤，因而颓废沉沦，甚至自欺欺人地选择将一切遗忘。然而魔鬼的挑衅却从未停止，又一起神秘的连环凶案让方木身陷囹圄。他不得不撕开自己永远不愿面对的伤疤，凝视自己内心的心理罪，与身份诡秘的魔鬼缠斗。
      方木是绿藤市公认的犯罪心理学天才，在与警察邰伟联手破获一起离奇的校园连环杀人案中，经历了他一生难以弥合的创伤，因而颓废沉沦，甚至自欺欺人地选择将一切遗忘。然而魔鬼的挑衅却从未停止，又一起神秘的连环凶案让方木身陷囹圄。他不得不撕开自己永远不愿面对的伤疤，凝视自己内心的心理罪，与身份诡秘的魔鬼缠斗。
      方木是绿藤市公认的犯罪心理学天才，在与警察邰伟联手破获一起离奇的校园连环杀人案中，经历了他一生难以弥合的创伤，因而颓废沉沦，甚至自欺欺人地选择将一切遗忘。然而魔鬼的挑衅却从未停止，又一起神秘的连环凶案让方木身陷囹圄。他不得不撕开自己永远不愿面对的伤疤，凝视自己内心的心理罪，与身份诡秘的魔鬼缠斗。
      方木是绿藤市公认的犯罪心理学天才，在与警察邰伟联手破获一起离奇的校园连环杀人案中，经历了他一生难以弥合的创伤，因而颓废沉沦，甚至自欺欺人地选择将一切遗忘。然而魔鬼的挑衅却从未停止，又一起神秘的连环凶案让方木身陷囹圄。他不得不撕开自己永远不愿面对的伤疤，凝视自己内心的心理罪，与身份诡秘的魔鬼缠斗。
      方木是绿藤市公认的犯罪心理学天才，在与警察邰伟联手破获一起离奇的校园连环杀人案中，经历了他一生难以弥合的创伤，因而颓废沉沦，甚至自欺欺人地选择将一切遗忘。然而魔鬼的挑衅却从未停止，又一起神秘的连环凶案让方木身陷囹圄。他不得不撕开自己永远不愿面对的伤疤，凝视自己内心的心理罪，与身份诡秘的魔鬼缠斗。
      </p>
      </div>
  </body>
  </html>
  • background ：简写属性，可以同时设置多个样式，比如 背景颜色，背景图片，背景图片是否平铺，水平位置 处置位置等， background简写属性的值个数不定，顺序也不定，每一个值之间使用空格分隔开。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简写属性</title>
    <style type="text/css">
        .box{
            width: 1000px;
            height: 1000px;
            border: 1px solid #00f;
            margin-left: auto;
            margin-right: auto;
           background: #ccc url(./img/fengfeng.jpg) no-repeat center center fixed;
        }
        
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

ewport" content=“width=device-width, initial-scale=1.0”>

简写属性

```
Milly_Liu
关注
专栏目录
css基础知识点
qq_40077167的博客
11-15 557
css常用属性1.css值2.字体3.图片 1.css值 长度: 绝对长度单位:cm(厘米),mm(毫米),Q(四分之一毫米),in(英寸),px(像素) 相对长度单位:em(父元素的字体大小),rem(根元素的字体大小),lh( 元素的line-height),vw(视窗宽度的1%),vh(视窗高度的1%),vmin(视窗较小尺寸的1%),vmax(视窗较大尺寸的1%) 百分比:相对于父元素...
CSS需要掌握哪些知识点
lhw19960418的博客
07-06 1258
1、CSS三种样式表 工作中外部样式表运用较多，原理一样，知识CSS代码书写位置不同 2、CSS代码具体规则 3、CSS选择器（重点） 3.1CSS选择器的作用 选择器就是为了选择特定的HTML元素（标签） 3.2、CSS基础选择器 总的来说，类选择器是我们工作中最常用的 尽量少用通用选择器 尽量少用ID选择器 不使用无具体定义的标签选择器 div span 4、CSS样式属性调试工具 4.1、font字体 4.2、CSS外观属性 ...
CSS基础必备知识点03
qq_38148024的博客
10-07 221
1、标准文档流 什么是标准文档流？ 制作HTML网页和PS画图软件画图有本质上的区别：HTML网页在制作的时候都遵循一个“流”的规则：从左到右、从上到下；使用PS软件画图时，我们想在哪里画就可以在哪里画 标准文档流需要注意的事项： 空白折叠现象 换行会造成空白，如何实现没有空白的现象： 需要让这些元素放在同一行，让他们紧密相连。 高矮不齐，底部对齐 2、浮动 需求： 能够实现...
CSS基础知识点
weixin_73616913的博客
08-25 978
实际上，有三种写 CSS 的方式此时的 style 标签可以放到任何位置，一般建议放到 head 标签里面此时不需要写选择器，直接写属性键值对，这个时候样式只是针对当前元素生效实际开发中，一般都是使用外部样式来写 CSS ，这样就可以让 html 和 CSS 分离开，相互不影响。
CSS基础知识（非常详细）
最新发布
m0_64245578的博客
11-10 1237
1.什么是CSS Cascading Style Sheet 层叠级联样式表 1.1CSS美化 字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动… 1.2CSS优势 内容和表现分离 网页结构表现统一，可以实现复用 样式十分的丰富 建议使用独立于html的css文件 利用SEO，容易被搜索引擎收录 1.3CSS发展史 CSS1.0 CSS2.0: DIV(块) + CSS，HTML与CSS结构分离的思想，网页变得简单，SEO CSS2.1:浮动、定位 CSS3.0:圆角、阴影、动画…浏览器兼容性
css布局——GFC
Abenazhan的博客
05-17 1210
 GFC又称为网格布局术语：【网格容器（Grid Container）】 最外层div设置为display：grid；最外层就是网格容器。【网格项（Grid Item）】内部子元素就是网格【网格线（Grid Line）】组成网格线的分界线。分为横网格线，列网格线。【网格轨道（Grid Track）】相邻的网格线组成的网格轨道，也就是行或列。【网格单元（Grid Cell）】相邻的行网格线和列网格线...
HTML、CSS基础知识(网页设计必备50页)
05-08
HTML 基础知识点 HTML（HyperText Markup Language）是一种标记语言，用于创建网页的结构和内容。HTML 由一系列的控制标记（Tag）组成，每个控制标记都有其特定的功能和用途。 1. HTML 基本结构 * <html>：根控制...
CSS面试必备知识点完整总结
本资源是CSS面试知识点的总结，非常适合即将参加面试的前端开发者学习和参考。它涵盖了面试中可能会遇到的各类问题，帮助求职者全方位掌握CSS知识，提高面试成功率。 CSS知识点通常包括以下方面： 1. 基础选择器：...
css大全，考试必备，web开发基础
09-14
### CSS基础知识点 1. **CSS概述**：了解CSS是为了解决HTML中对样式的描述不统一和重复性问题。通过W3C的推荐，CSS提供了一种统一的方式，使用专门的属性来设置样式，如字体颜色、背景色、文本对齐等。 2. **CSS的...
快速提升CSS编码能力的五个必备知识点
11-07
以下五个必备知识点将帮助你优化CSS编码实践： 1. **CSS定位（Positioning）** CSS定位是控制元素在页面上位置的关键。包括`static`、`relative`、`absolute`、`fixed`和`inherit`五种方式。其中，`static`是...
CSS的优先级问题
weixin_52044287的博客
03-09 85
当创建的样式变复杂后，标签的样式可能会受到影响，如何去判断样式呢
子绝父相
MR_JIABing的博客
11-09 207
绝对是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以浏览器文档为准移动位 置 不保留原来的位置，完全是脱标的。 因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。 子级是绝对定位，父级要用相对定位。 ...
CSS - 笔记
qq_39004843的博客
12-21 702
div 相对定位，弹性布局
CSS--基础知识
qq_56668869的博客
04-03 1073
css基础 web前端设计 HTML5
CSS基本知识点总结
qq_40046544的博客
07-29 9814
CSS指的是层叠样式表（CascadingStyleSheets）CSS描述了如何在屏幕、纸张或其他媒体上显示HTML元素CSS节省了大量工作。它可以同时控制多张网页布局。盒子的概念页面中的每一个标签都可以看做是一个盒子；通过盒子的视角，可以更方便的进行布局浏览器在渲染网页时会将网页中的元素看做是一个个的矩形区域，我们也形象称之为盒子盒子模型内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成。...
如何控制CSS使一个div位于最上层
热门推荐
cypbkd的专栏
10-30 1万+
Z-index属性决定了一个HTML元素的层叠级别。 元素层叠级别是相对于元素在Z轴上（与X轴Y轴相对照）的位置而言。 一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部。 这个层叠顺序沿着垂直的线轴被呈现。 显然，只能通过代码改变层级，这个属性就是z-index。 要让z-index起作用有个小小前提，就是元素的position属性要是relative，absolute或
最外层滚动条展示_CSS布局——可能是最安全的
weixin_39878745的博客
11-29 368
【为了让大家更好的学习web前端，我们做了一个问卷调查点击链接进入：https://www.wjx.cn/jq/33501036.aspx填写问卷后,24小时内会有老师电话联系前50名填写的同学，只有填完问卷调查的同学，才能受邀参加我们web前端大咖讲讲座的听课权限，对web前端有什么疑问都可以在课堂上提问。小班授课名额有限，每天限50名！(还有就是每天下午2点半晚上8点，web...
HTML基础与CSS样式表：考试必备知识点梳理
HTML是一种用于创建网页的标准标记语言，它是网页设计的基础，允许开发者定义页面的结构、内容和样式。在这份HTML考试题中，我们...掌握这些知识点对于Web开发人员来说至关重要，它们是构建交互式和可定制网页的基础。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值