前端速成-CSS | 02.CSS样式

1.颜色

• 十六进制值：#ff0000

• 颜色名：black,silver,white…

上述两种是比较常用的。颜色对照表：CSS 颜色

下方是对颜色进行更加细致的定义：

• RGB：rgb(255,0,0) 定义红、绿、蓝

• RGBA：rgb(255,0,0,0.8) 定义红、绿、蓝，不透明度为80%

• HSL：hsl(0,100%,50%) 定义色相、饱和度、明度

• HSLA：hsl(0,100%,50%,0.8) 定义色相、饱和度、明度，不透明度为80%

2.字体

2.1.font-family：字体样式

• sans-serif：无衬线体，平滑时尚
• monospace：等宽字体
• 可以指定多个字体，越靠前的字体优先级越高
• 若字体由多个单词组成(中间有空格)，需要用引号括起

2.2.font-size：字体大小

值为对应的像素值

2.3.font-weitht：字重

可以理解为加粗的程度。值有如下：

可用值	值的说明
normal	默认值(400)
bold	加粗(700)
lighter	比父对象更淡一些
bolder	比父对象更粗一些
100-900	数值越大，字体越粗

说明一下lighter和bolder：

.parent {
    font-weight: normal;
}

. child {
    font-weight: bolder;
}

<div class="parent">
    内容1：字重为"normal"
    
    <div class="child">
        内容2：字重为"bolder"，由于父级为"normal"，因此这里的字体采用"bold"
    </div>
</div>

border和lighter都是相对于其父对象而言的。

2.4.font-style: 字体风格（是否倾斜）

常用值	描述
normal	默认
oblique	倾斜

值得一提的是，"italic"的作用也是使字体倾斜，但这里是使用字体自带的倾斜方式。若某些字体中没有倾斜的样式，使用"italic"便没有效果。

italic和oblique的区别

2.5.实践

3.其他样式设置

3.1.line-height：行高

特殊用法：当line-height（行高）和height（字体高度）相同时，字体便可以垂直居中

3.2.word-spacing：单词字间距

需要注意的是：这只对英文单词有效，对中文汉字是无效的！

3.3.letter-spacing：字间距（汉字、字母有效）

3.4.text-decoration：下划线、删除线等

3.5.text-transform：大小写相关设置