CSS扫盲
HTML+CSS+Javascript，这三样加起来就可以简单制作出一个，内容完整，样式丰富且具有简单交互 功能的网页，HTML负责内容，CSS负责内容的样式展现，JavaScript负责具体交互功能的实现CSS的样式功能展现很丰富，原生css可以构建简单的样式，也可以构建更加复杂且完整的3D或者2D效果，稍微能够明白其原理，就可以去找主流的CSS框架：
- Bulma
- Bootstrap
- tailwind
构建基础
外部样式表
外部样式表是指将CSS编写在扩展名为.css的单独文件中，并从HTML<link>元素引用它的情况,link元素的 href 属性需要引用你的文件系统中的一个文件:1
2
3
4
5
6
7
8
9
10
11
12<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<link rel="stylesheet" href="styles.css"> //html标签的<link>进行的外部样式引用
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>内部样式表
内部样式表是指不使用外部CSS文件，而是将CSS放在HTML文件<head>标签里的<style>标签之中。有的时候，这种方法会比较有用（比如你使用的内容管理系统不能直接编辑CSS文件)，但该方法和外部样式表比起来更加低效 。在一个站点里，你不得不在每个页面里重复添加相同的CSS，并且在需要更改CSS时修改每个页面文件。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>CSS选择器
选择器的种类
通常分为三种：类型，类和ID选择器
1 | |
伪类和为元素
伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。
按我的自己的理解：当你需要把class类里面的第一个标签展现出不同的效果，就是伪类和伪元素需要体现的作用
1 | |