这是我参与「第四届青训营」笔记创作活动的的第2天。

CSS基础

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

在页面中使用css有三种办法，分别是：外链、嵌入、内联（不需要写选择器），推荐使用第一种外链；

<!-- 外链 -->
<link rel = "stylesheet" href = "/assets/style.css">

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

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

选择

用于找出页面中的元素，以便给他们设置样式。并且有多种方式选择元素：标签名、类名、id、属性、DOM树中的位置。

还有一种特殊的选择器，通配选择器。星号（*）表示匹配所有。

* {
    color: red;
    font-size: 20px;
}

伪类

可以不基于标签和属性定位元素，分为状态伪类、结构性伪类

状态性伪类：不是指具体的某一个元素，而是这个元素处于某一种特定的状态下才会被选中。比如链接区分访问过、未访问过、鼠标滑过状态等的，可以用伪类选择器去选择链接所处的不同状态，在不同状态下设置状态。

a:link {
    color: black;
}

a:visited {
    color: grey;
}

a:hover {
    color: orange;
}

a:active {
    color: red;
}

除了链接之外，其他一些元素也是有状态的，比如：输入框。

:focus {
    outline: 2px solid orange;
}

结构的伪类：根据你的DOM节点，在DOM树中出现的位置来决定是否选中这个元素

<ol>
    <li>阿凡达</li>
    <li>泰坦尼克号</li>
    <li>复仇者联盟</li>
</ol>

<style>
li:first-child {
    color: coral;
}

li:last-child {
    color:red;
}

更复杂的标签可以查询文档了解

对于前面讲到的标签、属性、类各种简单的选择器来说，我们可以通过组合的方式把它直接放在一块。如：

input.error {
    border-color: red;
}

有些情况下我们想同时给多个选择器定义相同的样式，就需要用到选择器组，即一组选择器。不同的组合方式也有不同的写法。

文本样式排版

颜色

颜色最常用的是RGB模式，但它和我们常用的颜色特征无法关联起来，无法想象出是什么颜色。更符合我们阅读习惯的颜色表示方法，HSL，在我们要对一个颜色做出改变时常用，也可以直接使用颜色英文名称。

字体font-family

字体是通过font-family这个属性来设置的，例如:

h1 {
  font-family: Optima, Georgia, serif;
}

这里我们发现一个font-family不是设置的一个特定的值，而是逗号分隔开的多个值。这里涉及到字体族的概念，即font-family而不是font，这里应该有多个。网页被不同设备访问，不同设备安装的字体不同，所以我们可以指定多个字体，然后设备按照从前到后的顺序有哪个字体就用哪个字体，是一个一层一层匹配的过程。

这里最后的serif或者是sans-serif不是某一个特定的字体，而是一类通用的字体族，CSS支持有五种通用的字体符。分别是衬线体，线条粗细不均一，在线条末端有修饰。无衬线体，线条均一，末端没有装饰。手写体。Fantasy,比较夸张一些的字体。等宽字体在我们编程的时候经常会用到，所有的字符宽度都是一样的。

需要注意的是，当我们在写一些字体的时候，记得要在最后一定加上一个通用的字体族。因为所谓的通用字体，做了一个分类，已经不是一种特殊的字体，比如说sans-serif，当设备上所期望的那些字体都没有的时候，起码浏览器会从设备上能用的字体里边去找一种也同样属于无衬线的，简洁的字体去展示，而不至于展示和期望的差别太大。

建议：在中英混排的一些字体族中，建议是英文字体写在中文字体的前边，因为实际的浏览器渲染是按逐个的字符去找对应的字符有没有相应的指定的字体。可以防止所有的字符都按照中文字体展示，使中文字体用中文字体，英文字体用英文字体。

Web Fonts

当我们确实想严格按照设计的要求去展示一些字体，可以用web-fonts，就是用字体文件放在服务器上，然后通过相应的写法，指定字体的名字，字体所在的url，就可以去用了。浏览器渲染的时候回去尝试从这个url先去下载这个文件，然后再用这个字体进行渲染。

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

注意：使用它会带来一些性能上的开销。

所以对中文字体使用web-fonts时，需要注意的是：中文字体一般字体包比较大，一般在大家需要用的时候，对原本的字体文件进行一些裁切，使用一些工具，就是把页面用到的字符给裁出来，用不到的字符丢到，这样的话就可以保证字体文件比较小。

font-size

除了颜色、字体，我们也可以设置字体大小font-size。

font-size的单位可以用px像素，em相对的单位即倍数，也可以用百分比。

字重font-weight

当我们在自己的页面设置100，200可能没什么区别，这是因为字重每一种规格是需要字体本身支持这么多种字重才可以的，并不是所有的字体在设计的时候都设计了这么多种。

行高

在排版的时候还有一个很重要的文字行高。

html默认的文字行高是非常不是很适合阅读的，差不多1.1，1.2这样的行高，但凡涉及多段的文字都要设置行高。行高指两行文字的基准线（base-line）之间的距离。

当我们使用没有单位的数字来设置行高时，表示行高时自身大小的多少倍。我们也推荐这样的写法，直观一些。

我们也可以把前面讲到的font-family,是不是斜体，自重，字号，行高等设置成一个属性，即font属性。其中不必须的内容可以省略。最简单的形式就是写font-size和font-family即可，其他都可省略。

理解CSS | 青训营笔记