CSS基础 | 青训营笔记

2023-01-17 60 阅读3分钟

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

一、重点内容

CSS是什么
在页面使用CSS
选择器
颜色
字体

二、CSS基础

1.CSS是什么

Cascading Style Sheets（CSS），用来定义页面元素的样式，设置字体和颜色设置位置和大小添加动画效果。

2.在页面使用CSS

有外链，嵌入和内联三种方式，推荐外链不推荐内联这种方式。

3.选择器

选择器主要是找出页面中的元素，以便给他们设置样式。
可以使用多种方式选择元素：
```
按照标签名、类名或 id
```
```
按照属性
```
```
按照 DOM 树中的位置
```
通配选择器

匹配所有
属性选择器

属性值可设置可不设都可以作为属性选择器

伪类
```
不基于标签和属性定位元素
```
```
分为状态伪类结构性伪类
```
组合
```
直接组合（AB）
```
```
后代组合（A B）
```
```
亲子组合（A>B）
```
```
兄弟选择器（A~B）
```
```
相邻选择器（A+B）
```

4.颜色

在CSS中颜色使用三种方式：RGB模型、HSL模型、关键字。
RGB模型：#000000或rgb(0,0,0)
HSL模型：hsl(200,30%,50%)
Hue -- 色相，取值为0-360；
Saturation -- 饱和度，色彩的鲜艳程度，取值范围为0-100%，越高越鲜艳；
Lightness -- 亮度，颜色的明亮程度，取值为0-100%，越高越亮；
关键字：red
透明度alpha：取值为0-1，越高越不透明。
使用方式：#ff006e、rgba(255,0,0,0.43)、hsla(0,100%,50%,0.43)

5.字体

字体族示例：font-family: "Hello World", sans-serif; 一般来说字体族需要设置多个，这是为了设备的兼容性问题，其匹配规则按照从前往后的方式进行匹配。需要注意的是要在最后设置通用字体族。
字体族建议这样使用：

英文字体放在中文字体前面；

字体列表最后写上通用字体族；

另外要注意采用 web font 会增加系统的开销，所以中文字体使用裁贴工具最好。

字体大小 font-size，取值有三种：
```
百分比
```
```
关键字
```
```
长度单位（px、em）。
```
字体样式 font-style，取值有三：
```
normal（默认）
```
```
italic（斜体）
```

oblique（倾斜体，若当前字体不存在倾斜体就会用斜体代替）

字体粗细 font-weight，取值有两种：
```
数字值（100-900）
```

关键字 normal（400）、bold（700）

行高 line-height 取值有四种：
```
normal（默认）
```

不带单位的数字（与当前设置的字体尺寸相乘得到行高）

带单位的数字（固定行间距）

百分数（基于当前字体尺寸得到行高）

对齐方式 text-align 取值有四种：
```
left
```
```
right
```
```
center
```
```
justify
```
间距取值有两种：
```
letter-spacing（字符间距）
```
```
word-spacing（单词间距）。
```
首行缩进 text-indent 取值有两种：
```
带单位数值
```

百分比（百分比是相对于块宽度的）

文本装饰 text-decoration 取值有四种：
```
none（默认）
```
```
underline
```
```
line-through
```
```
overline。
```
空白：

white-space，其详细取值请参阅mdn文档