走进前端技术栈-CSS(2) | 青训营笔记

这是我参与「第五届青训营」笔记创作活动的第3天. 今天学习CSS，主要了解如何设置CSS样式。

文本样式

通过color属性设置，可以通过rgb或hsl进行设置。

rgb, 红色,绿色,蓝色的组合色.各维度取值是0-255.
HSL, 使用这种方法可以判断是否亮/饱和的颜色
- Hue : 色相,0-360, 色彩的基本属性
- Saturation, 饱和度, 0(灰色)-100%(鲜艳)
- Lightness, 亮度, 0(黑色)-100%(白色)
关键字, 如white, blue, gray等

alpha $∈[0,1]$ ,1是不透明.可以通过rgba/hsla的第四个值设置透明度.(新版浏览器可以省略rgba中的a)

通过font-family设置.例如

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

由于不同设备上具有的字体不同, 所以可以指定多个字体, 由浏览器选择设备上具有的字体.

通用字体组:

Serif 衬线体, 线条粗细不一样,末端有修饰.

Sans-Serif 无衬线体, 粗细一样,无修饰.

Cursive 手写体, Monospace 等宽字体

在最后一定要指定一个通用字体族, 避免展示效果与期望效果相差太大. 英文字体写在中文字体前面.

Web Fonts

从服务器上加载指定字体.

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

中文字体的字体文件一般比较大, 使用前应该裁剪出需要的字符再导入.

通过font-size设置, 可以使用以下方法设置。

下面列举了常用的属性及其可选属性值。

font-style : italic(斜体), normal(默认值, 非斜体), bold(粗体)

font-weight : 字体的粗细, 取值范围为 $[100,900]$ , 越大越粗. 需要字体支持的字重, 在设置时才有相应的效果

line-height : 行高,两行文字基准线的距离. 不带单位的行高表示自身字体大小的倍数.

上述属性可以用font : style weight/height family来设置.

text-align : left, center, right, justify(对最后一行不生效)

text-indent : 段落首行缩进

text-decoration : none(默认), underline(下划线), line-through(删除线), overline(上划线)

spacing : letter-spacing(字符之间的间距), word-sapcing(单词之间的间距)

white-space : 多个连续的空格或者换行会被合并成一个.通过white-space可以展示多个空格.

normal(默认), nowrap(强制不换行), pre(保留所有空格和换行), pre-wrap(保留空格, 自动换行), pre-line(合并空格,保留换行)

CSS还可以为列表和链接设置样式，更多文本样式的设置可以参考为文本添加样式（样式化文本） - 学习 Web 开发 | MDN (mozilla.org)

完成css代码的编写后，我们可以通过以下方式查看效果是否和我们期望的一致。