下面是我在学“理解CSS”这节课，做的笔记：

首先明确CSS的概念：

CSS 是CascadingStyleSheets,意为层叠样式表———用于设置和布置网页——例如，更改内容的字体、颜色、大小和间距，将其拆分为多个列，或添加动画和其他装饰功能。

然后是CSS的代码组成：

我用一段例子来解释：
h1{
color:white;
font-size:14px;
}
代码中的“h1”是选择器，选择器后面跟一个{}括号，大括号中存放属性，上例中“color”和“font-size”就是属性。属性后面用冒号：后面是我们为这个属性指定的值，如“white”和“14px”，最后用一个分号结尾。

在页面中使用CSS有三种用法：

一是外链，二是嵌入，三是内联；

外链：是将CSS表放在单独的文件里，然后用link标签来引入到页面中。
嵌入：是将CSS表直接放在页面中了。
内联：是将Style标签直接放在p标签或者其他中，从而在页面中发挥作用。

老师更推荐我们使用的是外链用法，将HTML与CSS分开，分开编写。

然后是CSS是如何工作的：

下面具体讲了一下，选择器如何选择多种元素：

通配选择器：

例子:
<h1>一级标签</h1>
<p>this is some paragraph.</p>
<style>
*{
color: red;font-size: 20px;
}
</style>
其中* 星号会使所有的元素都会适用这个CSS样式。

标签选择器：

<h1>This is heading</h1>
<p>this is some paragraph.</p>
<style> h1 {
color: orange;
}
p{color: gray;
font-size: 20px;
}</style>
其中在<style>标签中的针对h1，p标签设计的CSS样式都会生效在对应的标签里

id选择器：

<h1 id="logo">一级标题<h1>
<style>
#logo {font-size: 60px;
font-weight: 200;
}
</style>
id选择器用于我们想用一种方式样式化这一片元素，又想用另一种方式样式化那一片元素，我们可以用不同的id命名相同或不同的标签，再编写不同的CSS样式来装饰。其中#logo会寻找标签的id叫“logo”的，然后会生效在它们上面。

类选择器：

<h2>Todo List</h2>
<ul>
<li class="done">Learn HTML</li>
<li class="done">Learn CSS</li>
<li>Learn JavaScript</li>
</ul>
<style>
.done {
color: gray;
text-decoration: line-through;
}</style>
类选择器类似于id的用法，但是他可以用于列表中的<li>标签，我们给<li>标签的class属性赋值后，在<style>中设置“.done”中就可以实现对它们的分别控制，更精细化。

属性选择器：

<label>用户名: </label>
<input value="zhao" disabled />
<label>密码: </label>
<input value="123456"type="password"/>
<style>
[disabled]{
background: #eee;
color: #999;
}</style>
这个例子中，在<style>标签中，将属性里有[disable]的标签都会使用这个这个样式
如果说上面的例子的范围很大，那下面的例子就很缩小了这种范围。 <p>
<label>密码: </label>
<input type="password" value="123456" />
</p>
<style>
input [type="password"] (border-color: red;color: red;
</style>
在[ ]括号的前面加上了具体的某个标签，使CSS样式更精准的发挥作用。
下面这个例子是属性选择器的另一个用法
<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>
<style>
a[href^="#"] {
color: #f54767;
background: 0 center/1em
url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
padding-left: 1.1em;
}
a[href$=".jpg"]{
color: deepskyblue;
background: 0 center/1em
url(https://assets.codepen.io/59477/image3.png) no-repeat;
padding-left: 1.2em;
}
在<style>标签中的a[href^="#"]和a[href$=".jpg"]的意思分别是如果<a>标签的href属性值以#开头，就会被选中；<a>标签的href属性值以jpg结尾，就会被选中。所以这个的重点是在^=和$=上面,前者是以XX开头，后者是以XX结尾。因为伪类是不基于标签和属性定位元素，与上述的属性选择器类似，所以老师由此引出伪类（个人理解）

伪类

伪类(pseudo-classes)：不基于标签和属性定位元素，伪类又分为两种：状态伪类，结构性伪类。
下面是一个状态伪类的例子：
<a href="http://example.com">example.com</a>
<label>
用户名:
<input type="text">
</label>
<style>
a:link {
color: black;}
a:visited {
color: gray;}
a:hover {
color: orange;}
a:active {
color: red;}
:focus {
outline: 2px solid orange;}
</style>
上面描述了一个链接和文本框在不同状态下，呈现给用户的效果。上述的是常见的状态伪类，状态伪类顾名思义，就是在与用户交互过程中，出现的不同状态，我们渲染他们，用的就是状态伪类（个人理解）下面介绍结构性伪类：
<ol>
<li>阿凡达</li>
<li>泰坦尼克号</li>
<li>星球大战: 原力觉醒</li>
<li>复仇者联盟 3</li>
<li>侏罗纪世界</li>
</ol>
<style>
li{
list-style-position: inside;
border-bottom: 1px solid;padding:0.5em}
li:first-child {
color: coral}
li:last-child {
border-bottom=none;}
}</style>
这是针对有序列表的伪类，我们从标签里可以看出我们对<li>标签进行了修饰，使得有序列表里的第一个内容和最后一个内容会与其他内容与众不同。然后老师讲述了这个不同选择器之间的组合：（如下图）经过老师解释了一通，勉强听懂，我觉得老师举得这个例子非常容易理解，在这里我也粘贴了下来，大家可以做一下，根据上面的图，还是比较清晰的。
<article>
<p>拉森火山国家公园是位于.·.</p>
<section>
<h2>气候</h2>
<p>因为拉森火山国家公园...</p>
<p>高于这个高度，气候非常寒冷...</p>
</section>
</article>
<style>
article p {
color: black;}
article > p {
color: blue;}
h2 + p{
color: red;}
</style>

颜色：

关于颜色或者说RGB，老师给出了几个方面
如：1.rgb（0，0，0）
2.hsl（0,0,0）：
Hue 色相(H)是色彩的基本属性,如红色、黄色等; 取值范围是0-360。
Saturation饱和度(S)是指色彩的鲜艳程度，越高越鲜艳;取值范围0-100%。
Lightness亮度(L)指颜色的明亮程度;越高颜色越亮;取值范围是0-100%。
3.alpha透明度：0-1，从0到1越来越不透明。

字体

下面是一个在CSS中设置字体的例子
<style>
hi {
font-family: Optima,Georgia， serif;}
body {
font-family: Helvetica, sans-serif;}
</style>
我们可以看到在<style>中为多个标签设置了多个字体，或许有人会疑问，我们设置一个字体不就可以了吗。事实上，我们需要考虑，用户是否安装了此种字体，如果没有安装这个字体，那我们的展示出的效果就会出现问题。需要说明的是，如果第一个字体用户没有安装，浏览器会以此向后寻找。
通用族字体有：Serif衬线体：Georgia、宋体；Sans-Serif 无衬线体：Arial、Helvetica、黑体、微软雅黑；Fantasy，Comic Sans MS, Papyrus；Monospace：等宽字体，Consolas,CourieF,中文字体Cursive手写体Caflisch Script、楷体
他们的作用是在font-farmily里保底，为用户呈现效果
font-face标签 @font-face { font-family:"Megrim";src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2)format( 'woff2' );
还有个font-weight标签，可以加粗字体。line-height标签，设置行高（两行之间基准线的距离）

理解CSS | 青训营笔记