这是我参与「第五届青训营」笔记创作活动的第2天。
什么是CSS？
Cascading Style Sheets 用来定义页面元素的样式，设置字体和颜色、设置位置和大小、添加动画效果）等。
在页面中使用CSS（三种）：
<!--外链-->
<link rel ="stylesheet" herf="被连接的css地址" >
<!--嵌入-->
<style>
li{margin:0;}
p{margin:0;}
</style>
<!--内联-->
<p style="margin:lem 0">内容</p>
CSS部分选择器
选择器(selector)：选择页面中的元素，给选中元素设置样式。
以下是一些我不熟悉的选择器实例
属性选择器：
<input value="jiang" disabled />
<input type="password" value="33433" />
<style>
[disabled]{ //选中所有具有disabled属性的元素
background:#fff;
}
input[type="password"]{//选中type="password"的input元素
color:red;
}
</style>
选择器组(,隔开的一组选择器)
body,h1,h2,h3,ul,ol,li{
color:red;
}
[type="checkbox"],[type="radio"]{
属性:属性值;
}
伪类选择器：状态伪类、结构伪类等
组合选择器:各种选择器组合起来使用
注：id选择器：id值一般是唯一的，避免后续设置样式混乱。
CSS布局
flex布局(弹性盒子)
选择给哪些元素设置为弹性盒子，将她们的父容器display设置为特定值。
section{
diaplay:flex;
}
我们给的dislpay值为 flex 的元素就像一个块级元素，但是它的子元素布局为 flex 项。也可以使用 display 值为 inline-flex，但是该元素的行为类似于行内元素。还有很多flex内容这里不再赘述，感兴趣可以去MDN阅读浏览。
Grid 布局(网格布局)
flex与Grid最直接的区别就是，flex布局是一维布局，而Grid是二维布局。与弹性盒子一样，将父容器改为网格布局后，他的直接子项会变为网格项。
//定义Grid布局，
section{
display:grid;
grid-template-columns: 200px 1fr 1fr; //1fr：一份（有点抽象，但是运行后能理解！）
}
Grid布局今天的概念学习的还比较浅显，后续自己会学习一下，在日后练习项目中应该会熟练应用。
部分CSS属性
*{
font-family:Optima, Georgia, serif; //最后一个最好是通用字体符
}
字体族,不同浏览器匹配该浏览器拥有的字体,层层匹配。
通用字体族：serif衬线体、Sans-Serif无衬线体、Cursive手写体、Fantasy、Monospace等宽字体。
*{
white-space:normal; //控制空白符
}
white-space（控制空白符）：normal、nowrap(强制不换行)、pre(与原始保持一致)、 pre-wrap(保留空格，自动换行)、pre-line(合并空格，保留换行)
课后总结
在几年前初学CSS时，老师并没有真正意义上的教CSS布局，整个画面大量使用定位加浮动，所以画面极易变形，可以说换一台电脑打开我的程序就直接面目全非，直到后面学习写微信小程序才稍微熟练一点flex布局，今天在这节课上还知道了Grid 布局，今天的课程查漏补缺了我以前的CSS知识，修缮了我对CSS的认知体系。
