这是我参与「第五届青训营 」伴学笔记创作活动的第二天

课堂笔记

课堂重点

1. 简单了解CSS
2. 对CSS选择器的介绍，CSS中的属性
3. 

CSS简介

CSS（cascading style sheets）是在HTML的基础上来定义页面元素的样式，用设置字体的颜色，元素的位置和大小，也可以添加动画效果。基础的代码如下：

`

h1 { //选择器的类型
color：white;//盒子的颜色
font-size:14px;文字的大小

} `

在页面中使用CSS有三种方式外链、嵌入和内联。

1. 外链（一般使用这种方式）
    <link rel="stylesheet" href="/assets/style.css">
2. 嵌入（也是平时我用过最多的方式，写一些简单的页面可以定义div的样式）
    <style>
        li {
            margin: 0;
            list-style: none;
        }
    </style>
3. 内联(不用选择器)
    <p style="margin:lem 0">123456</p>
    

CSS是在打开页面解析HTML时加载并解析CSS，解析完后展示画面。

选择器

选择器是为了找出页面中的元素，以便给他们设置样式，我们可以使用很多种方式选择元素，比如可以给我们要用的元素添加id，可以选择用元素的标签，也可以用元素的属性，也可以用HTML中DOM树的位置等等。

1. 通配选择器
该选择器可以适配所有的元素
<h1>holle</h1>
<p>My name is LiHua</p>

* {
    color：red；
}
2. 标签选择器
这个选择器直接用标签做选择器的名称
<p>你好</p>

p {
    color：blue；
}
3. id选择器
首先要给标签添加一个id的属性，然后再给id赋值,选择的时候要用#加id的值进行选择。id是唯一的。如下：
<h1 id="abc">你好</h1>

#abc {
    color: green;
}
4. 类选择器
首先要给标签添加一个class的属性，然后再给class赋值,选择的时候要用.加class的值进行选择。如下：
<h1 class="abc">你好</h1>

.class {
    color: green;
}
5. 属性选择器
由元素的某一属性来进行选择，页面中符合这一属性的元素都要改变样式。

在选择一些元素的时候，我们也可以不基于标签和属性定位元素，可以使用伪类。伪类有几种形式：状态伪类和结构伪类。

状态伪类
比如鼠标放到某一个元素上是一种状态，鼠标点击是另一种状态，鼠标松开又变了一种状态。
结构伪类
比如列表想给第一个或第二个...一个状态其他不设置。  

选择器也是可以组合起来的。

直接组合（AB）：满足A的同时也满足B
后代组合（A B）：如果B是A的子孙，不管隔了多少级，选中B
亲子组合（A>B）：如果B是A的子元素，直接子元素，不能相隔，选中B 
兄弟选择器（A~B）：AB为同级，且B在A的后面
相近选择器（A+B）：B紧跟A后面

属性

颜色-RGB

#000000 或 rgb（123,134,231）两种方式
也可以使用HSL(色相，饱和度，亮度)来表示
颜色还有透明度

字体 font-family

设置了多个字体，按顺序进行分配
有英文和中文的时候，建议英文在前

字体大小font-size

设置字体大小，有small、medium、large等
也可以用数字加px，em形式
还可以用百分号的形式

行高 line-height

文字对齐方式：text-align

间距：spacing

调试CSS 快捷键ctrl+shift+I（Windows）

学习内容和自己的理解如上，若是不对，欢迎指正。