初步接触CSS语言

1.1 CSS语言简介

CSS是什么？

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

代码示例

h1{
  color: white;
  font-size: 14px;
}

h1：选择器（selector）-选择页面中的元素，给这一类元素定义样式（给页面中所有的h1元素定义样式）
color：属性（property）
white：属性值（value）
注1：属性: 属性值; ：放一起称为声明（declaration）
注2：上述一整个大括号内的代码为一条规则

在页面中使用CSS
1. 外链：把CSS的定义放在一个单独文件里，用link标签引入到页面里
  <link rel="stylesheet" href="/assets/style.css">
2. 嵌入
```
<style>
  li { margin: 0; list-style:none; }
  p {margin: lem 0; }
</style>
```
1. 内联
  <p style="margin: lem 0">Example Content</p>
注1：一般推荐用外链方式来写，因为内容和样式的分离，html负责内容，CSS负责样式,在进行组件式开发的时候可以用嵌入书写，比较不推荐使用内联
注2：在使用UI组件库，或者给某个组件添加

1.2 CSS语言是如何工作的

1.2.1 选择器 Selector

CSS是如何工作的.PNG

选择器 Selector

找出页面中的元素，以便给他们设置样式
使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
选择器类型
- 通配选择器：可以匹配所有元素，用*号表示
- 标签选择器：通过标签来匹配对应的元素，如h1
- id选择器：可以匹配相对应的id所在的标签，用#id名表示
- 类选择器：可以匹配同一类标签，用.class名来表示
- 属性选择器：
  - 匹配所有同一属性的标签，用[property]来表示
  - 匹配当该属性是特定值时，用selector[property="name"]来表示
  - 匹配同一规则的属性值时：
    - selector[property^="name"]（该property值以name开头会匹配上）
    - selector[property$="name"]（该property值以name结尾会匹配上）

伪类 pseudo-classes

不基于标签和属性定位元素
伪类的种类
- 状态伪类（不是选择具体的某一个元素，而是选择处在某一种状态下的元素）
  - 不同状态下的链接
    - a:link 链接默认状态下的样式
    - a:visited 链接被访问过后的样式（链接点击后的样式）
    - a:hover 鼠标移到链接上时链接的样式
    - a:active 鼠标点击链接时链接的样式
  - 不同状态下的输入框
    - :focus 选中输入框时（在输入框中输入）会将输入框改成所设置的样式；该状态也会在链接处于active时被激活
- 结构性伪类（根据DOM节点在DOM树中出现的位置来决定是否选中该元素）
  - 与有序列表有关的伪类
    - li:first-child 选中的li是该ol的第一个list
    - li:last-child 选中的li是该ol的最后一个list
  - 注：结构性伪类其实就是根据该元素在父级节点中的相对位置进行选择

组合（Combinators）

名称	语法	说明	示例
直接组合	AB	满足A同时满足B	input:focus
后代组合	A B	选中B，如果它是A的子孙	nav a
亲子组合	A>B	选中B，如果它是A的子元素	section>P
兄弟选择器	A~B	选中B，如果它在A后且和A同级	h2~p
相邻选择器	A+B	选中B，如果它紧跟在A后面	h2+p

选择器组

顾名思义，将多个选择器放在一起，中间用,隔开，如：body, h1, h2, h3, ul, ol, li {……}

1.2.2 颜色 RGB

RGB表示法

RGB具体表示方法：
- rgb(143,172,135)
- #8fac87 (将三位RGB数值转换为两位16进制)
注：RGB只能表示基本的色相，但无法表示颜色的所有内容，如饱和度和亮度

HSL表示法

HSL具体所指：
- Hue 色相（H）是色彩的基本属性，如红色、黄色等；取值范围是0~360
- Saturation 饱和度（S）是色彩的鲜艳程度，越高越鲜艳，取值范围0~100%
- Lightness 亮度（L）是颜色的明亮程度，越高颜色越亮；取值范围是0~100%
HSL具体表示方法：hsl(211,15%,55%)

alpha透明度

透明度：当alpha为1时，图片完全不透明，当alpha为0时图片透明
表示方法：
- rgba(255,0,0,0.47) 或 #ff000078（将alpha从0~~1转变成0~~255再转为16进制；新版的css中直接写rgb（255,0,0,0.47）也是可以的，老版需要为rgba）
- hsla(0,100%,50%,0.47)

关键字表示颜色：white，red，yellow等等

1.2.3 字体 font-family

字体设置的规则：网页会被不同设备访问，不同的设备其拥有的字体不尽相同，所以需要设置多个字体（字体族），若有字体没有，则会按照顺序依次往后直到该设备拥有的字体为止，通常最后一个字体需要为通用字体（族），以保证一定拥有可以显示的字体
通用字体族

Serif 衬线体：Georgia、宋体
Sans-Serif 无衬线体：Arial、Helvetica、黑体、微软雅黑
Cursive 手写体：Caflisch Script、楷体
Fantasy：Comic Sans MS、Papyrus
Monospace 等宽字体：COnsolas、courier、中文字体

Web Fonts（使用自定义字体）

@font-face {
    font-family:"Megrim";
    src:
  url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5Wjvl.qJZVam_hVUdI1w.woff2)
  format("woff2");
}

中英文皆可，中文字体因为比较大，所以需要一定的裁剪

种类：
- 关键字：small、medium、large
- 长度：px、em
- 百分数
注意事项：
- px为实际的像素大小
- em为相对于父元素的大小，即是父元素的em倍。例如父元素为20px，则子元素2em为40px
- 百分数为相对于父元素的大小。例如父元素为20px，则子元素80%为16px

字体效果

font-style: normal 正体
font-style: italic 斜体

字体的粗细

font-weight:100~900
font-weight: normal 表示 font-weight: 400
font-weight: bold 表示 font-weight:700
注：字体的粗细不一定都能选择100~900，要看该字体本身有无对应的粗细大小

字体的行高 line-height

概念：两行文字的基准线
表示方式：line-height: 1.6 表示实际行高为字体大小的1.6倍，如字体为20px，则实际行高为32px

font属性

font: style weight size/height family 表示可以把字体效果、粗细、大小/行高、样式全都写在一起，即写在font属性里

1.2.4 排版

关键字	含义	备注
text-align	对齐	属性值：left、center。right、justify（两端对齐）
spacing	文字间距控制	letter spacing每个字符之间的间距；words spacing每个单词之间的间距
text-indent	文本首行缩进
text-decoration	文本装饰	none、overline（上划线）等
white-space	处理空白符（空格和换行）	normal：默认处理，会将多个空格合并成一个空格 pre：保留所有空格和换行；pre-wrap：一行显示不下自动换行，即保留空格并且换行；pre-line:合并空格且换行 nowrap：强制不换行

CSS语言之初步认识 | 青训营

初步接触CSS语言

1.1 CSS语言简介

1.2 CSS语言是如何工作的

1.2.1 选择器 Selector

1.2.2 颜色 RGB

1.2.3 字体 font-family

1.2.4 排版