这是我参与「第五届青训营」伴学笔记创作活动的第 2 天。今天我学习了CSS(cascading style sheets)部分的内容。CSS作为前端中的样式部分，学习内容与视觉效果直接相关，与我的专业有一定联系，十分有趣。

使用方式

外链 <link rel=""href="">
嵌入<style></style>
内联<p style=""></p >

然后经过以下过程成功呈现在页面中

微信图片_20230116182842.jpg

选择器

通配选择器
标签选择器
id选择器
类选择器
属性选择器
伪类
组合
选择器组

选择器的特异度也决定了规则的效力

微信图片_20230116182847.jpg

界面特性

颜色(color表示字体颜色background-color表示背景颜色)

RGB (red green blue)

我认为这两个最基本的可以记住 #000000黑色 #ffffff白色还有几种我个人比较喜欢的颜色 #c8d2c4 #646c9c #D7CCB6安利给大家

HSL (hue saturation lightness)

我个人不太会用这个

alpha透明度

0完全透明 100不透明

文字

字体（font-family）

以下几种比较养眼

'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
Cambria, Cochin, Georgia, Times, 'Times New Roman', serif
Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS

我一般使用vscode写，给定的字体较为有限，可使用网络上的字体,代码如下： .body { font-family: "Megrim"; src: url() format()；

其他

font-size line-height letter-space text-space等一般注意单位即可

text-align文字排版

text-decoration文字样式

Italic意大利斜体挺好看line-through可以做出完成任务的效果

继承

显式继承 *｛ font-size:inherit ｝

布局

content可用height和width进行改变 border有多种属性，设置出多种边框样式 margin和padding决定内外边距

微信图片_20230116182850.jpg

排版

一般排版分为行级、块级、table、flex和grid几种来进行

overflow

我个人认为算是排版的特殊情况，可通过visible hidden scroll 三种使得溢出的文字得到不同的排版方式

float

可以将几个不同的块放在同一行，使布局更美观

位置

position分为static 、relative(感觉比较复杂）、 absolute、 fixed(网站里的小广告应该就是这么来的)

总结

个人认为CSS部分知识点并不难理解，但知识点细碎，这个部分我认为比较个性化，可以体现个人风格特征，是比较有趣的。

[CSS|青训营笔记]