• :一大波赠书活动正式来袭!满足条件的小伙伴每人赠送一本书,只限前100名!小伙伴们赶紧到碗里来!查看详情

3.8 文本样式总结

CSS文本样式

大家可以对着这张图,来想一下相应的CSS属性叫什么。

表1 CSS文字属性
属性 说明
font-family 字体类型
font-size 字体大小
font-weight 字体粗细
font-style 字体斜体
color 颜色

一、字体类型font-family

语法:

font-family:字体名;

说明:

字体名指的是“微软雅黑”、“宋体”、“Times New Roman”等。

举例:“font-family:微软雅黑;”

二、字体大小font-size

语法:

font-size:像素值;

说明:

初学者尽量使用像素来作为单位,因此我们不会在初学者阶段介绍太多的其他单位,比如百分比、em等。

举例:“font-size:15px;”

三、字体颜色color

语法:color:关键字/颜色值;

说明:

color共有2种取值,一种是关键字取值,例如“color:red;”;另外一种是十六进制颜色值,例如“color:#F1F1F1;”。对于十六进制颜色值,我们可以使用绿叶学习网的“在线调色板”选取你喜欢的颜色。

举例:“color:blue;”

四、字体粗细font-weight

语法:

font-weight:取值;

说明:

对于中文网页来说,font-weight属性一般仅用到bold、normal这两个属性值完全就可以了,粗细值不建议使用数值(100~900)。

举例:“font-weight:bold;”

五、字体斜体font-style

在CSS中,使用font-style属性来定义字体倾斜效果

语法:

font-style:取值;

说明:

font-style属性的取值如下表:

表1 font-style属性
font-style属性值 说明
normal 默认值,正常体
italic 斜体,这是一个属性
oblique 将字体倾斜,将没有斜体变量(italic)的特殊字体,要应用oblique

举例:“font-style:italic;”

五、CSS注释

语法:

/*注释的内容*/

说明:

“/*”表示注释的开始,“*/”表示注释的结束。

附录

大家在这一章的学习中,可能都有感觉到绿叶学习网的不同之处了。在“CSS入门教程”这个教程里面,我们会根据实际应用在各个章节给大家穿插各种小技巧。更重要的是,我们会告诉读者哪些属性值该记忆,哪些压根儿用不上,这样大大提高读者的学习效率。因为鄙人嘛,曾经深受其害,当初学习都是一头扎进去,什么都学,过一段时间又忘记,然后又接着回去复习。到最后自己大量实践的时候,发现很多记忆的知识点都用不上,浪费了我不少脑细胞。希望我这些心血与经验,能够换取大家的时间,生命是短暂的,来不得我们奢侈地挥霍那……

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

如果你想要获取更多学习资料,或者在学习过程中遇到疑问想要得到跟教程一样最优质的解答,请通过以下方式关注我们:

(1)官方微博:

(2)新手Q群:69660533(暗号:lvye)(建议初学前端的加)

(3)官方Q群:457631216(暗号:lvye)(建议有JS基础的加)

(4)绿叶论坛:进入论坛

(5)常见问题:绿叶学习网常见问题解答

回到顶部