1-1-10【CSS基础】CSS常用样式&选择器

题外话：越自律越自由？目前还没能理解这句话的精髓

---

文章内容输出来源：拉勾教育大前端就业集训营

1.文字属性——颜色

• 作用：color属性，给文字设置显示颜色。
• 英文单词表示颜色：

• rgb模式表示颜色：根据红、绿、蓝三种颜色的亮度，来表示任意颜色。

 
RGB表示颜色法

RGB表示颜色法

RGB表示颜色法

RGB表示颜色法

RGB表示颜色法

说明：每个数字范围是0-255，0表示亮度最低，255表示亮度最高。三种颜色配合可以表示255³种颜色。

• 十六进制表示法：
  • 16进制对应10进制的255是ff，所以对于十六进制来说两位数字，即可表示十进制0-255的所有数字。
  • 所以用#rrggbb的方式表示，rr表示红色亮度的2位数字，gg表示绿色亮度的2位数字，bb表示蓝色亮度的2位数字。

十六进制颜色表示法

十六进制颜色表示法

十六进制颜色表示法

十六进制颜色表示法

十六进制颜色表示法

拓展1：当红绿蓝中3种颜色十六进制的两位数字各自相同，则可以省略一位。例如黑色#000，白色#fff，灰蓝色#abc等以此类推。

拓展2：感兴趣的小伙伴可在该网址查看常用颜色。https://www.runoob.com/tags/html-colorname.html

2.文字属性——字体

• 作用：font-family属性，给文字设置显示的字体。
• 常用字体：宋体、微软雅黑、Arial、consolas。

• 拓展1：font-family可以设置多个字体，在实际加载中只会选择一种加载，如果不支持第一个字体，才会尝试用后面的字体加载。

说明：因为Arial不支持中文，所以当网页显示英文时，正常用Arial字体加载；当网页显示中文时，浏览器会找下一个字体“宋体”，支持中文，所以用宋体加载中文。

• 拓展2：浏览器中使用的字体都是用户电脑中自带的，不是浏览器自带的，如果用户电脑中没有相应的字体会使浏览器显示失败。因此最好在最后面设置一个所有机器都有的字体。
• 拓展3：因中文字体里大部分都支持英文，为了防止英文字体被影响，一般将英文字体写在中文字体前面。

3.文字属性——大小

• 作用：font-size属性，给文字设置在浏览器中显示的大小。
• 单位：
  • 相对长度单位：px像素，em倍数，%百分比；
  • 绝对长度单位：in英寸，cm厘米，mm毫米；

尽量使用相对长度单位，使用px就能满足日常大部分需求。

• 拓展1：若HTML中不设置字号，则将按照浏览器默认的字号进行显示。Chrome默认16px。
• 拓展2：不同浏览器有不同的最小加载字号，若设置字号低于最小字号，则按最小字号展示。chrome8px，IE1px。
• 实际应用：
  • 网页中最小设置字号必须是12px，低于12px将出现兼容问题，目前普遍最小14px。
  • 尽量使用12、14、16等偶数字号，ie6等老浏览器支持奇数存在bug。

4.盒子实体化3属性

• width属性：设置盒子的宽度。
• height属性：设置盒子的高度。
• background-color属性：设置盒子的背景颜色。

目前只是铺垫，了解即可。

5.CSS选择器

• 选择器：还记得选择器吗？我帮小伙伴们回忆一下：为了确定某些属性描述的是哪些标签，需要选择器来确定描述的对象。

说明：上述代码中，div就是一个最简单的选择器，如果去掉div，浏览器怎么可能知道这些属性是为哪个标签服务的。

• 选择器的分类：
  • 4个基础选择器：标签选择器、id选择器、类选择器、通配符选择器。
  • 3个高级选择器：后代选择器、交集选择器、并集选择器。

6.标签选择器

• 概述：通过标签名选择标签元素，选择器直接写标签名即可。
• 范围：该HTML文件范围内所有的同名标签。
• 注意：该方式会忽略嵌套关系，只要是同名标签，都会被选择器选中。

• 优点：可一次性选中所有的同名标签。
• 缺点：只能全选，不能对局部标签添加特殊样式。

7.id选择器

• 概述：通过标签的id属性值选择标签元素，选择器写法“#id属性值”。
• 范围：该HTML文件范围内对应id属性值的标签,因为id的属性值必须唯一，所以只能选中1个标签。

• 缺点：只能实现单选，不能多选。

基本不会用到，但是了解还是需要的。

8.类选择器

• 概述：通过标签的class属性值选择标签元素，选择器写法“.class属性值”。
• 范围：该HTML文件范围内，所有class属性值相同的标签。

你会发现，class与id不同，class代表某一类的标签，所以是可以重复的。

很奇怪嘛？class可以有多个属性值，以空格分隔开，每个属性值都是有效的。比如说你是一个人不耽误你是一个学生，不耽误你是谁的孩子。

• 优点：
  • 通过一个类选择器可实现多选，选中多个标签，添加公共样式。
  • 一个标签可被多个类选择器选中，可将所有的样式分离，分别提取公共样式和单独样式，节约代码量。

