CSS 基础知识点

1. css 是什么

  • css: cascade style sheet(层叠样式表)
  • css 是编程语言吗? 不是
  • 核心:层叠, 盒模型, 单位(px/em/rem/vh/vw/fr),定位,浮动...

2. 声明、声明块、选择器、规则集

  • 声明:声明是有一个属性和一个值组成;
color: yellow;
  • 声明块:用一个{}将多个声明包裹起来;
{
    color:red;
    font-weight:normol;
}
  • 选择器:写在声明块前面的一个标识符,用来选择页面中一个或多个元素;
/* 标签选择器selector */
h1{
    color:red;
    font-size:10px;
}

/* id选择器 */
/* #id{} */
#page-title{
    color:green;
}

/* class类选择器 */
/* .class{} */
.title{
    color:blue;
}
  • 规则集(规则):选择器和声明块组成
/* 选择器+声明块 */
.class{
    color:blue;
    font-weight:20px;
}

  • 选择器的优先级
    tag<class<id<style属性<!important

这里的 style 是行内元素的属性!

<p style="color:blue;">这是一个行内元素的设置</p>

important 是最高级的,直接把当前类提升到最高级别。在实际使用过程中尽量不要去使用他,除非特别情况!

  • 例如:
/* #设置类title优先级为最高级。
    页面之中优先显示 而id的css属性将会被覆盖*/
.title{
    color:red !important;
}

#page-title{
    color:blue;
}

3. 层叠

  1. 层叠的意义

    当一个元素可以被多种选择器匹配时, 层叠可以解决样式设置上的冲突

  2. 层叠解决样式冲突的三种方案

  • 样式表的来源
  • 选择器的优先级
  • 源码的顺序

    源码的顺序越是在后面优先级越是大于前面的,

.title{
    color:blue;
}
#page-title{
    color:green;
}
/* 根据源码的顺序,#page-title是在后面的,所以要优先于类title */

4. style 样式引入的方式

  1. 行内引入
  • 在标签内添加 style 属性。
<p style="color:blue;">这是一个行内元素的设置</p>
  1. 当前页面引入。
  • 通过 style 标签来实现
<style>
  .title {
    color: red !important;
  }

  #page-title {
    color: blue;
  }
</style>
  1. 引入外部资源(公共样式表)
  • 通过 link 标签引入
<link rel="stylesheet" href="style1.css" />

常见外部样式表:common.css,jQuery.css, layui.css,<link>引入

  • 通过特殊规则引入,搭配 style 标签
<style>
  /* url内的引号可加可不加 */
  @import url("style样式表的位置");
</style>

选择器的优先级

tag < class < id

5. 用户代理样式

  • 用户代理: 就是浏览器,代理的是用户的 http 请求,请求一个网络资源 URL
  • 浏览器默认样式

    6. 选择器的优先级方案

案例 id class tag 标识
html body header h1 0 0 4 0, 0, 4
body header h1.page-title 0 1 3 0, 1, 3
.header-page .page-title 0 2 0 0, 2, 0
#page-title 1 0 0 1, 0, 0

标识:标识是由(id,class,tag)的个数组成。

  • (0,0,4)
/* (0 , 0, 4) */
      html body header h1 {
        color: aqua;
      }

效果展示:

  • (0,1,3)
 /* (0 , 0, 4) */
      html body header h1 {
        color: aqua;
      }
      /* (0,1,3) */
      body header h1.page-title {
        color: rgb(15, 252, 86);
      }

为什么不显示(0,0,4)的而显示(0,1,3)的?因为(0,1,3)内含有一个 class,而(0,0,4)之中没有,所以(0,0,4)的优先级小于(0,1,3),所以选择器优先选择优先级高的(0,1,3),所以显示(0,1,3)
效果展示:

  • (0,2,0)
/* (0 , 0, 4) */
      html body header h1 {
        color: aqua;
      }
      /* (0,1,3) */
      body header h1.page-title {
        color: rgb(15, 252, 86);
      }
      /* (0,2,0) */
      .header-title .page-title {
        color: darkorchid;
      }

最后只显示(0,2,0)的,因为(0,2,0)优先级最大!
效果展示:

  • (1,0,0)
/* (0 , 0, 4) */
      html body header h1 {
        color: aqua;
      }
      /* (0,1,3) */
      body header h1.page-title {
        color: rgb(15, 252, 86);
      }
      /* (0,2,0) */
      .header-title .page-title {
        color: darkorchid;
      }
      /* (1,0,0)id属性最高,优先级高,所以显示 */
      #page-title {
        color: coral;
      }

最后效果:

7. 注意

  • 尽可能不要用!important

  • 尽可能不要用id

  • 为什么要少用或不用 id?

    • 原因是级别太高, 丧失了灵活性
  • 为什么尽可能不用 tag?

    • 因为 css 的本质是为了"样式复用"
  • 尽可能在可用的情况下,使用 class 来完成

8. 继承

  • 有的属性可以被继承,如颜色,字体等文本, 有的则不行, 如盒模型、表格
  • 二个关键字
    • inherit: 继承
    • initail: 初值
最后修改:2020 年 10 月 30 日 03 : 47 PM
如果觉得我的文章对你有用,请随意赞赏