颜色

RGB体系

通过红绿蓝三原色相互叠加来得到各种各样的颜色

用 rgb(r,g,b)函数 和 六位十六进制数字前面加# 来指定颜色

#ff0000
rgb(20，20，20)

HSL体系

HSL即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）。

色相(H)是色彩的基本属性,就是平常所说的颜色名称,如红色,黄色等。

饱和度(S)是指色彩的纯度,越高色彩越纯,低则逐渐变灰,取0-100%的数值。

明度(V),亮度(L),取0-100%.

hsl(20,51%,56%)

关键字表达

red blue 等CSS关键字

透明度

alpha表示不透明度,取值为0~1

用 rgba(r,g,b,a)函数 和 八位十六进制数字前面加# 以及 hsla(h,s,l,a)函数 来设置

#ff0000bd
rgba(255,0,0,0.74)
hsla(0,100%,40%,0.74)

字体

浏览器渲染字体依赖本地已经安装的字体,不同的设备本地已安装的字体可能不同，所以需要多指定几个字体，浏览器会按顺序选择

通用字体族

当指定的字体都不能使用是,系统可以选择一个相近的字体进行渲染，避免不同设备所渲染出的页面差异太大

衬线体(serif)

衬线体时一中在字的开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。

如宋体中文,Genrgia英文等

无衬线体(Sans-Serif)

无衬线体通常是机械的和统一线条的，它们往往拥有相同的曲率，笔直的线条，锐利的转角。

如黑体，微软雅黑中文，Arial,Helvetica英文等

手写体(Cursive)

手写体是一种使用硬笔或者软笔纯手工写出的文字，手写体文字代表了中国汉字文化的精髓。

如Caflisch Script英文，楷体等

Fantasy

一类比较夸张的字体，类似与狂草

如Papyrus等

等宽字体(Monspace)

等宽字体是指字符宽度相同的电脑字体，一般编程时IDE里设置的是等宽字体,不管是大写W还是小写l占用的宽度都是一样的。 如中文字体，Consolas等

font-family属性

font-family是设置默认字体类型的属性

1.字体列表最后写上通用字体族
2.英文字体放在中文字体前面(中文字体包含英文，可能会使后面指定的英文失效，导致中英文都是中文指定的字体)

Web Fonts使用

也可以把字体当成一个资源，在页面上引用，以服务器上的字体进行渲染

<h1>Web fonts are awesome!</h1>
<style>
   @font-face {
      font-family: "Megrim";
      src: url("https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_HVUdI1w.woff2");
   }
   h1 {
      font: Megrim,Cursive;
   }
</style>

font-size使用

设置字体大小

关键字

small medium large

长度

px : 像素值

em : 使相当于父元素多少的倍的相对大小

百分制

也是相对父元素字体大小

font-style属性

可以设置字体的粗细，或者粗体，斜体等类型

normal 为正常字体

italic 为斜体

font-weight属性

设置字体的粗细，可以在100到900之间取整百的值，其中400对应normal，700对应boid，很多系统只有normal和bold，如果设置的字重系统中没有，浏览器会自动选择最为接近的字重

line-height

设置每一行文字的基线(baseline)之间的距离

如果设置的该属性带有单位px，则基线之间距离为所设置的距离
如果设置的该属性不带有单位，则基线之间的距离为字体大小*设置的数字

font属性

在font属性中可以同时指定上述所有字体属性

顺序为：是否斜体 粗细 大小/行高 字体族

h1 {
   /* 斜体 粗细 大小/行高 字体族 */
   font: bold 30px/1.7 "Helvetica" ;
}

p {
   /* 最简单的只需写一个字号和字体 */
   font: 14px Serif;
}

text-align属性

针对一段文字有对其的问题，text-align设置对其的方式

left ：左对齐

center ：剧中对齐

right ：右对齐

justify ：两端对齐，通过调整字或单词之间的间距达到两端对齐的效果，并且对最后一行不会生效

spacing间距

可以调整间距 letter-spacing 属性 ：调整字母或字符之间的间距

word-spacing属性 ：调整单词与单词之间的距离，其实是调整空格的距离

text-indent缩进

设置一段文字段首的缩进，默认值是0，可以是负值

txet-decoration装饰

对文本加一些装饰性的效果，默认值是none

underline ：下划线

line-through ：删除线

overline ：上划线

white-space 控制空白符属性

默认情况下，html会将多个连续的空白符合并成一个空白符，white-space可以控制保留多余的空白符

normal ：正常合并

nowrap ：不换行，所有的文字都在一行内进行展示，超出显示范围是会加一个横向滚动跳进行调整，但多个空格会被合并

pre ：保留所有的换行和空格

pre-wrap ：一行内显示不下时会换行，能显示下不会换行

pre-line ：合并空格但保留换行