这是我参与「第四届青训营 」笔记创作活动的第3天。
笔记小结： 作为一个前端，一定要懂怎么用css。页面写多了，一些css真的就跟呼吸一样简单，而且UI框架成熟，自己积累下来的css封装好的东西成熟。有时候根本就不用写css，只需要装填class。使用flex.这类布局方式，做页面。
伪类(pseudo-classes)
- 不基于标签和属性定位元素
- 几种伪类
- 状态伪类
- 结构性伪类
概念：
CSS伪类（Pseudo-classes）用于定义元素的特殊状态，用来添加一些选择器。 的特殊效果。下面我们分四种了解伪类，分别是first-child伪类、超链接伪类、CSS类和伪类、其他伪类。
一、first-child伪类
概念： first-child 伪类来选择父元素的第一个子元素，选择器匹配作为任何元素的第一个子元素的 <p> 元素。
语法： 子元素（选择器）+ 空格 + first-child + {定义的样式}；
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类 伪元素</title>
<style>
h4:first-child{color: olivedrab;}
</style>
</head>
<body>
<h4>我是html父标签的第一个元素，且为h4标签，所以我是变绿了</h4>
<h4>我是html标签的第二个元素，所以我不变色</h4>
<hr>
<div>
<h4>我是第一个div标签里的第一个元素，且为h4标签，所以我变绿了</h4>
<h4>我是第一个div标签里的第二个h4标签内容，所以我不变色</h4>
</div>
<hr>
<div>
<p>我是第二个div标签里的第一个元素，但是我是p标签，所以我不变色</p>
<h4>我是第二个div标签里的第一个h4标签，但我不是div的第一个元素，所以我不变色</h4>
</div>
</body>
</html>
代码解析：
（1）通过观察代码得知first-child伪类是放在sytle标签里的，再看看运行结果的“自述”，我们可以得出结论：first-child伪类的实现，需要满足2个条件，条件1是子元素必须是first-child规定的元素，条件2是子元素必须是父元素的第一个（first）元素，只有2个条件同时满足，first-child伪类便会实现。
（2）div标签
<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。<div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。<div> 元素经常与 CSS 一起使用，用来布局网页。
例如百度页面中有很不同的内容，有导航栏、logo标题、推荐内容、百度热搜等，这些不同区域的内容都可以使用 div 分隔，再使用 css 样式对其进行排版，使其在页面中“摆放”在不同位置。div 间的关系有并列有嵌套，嵌套可以一套一也可以一套多。
二、超链接伪类
在支持 CSS 的浏览器中，用超链接伪类实现链接的不同状态以不同的方式显示，例如设置超链接未被访问时的颜色、已访问时的颜色、鼠标滑过时的颜色、选中后的颜色。未访问颜色的设置使用 link 伪类、已访问使用visited、鼠标滑过使用hover、已选中使用active。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接伪类</title>
<style>
/* 未访问的链接,显示黑色 */
a:link {
color:black;
}
/* 已访问的链接，显示灰色*/
a:visited {
color:gray;
}
/* 鼠标悬停链接，显示绿色 */
a:hover {
color:olivedrab;
}
/* 已选择的链接，显示橙色 */
a:active {
color:orange;
}
</style>
</head>
<body>
<a href="http://csdn.com">我是链接一</a>
<br>
<a href="http://www.w3school.com">我是链接二</a>
</body>
</html>
代码解析：
未访问链接字体颜色命名为 link 、已访问链接字体颜色命名为visited、鼠标滑过时链接字体颜色命名为hover、已选中链接字体颜色命名为active，对链接进行不同操作，显示不同颜色。
使用超链接伪类使得制作出来的页面更加精美，需要注意 hover 必须写再 link 和 visited 之后，active 必须放在 hover 之后，否则无法生效。
三、CSS类和伪类
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS类和伪类配合使用</title>
<style>
.highlight{
color: #ff0000;
}
</style>
</head>
<body>
<h4 class="highlight">我使用了类样式，所以生效了</h4>
<h4 >我没有使用类样式，所以不生效</h4>
</body>
</html>
代码解析：
当元素h4调用CSS类highlight时，样式生效，如果使用伪类就不需要调用，伪类是提前定义好的。
四、其他伪类
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>其它伪类</title>
<style>
ul li:first-child{color:green;}
p a:last-child{color:hotpink;}
div p span:first-child{color:yellow}
</style>
</head>
<body>
<b>例子一：</b>
<ul>
<li>第一项值</li>
<li>第二项值</li>
<li>第三项值</li>
</ul>
<ul>
<li>第一项值</li>
<li>第二项值</li>
<li>第三项值</li>
</ul>
<hr>
<b>例子二：</b>
<p>我是p标签</p>
<p>
我是 p 元素内容
<br>
<a href="http://www.csdn.com">这是 p 元素下的 a 标签1</a>
<br>
<a href="http://www.baidu.com">这是 p 元素下的 a 标签2</a>
<br>
<a href="http://www.taobao.com">这是 p 元素下的 a 标签3</a>
</p>
<hr>
<b>例子三：</b>
<div>
<p>
p1内容
<span>span内容1</span>
<span>span内容2</span>
p1内容
</p>
<p>
p2内容
<span>span内容3</span>
p2内容
</p>
</div>
</body>
</html>
代码解析
定义了3种伪类，分别是ul li:first-child{color:green;}、 p a:last-child{color:hotpink;}和div p span:first-child{color:yellow;}，其中：
- first-child------表示父元素指定的第一个子元素，前面介绍过了。
- last-child------表示父元素指定的最后一个子元素，语法格式和first-child一样都是 父元素+空格+子元素
- ul li:first-child{color:green;}--------表示ul标签里的第一个元素是li标签时，li标签使用该样式。
- p a:last-child{color:hotpink;}-------表示p标签里的第一个元素是a标签时，a标签使用该样式。
- div p span:first-child{color:yellow;}-表示div标签里的第一个元素是lp标签,并且p标签的第一个元素是span标签时，span标签使用该样式。
伪元素
CSS 伪元素用于设置元素指定部分的样式。伪对象语言创造的元素不存在在DOM文档中，是虚拟的元素。伪元素代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
伪对象用于将特殊的效果添加到某些选择器。
语法规制为：选择器 :: 伪元素{属性：值}
一、伪对象表
| 伪元素 | 说明 |
|---|---|
| :after | 与content属性一起使用，定义在对象后的内容 |
| :before | 与content属性一起使用，定义在对象前的内容 |
| :first-letter | 定义对象内第一个字符的样式 |
| :first-line | 定义对象内第一行的样式 |
CSS中的颜色
常用的有几种方式：
一、十六进制颜色：
#RRGGBB，其中RR：红色，GG：绿色，BB：蓝色；
（注意：所有取值必须在 0 和 FF之间，F是16）
二、RGB颜色
rgb（红，绿，蓝）
（注意：每个参数的取值在0~255之间；例如：rgb（255，255，255）为黑色；rgb（255，0，0）为红色）；
三、英语简写颜色
red（红），green（绿），blue（蓝），pink（粉）；
四、HSL颜色
其中HSL ：（色调，饱和度，亮度）
色调（色相）： 是在色轮上的程度（0~360）其中：0是红色，120是绿色， 240是蓝色
饱和度： 百分比计算，0%为灰色；100%的阴影是全彩的哦
亮度： 也是百分比计算，0%是黑色，100%是白色；
五、HSLA颜色
HSLA：（色调，饱和度，亮度，α）
α是透明度：取值范围为0~1之间
字体font-family
设置元素的字体，可以同时指定多个，如果浏览器不支持第一个字体，则会尝试下一个，可以设置字体或字体系列。
如：font-family: Arial, sans-serif;
如果不设置font-family则使用浏览器默认字体，如果设置的font-family无效，也会fallback到浏览器的默认字体。
书写字体规则
在介绍字体规则前，有几点是需要注意的：
1、不同平台，预置的字体并不相同。比如Helvetica和苹方也只有苹果系统内置，微软雅黑只有windows系统内置(由于很多人安装Office的缘故，Mac电脑中也会出现微软雅黑字体)，android 和 iOS 系统内置的字体各不相同。
2、字体是有版权的，但是如果没有引用外部字体文件（如 Web font 或者内嵌到 App 中），而仅仅是在 CSS 中指定字体名称，不需要购买授权，因为其只是一段声明，表示期望浏览器优先使用某种字体渲染文本。
3、中文网站涉及两种文字类型：西文字体和中文字体，西文字体包括英文数字等，不包括中文，但是中文字体一般包括英文和数字，我们一般先设置西文字体，后设置中文。
4、如果字体包含空格或者是中文，需要添加引号。
5、大部分字体全名中会包含字体粗细、斜体（italic）、长体（condensed）等具体属性，但一般不建议直接使用，字体的风格应该在 CSS 中通过 font-weight、font-style、font-stretch等属性指定，由浏览器决定实际渲染的字体。
6、font-family属于可继承属性，全局的font-family一般设置在body元素上。\
字体定义大致规则
1、西文在前，中文在后
中文字体大多都包含西文，但西文的部分又不好看，而西文不包含中文，通常先定义西文，后定义中文以达到更优的显示效果。
2、优先使用system-ui
system-ui使用当前系统的默认字体，让web页面和操作系统的风格统一，体验更好。
3、兼顾不同的操作系统
选择字体的时候要考虑不同的操作系统，还需要考虑旧版本操作系统的用户。
即便是同一个字体在不同的操作下也会有细微的差别，我们要尽量做到相同系统使用同一种字体，保证同一个系统下的字体一致性。对于不同系统尽量保证字体风格接近，比如都使用无衬线字体。
为了保证苹果系统中使用更优雅的中文字体，优先声明苹方字体, 对于不支持苹方的低版本macOS，使用Hiragino Sans GB(冬青黑体)字体做兜底。
如果需要兼容Linux系统，还需要添加WenQuanYi Micro Hei(文泉驿微米黑)字体。
如果需要兼容不同平台的表情符号，一般在sans-serif后添加"Apple Color Emoji", “Segoe UI Emoji”, “Segoe UI Symbol”, "Noto Color Emoji"等字体。
4、以serif或sans-serif字体族结尾
为了保证在各种不同环境或条件下显示正常，我们一般将sans-serif放在字体的后面，非衬线字体在显示器中的显示效果更好。
5、简洁实用
字体设置并不是越多越好，在能满足设计需求的情况下尽量简洁。相同系统下中西文字体各有一个fallback即可，不需要太多。
调试CSS
1. 右键点击页面,选择「检查」
2. 使用快捷键
- Ctrl+Shift+I(windows)
- Cmd+Opt+I(Mac)
