[ 理解 CSS | 青训营笔记]
这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
1、什么是CSS
通俗来说CSS是用来定义页面元素样式。比如颜色、字体等等
2、在页面中使用CSS
1、外链（一般使用）
<link rel="stylesheet" href="/assets/style.css">
2、嵌入
<style>
li{ margin:0; list-style:none;}
p{ margin: lem 0;}
</style>
3、内联(UI组件库)
<p style="margin:lem 0 ">Example Content</p>
3、CSS是如何工作的
选择器Selector
1、找出页面中的元素，以便给他们设置样式
2、使用多种方式选择元素
按照标签名、类名或id
按照属性
按照DOM树中的位置
选择器类型
一、通配选择器
*号匹配所有
二、标签选择器
三、id选择器（id选择的值需要在页面中是唯一的）
#号选择里面的·一个元素进行
四、类选择器
< class="" >
.done
五、属性选择器[ ]
a[href^="#"] (以井号开头的都会被选中)
a[href$=".jpg"] (以.jpg结尾的都会被选中)
六、伪类选择器
不基于标签和属性定位元素
1、状态伪类
链接： link默认、visited访问过、hover移到、active鼠标按下、
输入框: focus
2、结构性伪类
first-child、last-child
颜色-RGB（）
#8fac87 rgb（25，25，25）
颜色-HSL
Hue（色相取值0-360）
Saturation (饱和度0-100%)
lightness（亮度0-100%）
alpha 透明度
调低可见度低
#ff000078 rgba（200，0，0，0.41） hsla（0，100%，50%, 0.47）
font-family 字体
通用字体族
Serif 衬线体 （Geogia、宋体）
Sans-serif 无衬线体（Arial、Helvetica、黑体、微软雅黑）
Cuisive 手写体（Caflisch Script、楷体）
Fantasy
Monospace 等宽字体（ Consolas、Courier中文字体）英文在前 中文在后
使用Web Fonts
@font-face{
font-family："Magrim";
scr:
url(网址)
format（‘woff2’）；
00（注意中文字体字体包比较大，适当裁切）
font-size
1、关键词（small、medium、large）
2、长度（px、em）
3、百分比（相对于父元素字体大小）
font-weight字重
font-weight：100-900(400normal、700bold)
line-height 行高
white-space
1、normal
2、nowrap 强制不换行
3、pre 保留所有的
4、pre-wrap 保留空格自动换行
5、pre-line 合并空格保留换行
4、调试CSS
1、右键点击页面、选择【检查】
2、使用快捷键
Ctrl+shift+I(windows)
Cmd+Opt+I(Mac)
学习总结
今天了解了CSS的入门，在学习的过程中选择器组概念还有一点点模糊，通过反复观看视频，吸收到了很多知识，满满的干货。
