1-1-9&10合集 【CSS基础】CSS概述&常用属性和选择器
类选择器.jpg
经过前面的学习，相信大家已经对HTML有一定了解了，下面该学习CSS基础了~
1.CSS背景介绍
- HTML最开始，为了满足页面设计的需求，添加许多控制样式的功能。
- 但是随着功能增加，HTML变得越来越臃肿，除了结构以外还要描述样式，对于程序员开发十分不利。
- 所以大家将结构设计和样式设计分开，HTML负责结构设计，CSS负责样式设计。如此一来，大大减轻了程序员的负担。
2.CSS发展过程
了解即可，后面可能会捎带说明。
3.CSS概述
- 定义：Cascading Style Sheet，层叠式样式表，一种用来表现HTML文件样式的计算机语言。
- 作用：静态的修饰网页，并且可以配合各种脚本语言，动态的对网页各元素进行格式化。
- 意义：CSS的出现，实现了网页的结构和样式的分离，改变了混乱的HTML。CSS可以说是网页的美容师，让网页变得更加美观。
4.什么是“层叠式样式表”？
- 层叠式：CSS贯穿始终的加载特性，又分层叠性和继承性。
- 样式表：描述HTML元素该如何显示的“一张表”。
了解即可，后面会详细说明。放到这里面讲是为了让你从CSS的名字上理解他是什么，他有什么特性。
5.CSS基本语法（很简单）
- 组成结构：主要分为两部分，选择器和一条或多条属性。
- 选择器：用于描述这些属性应该应用于哪些标签。
- 属性：用于描述对应标签在浏览器中的展示样式。
- 书写位置：根据书写位置的不同，可分为4种书写模式，行内式，内嵌式，外链式和导入式。
6.行内式
- 书写位置：在某个HTML标签的style属性中书写，因为已经在标签内部了，所以就不需要选择器了。
<div style="width: 100px; height: 100px; background-color: pink;"></div>
说明：指定该“大盒子”的长宽为100像素，背景颜色为粉色。
- 缺点：
- 必须写在标签上，本质上没有脱离HTML标签而独立存在。
- css样式代码让标签代码结构变得复杂，不利于结构解读。
- 内联式CSS代码只能给当前标签用，如果多个相同标签的样式相同，需要一个一个设置。
- 总结：在实际工作中，不会使用内联式编写css代码。demo中偷懒可以使用该写法。
7.内嵌式
- 书写位置：HTML文件中，<head>标签内部的<style>标签中。<style>标签写在<title>标签后面，所有css代码写在<style>标签的元素内容中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 看这里！！-->
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>
<p>我是一个盒子</p>
</div>
</body>
</html>
说明：在该HTML文件中，所有div标签具有“长宽100px，背景颜色粉色”的属性。
- 优点：实现了结构和样式的初步分离；多个标签可以用同一段代码，节省代码量。
- 缺点：
- 结构和样式没有完全分离，代码依旧写在HTML文件的style标签内部；
- CSS样式只能给一个HTML文件使用，不能被多个HTML共享。
- 若CSS代码过多，会导致HTML文件头重脚轻。
8.外链式
- 书写位置：在一个单独的扩展名为.css的文件中。
- 书写语法：.css文件内部代码与内嵌式样式表中style标签内部代码一样。注意，不需要外部包裹<style>标签了。
- css文件引用：虽然你将css样式写入了一个独立的文件中，但是HTML文件表示不知道，所以需要你告诉HTML文件，css文件在哪。
- link标签：单标签，通过属性告知HTML文件对应的css文件在哪。需要写在head标签内部。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 我在这儿 -->
<link rel="stylesheet" href="css01.css">
</head>
<body>
<div>
<p>我是一个盒子</p>
</div>
</body>
</html>
rel属性：relationship，告知HTML它引用的文件和它是什么关系。stylesheet，样式表。
href属性：告知HTML文件，css文件在哪里。
- 优点：
- 实现了HTML和css的完全分离；
- 多个HTML可共享一个CSS文件，减少重复代码量；
- 实现一个css变化，多个HTML页面同时变化，减少工作量；
- 一个HTML可引入多个css文件，可实现同一个页面中css代码分层？公共样式和私有样式的分离。
9.导入式
- 书写位置：在一个单独的扩展名为.css的文件中。
- 书写语法：与外链式相同。
- 文件引用：与外链式不同，采用@import url语句引用外部css文件，且书写在head标签内部的style标签中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 我在这儿 -->
<style></style>
@import url(css01.css);
</style>
</head>
<body>
<div>
<p>我是一个盒子</p>
</div>
</body>
</html>
- 缺点：
- 导入式样式表与外联式样式表基本相同。
- 导入式在浏览器加载网页时，会优先加载HTML结构，然后再加载css代码，如果网速慢，会先出现很丑的HTML结构式网页，等css加载完毕后，真正的网页才会出现，体验差。
- 总结：工作中很少使用导入式，了解即可。
结束语：一花一世界，一木一浮生，诸君共勉！
1-1-10【CSS基础】CSS常用属性和选择器
由于1天只能发两篇文章，所以接着给大家介绍CSS常用属性和选择器~
1.文字属性——颜色
- 作用：color属性，给文字设置显示颜色。
- 英文单词表示颜色：
- rgb模式表示颜色：根据红、绿、蓝三种颜色的亮度，来表示任意颜色。
<!-- 红色 -->
<P style="color: rgb(255, 0, 0);">RGB表示颜色法</P>
<!-- 绿色 -->
<P style="color: rgb(0, 255, 0);">RGB表示颜色法</P>
<!-- 蓝色 -->
<P style="color: rgb(0, 0, 255);">RGB表示颜色法</P>
<!-- 白色 -->
<P style="color: rgb(255, 255, 255);">RGB表示颜色法</P>
<!-- 黑色 -->
<P style="color: rgb(0, 0, 0);">RGB表示颜色法</P>
每个数字范围是0-255，0表示亮度最低，255表示亮度最高。三种颜色配合可以表示2553种颜色。
- 十六进制表示法：
- 16进制对应10进制的255是ff，所以对于十六进制来说两位数字，即可表示十进制0-255的所有数字。
- 所以用#rrggbb的方式表示，rr表示红色亮度的2位数字，gg表示绿色亮度的2位数字，bb表示蓝色亮度的2位数字。
<!-- 红色 -->
<p style="color: #ff0000;">十六进制颜色表示法</p>
<!-- 绿色 -->
<p style="color: #00ff00;">十六进制颜色表示法</p>
<!-- 蓝色 -->
<p style="color: #0000ff;">十六进制颜色表示法</p>
<!-- 白色 -->
<p style="color: #ffffff;">十六进制颜色表示法</p>
<!-- 黑色 -->
<p style="color: #000000;">十六进制颜色表示法</p>
拓展1：当红绿蓝中3种颜色十六进制的两位数字各自相同，则可以省略一位。例如黑色#000，白色#fff，灰蓝色#abc等以此类推。
拓展2：感兴趣的小伙伴可在该网址查看常用颜色。https://www.runoob.com/tags/html-colorname.html
2.文字属性——字体
- 作用：font-family属性，给文字设置显示的字体。
- 常用字体：宋体、微软雅黑、Arial、consolas。
<style>
p {
font-family: "宋体";
}
</style>
- 拓展1：font-family可以设置多个字体，在实际加载中只会选择一种加载，如果不支持第一个字体，才会尝试用后面的字体加载。
<style>
p {
font-family: "Arial","宋体";
}
</style>
说明：因为Arial不支持中文，所以当网页显示英文时，正常用Arial字体加载；当网页显示中文时，浏览器会找下一个字体“宋体”，支持中文，所以用宋体加载中文。
- 拓展2：浏览器中使用的字体都是用户电脑中自带的，不是浏览器自带的，如果用户电脑中没有相应的字体会使浏览器显示失败。因此最好在最后面设置一个所有机器都有的字体。
- 拓展3：因中文字体里大部分都支持英文，为了防止英文字体被影响，一般将英文字体写在中文字体前面。
3.文字属性——大小
- 作用：font-size属性，给文字设置在浏览器中显示的大小。
- 单位：
- 相对长度单位：px像素，em倍数，%百分比；
- 绝对长度单位：in英寸，cm厘米，mm毫米；
<style>
p {
font-size: 20px;
}
</style>
尽量使用相对长度单位，使用px就能满足日常大部分需求。
- 拓展1：若HTML中不设置字号，则将按照浏览器默认的字号进行显示。Chrome默认16px。
- 拓展2：不同浏览器有不同的最小加载字号，若设置字号低于最小字号，则按最小字号展示。chrome8px，IE1px。
- 实际应用：
- 网页中最小设置字号必须是12px，低于12px将出现兼容问题，目前普遍最小14px。
- 尽量使用12、14、16等偶数字号，ie6等老浏览器支持奇数存在bug。
4.盒子实体化3属性
- width属性：设置盒子的宽度。
- height属性：设置盒子的高度。
- background-color属性：设置盒子的背景颜色。
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
目前只是铺垫，了解即可。
5.CSS选择器
- 选择器：还记得选择器吗？我帮小伙伴们回忆一下：为了确定某些属性描述的是哪些标签，需要选择器来确定描述的对象。
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
说明：上述代码中，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只能提升某条属性的权重，而不会影响选择器的权重。
-
综上，层叠性是用来解决冲突的。多个选择器在进行对比过程中，只有一个属性会加载成功，它会层叠、覆盖掉其他属性。
结束语：一花一世界，一木一浮生，诸君共勉！
