这是我参与「第五届青训营」伴学笔记创作活动的第2天，学习的是关于CSS的相关知识。

课程重点

1.CSS基础知识

2.CSS的继承与布局

3.CSS盒模型

CSS基本认知

代码构成

CSS的作用

用来定义页面元素的样式：设置字体和颜色、位置和大小、添加动画效果等。

在页面中使用CSS

1. 外链（推荐）

<!--外链-->
<link rel="stylesheet">

2.嵌入：内嵌在HTML文件中

<!-- 嵌入-->
<style>
    li{margin:0;list-style:none;}
    p{margin:lem 0;}
</style>

3.内联（一般不推荐）

<!--内联-->
<p style=" margin:lem 0">Example :content</p>

CSS如何工作

选择器Selector

找出页面中的元素，以便给他们设置样式
使用多种方式选择元素
- 按照标签名、类名或ID
- 按照属性
- 按照DOM树中的位置

1. 标签选择器：h1

 h1{
    color:blue;
    font-size:24px;
    }
  p{
    color:red;
    font-size:18px;
    line-height:1.8;
    }

2. 通配选择器*：匹配所有

<style>*{
        color:pink;
        font-size:14px;
        }
</style>

3. ID选择器：ID值唯一

4. 类选择器

<div class="box1 box2"></div>
<p class="box1"></div>
<h3 class=box2></div>

5. 属性选择器

根据元素属性值，比如disabled是input的属性值

 <style>
       [disabled]{
       background: #eee;
       color:yellow
       }
 </style>

伪类（pseudo-classes）

不基于标签和属性定位元素

状态伪类：不具体指某一元素，当元素处于某种状态下被选中，比如链接，访问前是蓝色，访问后是红色。

<style>
        a:link{
            color:blue;
        }
        a:visited{
            color:red;
        }
</style>

结构伪类：根据DOM节点在DOM树中出现的位置

组合（Combinators）

组合.jpg

CSS字体属性

字体颜色

1. RGB

颜色的表示：rgb（颜色的数量）/#6位字符

2.HSL

色相（Hue）：0-360
饱和度（Saturation）：0-100%
亮度（Lightness）：0-100% 颜色的表示：hsl（指标的数值）

3.指定颜色的值

pink、red、black等

字体类型font-family

字体间用逗号隔开，如果第一个字体浏览器不支持就会向后找
最后最好添加通用字体族，如Serif
英文字体在中文字体前面

font-family: Optima,Georgia,serif;

字体大小font-size

关键字：small、medium、large
长度：px、em
百分数：相对于父元素字体大小

p {font-size:24px;}
p span {font-size:200%;}

font-style字体：

Italic 倾斜字体
Normal 取消倾斜

字重font-weight

font-weight:normal;/*正常粗细：400*/
font-weight:bold;/*加粗：700*/

调试CSS

右键→检查
快捷键:ctrl+shift+T

CSS 继承与布局

继承

某些属性会自动继承其父元素的计算值，除非显示指定一个值。

1.可继承属性：font系列、color、text系列等

2.不可继承系列：与盒模型相关的，如height

默认不可继承的属性想要变为可继承属性，使用显示继承，把属性值设为inherit，表示这个属性的值继承父元素。

初始值

CSS中，每一个属性都有一个初始值

background-color的初始值为transparent

```
margin-left的初始值为0
```
可以使用initial的关键字显示重置为初始值
```
 background-color：initial
```

布局（Layout）

确定内容的大小和位置的算法
依据元素、容器、兄弟节点和内容等信息来计算
布局相关技术

盒模型

1.content

2.padding

3.border

三种属性
```
border-width
```
```
border-style
```
```
border-color
```
四个方向
```
border-top
```
```
border-right
```
```
border-bottom
```
```
border-left
```

例子：设计一个四条边框，线条、颜色都不相同

width:100px;
height:100px;
border-top:5px solid red;
border-right:6px double blue;
border-bottom:6px dotted orange;
border-left:5px dashed skyblue;

4.margin

CSS 盒模型 - 行级

不和其他盒子并列摆放，适用于所有的盒模型属性。

CSS 盒模型 - 块级

和其他行级盒子一起放在一行或拆开成多行，盒模型中的width、height不适用。

理解CSS| 青训营笔记