拓展：有一些公共的样式经常出现，比如说字体大小20px，你可以设置一个原子类，只要有标签是20px字体大小，直接将该标签的class属性赋值即可，非常方便。

9.通配符选择器

• 概述：通过一个特殊符号选择HTML文件内所有的标签元素，选择器写法“*”。
• 范围：该HTML文件范围内，所有的标签。

• 优点：可实现全选，简化书写。
• 缺点：通配符选择效率低，设置的样式不是所有标签都需要的，会让不需要的标签又加载了一次，降低浏览器效率。
• 应用场景：一般只有普通的demo才会用，大型项目不允许使用。

10.高级选择器

• 为什么要有高级选择器：由于基础选择器不能实现所有的情况，所以在基础选择器基础上衍生了几种高级选择器。高级选择器的组成部分是基础选择器。

11.后代选择器

• 概述：通过标签之间存在的嵌套关系，去选择元素，基本组成部分就是基础选择器。
• 语法：
  • 空格表示后代，基础选择器的中间使用空格分隔。空格前面的选择器选中的标签必须是后面选择器选中标签的祖先。
  • 只要满足选择器条件的标签，就会被选中。

拓展：不一定非要是父子关系，只要是祖先关系即可。所以上述选择器可以写成ul p {...}

后代选择器可以由多种不同的基础选择器组合而成，希望大家动手试试。

12.交集选择器

• 概述：按照满足所有的基础选择器的需求去选择标签。
• 语法：基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开头。
• 选择范围：满足所有基础选择器需求的标签，如果有一个条件不满足都不能被选中。

说明：该选择器的意思是“必须是p标签，且该p标签的类是p1”。共两个标签符合条件。

拓展：如图，交集选择器可以作为其他高级选择器的组成部分。

13.并集选择器

• 概述：满足并集选择其中任意一个选择器的标签就会被选中。
• 语法：将多个选择器中间用逗号分隔开。

说明：第一个选择器“h2标签”，第二个选择器“div标签子代中类值为box1的子代p标签”，第三个选择器“类名为p1的p标签”。

• 应用场景：
  • 如果多个标签具有公共样式，又不能用一个选择器选中，则使用并集选择器。
  • 可以使用并集选择器，替换通配符选择器。

14.CSS层叠式概念（重要）

小伙伴们还记得上节课给大家铺垫的css层叠样式表的解释了吗？不记得翻回去看看~

• 总述：层叠式是贯穿整个css的一个性质，包含继承性和层叠性。

14.1 继承性

• 如果一个子标签没有设置过一些样式，但是他的祖先标签设置过样式，那么这个子标签也会展示出某些样式，这种现象就叫继承
• 能够被继承的样式是所有文字相关样式属性，其他属性都不能被继承。

说明：只有文字样式相关属性继承给了p标签，剩下的属性都没有继承过来。

14.2 层叠性：

• 问题1：若同一个标签被多个选择器选中，且设置了相同样式属性但属性值不同，该标签该按照哪个属性值显示呢？
• 解答1：
  • 首先：比较多个选择器的权重，权重高的覆盖权重低的。
    • 基础选择器选择范围越大，权重越低：*>标签选择器>类选择器>id选择器
    • 高级选择器依次比较高级选择器中id选择器个数、类选择器个数、标签选择器个数，前面能比出大小后面就不用比了，谁大谁权重高。
  • 最后：如果选择器权重相同，需要比较css中代码的书写顺序，后写的覆盖先写的。

说明：一共有4个选择器选中了p标签，其中id选择器的权重最高，所以颜色被设置为了白色。

说明：一共有3个选择器选中了p标签，其中第三个选择器的id选择器有2个，所以权重最高，所以颜色被设置为了绿色。

• 问题2：若多个祖先设置了相同样式属性，后代又该继承哪个呢？
• 解答2：
  • 首先：比较就近原则，哪个祖先距离目标标签最近，则近的覆盖远的。
  • 接着：若距离一样，比较选择器的权重（和问题1相同）
  • 最后：若权重相同，书写顺序后面的覆盖前面的（和问题1相同）

说明：爷爷级标签属性是绿色，父亲级标签属性是黄色，因为父亲级距离p标签最近，所以颜色是黄色。

说明：两次对于父级标签的颜色属性赋值，对于p标签来说距离相同。从选择器上来看，id选择器权重更高，所以颜色是绿色。

说明：两次对于父级标签的颜色属性赋值距离相同；选择器权重也相同；因颜色黄色书写顺序靠后，所以颜色是黄色。

• !important关键字：在比较选择器权重过程中，若遇见!important关键字，可将某条属性权重值提升到最大。

说明：按照流程来讲，颜色本应该是黄色，但由于绿色被!important标记了，所以最终颜色是绿色。

• 注意：

  • 就近原则中，important会失效；
  • important只能提升某条属性的权重，而不会影响选择器的权重。

• 综上，层叠性是用来解决冲突的。多个选择器在进行对比过程中，只有一个属性会加载成功，它会层叠、覆盖掉其他属性。

前端文章汇总目录

https://www.jianshu.com/p/6d80dd616ff4

---

结束语：一花一世界，一木一浮生，诸君共勉！