前端学习记录day3 常用的CSS文本属性与记忆方法 2021/09/23

昨天没有更新，八点多关了电脑想睡一会起来更新，但是一睡睡到第二天。今天更两篇，把昨天要写的和今天要写的一起写了吧。

在大学里，有很多同学都接触过前端，根据我们学校的安排，我们这一级都是在疫情在家的那个时候选这个实践课。有很多人都是接触到这个地方开始划水，放弃，很大程度上是因为属性太多。当时我也是这样，但后来自己模仿了几个静态页面以后发现其实很多情况下文本属性常用的就那么几个，并不太难记而且易于总结查找，实在有需要别的文本属性的时侯，查一查就行。下面这些比较常用的属性，其实根据它们的英文，还有它们的属性值是很容易记忆的。（一个很浅显的道理，把熟悉的事务和不熟悉的事务建立起联系可以帮助我们记忆，比如font-family: "微软雅黑"，即便你不认识font也可以知道微软雅黑是个字体类型，自然也就记住了font-family的意思。）

下面是总结的几个比较常用的属性（p1到p10为十段文本，对应效果图里面的1-10行内容，第九个是由两个属性实现的垂直居中的效果，background-color: gray; 设置背景颜色是为了帮助理解而设置的，关于这个效果的实现原理day4将做单独解释。）

        .p1 { color:red } /* 文字颜色 */
        .p2 { font-family: "微软雅黑" } /* 字体类型 */
        .p3 { font-size: 26px; } /* 文字大小（高度） */
        .p4 { font-weight: bold; } /* 文字加粗 */
        .p5 { font-style: italic; } /* 文字倾斜 */
        .p6 { text-indent: 60px; } /* 首行缩进 */
        .p7 { text-align: center; } /* 水平对齐方式 */
        .p8 { line-height: 100px; } /* 行高 */
        .p9 { height: 100px; background-color: gray; line-height: 100px;}  /* 垂直居中 */
        .p10 { text-decoration: underline; } /* 文本修饰 */

效果展示：

 根据注释和后面的属性值，与属性名建立联系，我们可以很容易的记住上面这几个属性。