时间：2021-07-01 10:21:17 帮助过：39人阅读
接下来，小编会随着上面图示的脉络，一一进行讲解，都是一下简单的知识，有兴趣的小伙伴，可以动手和小编一起来实现以下代码实例。
文字的字体
在CSS中，我们采用了font-family来控制文字的字体，接着，我们来看一个例子，以及运行效果：
效果如下：文字字体 送别
长亭外，古道边，芳草碧连天。晚风拂柳笛声残，夕阳山外山。天之涯，地之角，知交半零落。一瓠浊酒尽余欢，今宵别梦寒。长亭外，古道边，芳草碧连天。问君此去几时来，来时莫徘徊。天之涯，地之角，知交半零落。人生难得是欢聚，惟有别离多。
作者: 李叔同
分析上面的这段代码，我们先看h2里边，有“font-family:黑体,幼圆;"这个的意思是：h2标记的里边，若是有黑体就用黑体，没有黑体就用幼圆，下面的P标签和作者也是一样，效果如上图所示。
文字的大小
学习完了文字的字体，我们来看一下文字的大小，例子代码以及运行效果如下：
文字大小 文字大小，0.5in
文字大小，0.5cm
文字大小，4mm
文字大小，12pt
文字大小，2pc
效果如下：
上面的小例子，一共采用了无行来做对比，第一行.05in，第二行0.5cm，第三行4mm，第四行12pt，第五行2pc，从上面的代码我们可以看出来CSS控制文字大小是通过font-size来实现的。
文字的颜色
例子的代码和运行效果如下所示：
文字颜色 冬至的由来
冬至过节源于汉代，盛于唐宋，相沿至今。《清嘉录》甚至有“冬至大如年”之说。这表明古人对冬至十分重视。人们认为冬至是阴阳二气的自然转化，是上天赐予的福气。汉朝以冬至为“冬节”，官府要举行祝贺仪式称为“贺冬”，例行放假。《后汉书》中有这样的记载：“冬至前后，君子安身静体，百官绝事，不听政，择吉辰而后省事。”所以这天朝庭上下要放假休息，军队待命，边塞闭关，商旅停业，亲朋各以美食相赠，相互拜访，欢乐地过一个“安身静体”的节日。
唐、宋时期，冬至是祭天祭祀祖的日子，皇帝在这天要到郊外举行祭天大典，百姓在这一天要向父母尊长祭拜，现在仍有一些地方在冬至这天过节庆贺。
运行效果如下所示：
文字颜色的表示方法有很多种，看h2里边的color:rgb(0%,0%,80%),采用了百分比来显示，P标志采用了十六进制来表示，span标志则直接是blue。
文字的粗细
我们继续看文字的另外一个效果：粗细效果，我们为了一一显示文字的粗细，采用了非常多行来进行对比，例子代码和运行效果如下所示：
文字粗体 文字粗体
文字粗细:100 文字粗细:200 文字粗细:300 文字粗细:400 文字粗细:500 文字粗细:600 文字粗细:700 文字粗细:800 文字粗细:900 文字粗细:bold 文字粗细:normal 运行效果如下：
100、200、300、400都没有太大的区别，一直到500开始，他们的显示效果跟bold粗体是一样的，而100~400在直观上看跟normal是一样的。
文字斜体
文字的斜体，在CSS中控制斜体是通过font-style来控制的，如果是italic则表示是斜体，normal则表示是常规的。我们看例子代码以及运行效果：
文字斜体 文字斜体
文字斜体
文字斜体
下划线，顶划线，删除线
例子代码和效果如下所示：
文字下划线、顶划线、删除线 下划线文字，下划线文字
顶划线文字，顶划线文字
删除线文字，删除线文字
文字闪烁
正常文字对比
从上面的代码我们很明显的可以看出，text-decoration的属性里边，通过underline、overline、line-through、blink.进行效果显示。
英文字母大小写
例子代码和运行效果如下所示
英文字母大小写 quick brown fox jumps over the lazy dog.
quick brown fox jumps over the lazy dog.
QUICK Brown Fox JUMPS OVER THE LAZY DOG.
text-transform属性里边，capitalize（单词首字母大写）、uppercase（全部大写）、lowerca（全部小写）。我们的效果图进行了很好的对比。我们通过一个简单的实例来模拟google公司的logo，例子代码和运行效果如下所示：
Google Google
运行效果如下：
小编寄语：该博文，小编主要介绍了CSS的文字效果，包括文字的字体，文字的大小， 文字的颜色，文字的粗细，文字斜体，下划线、顶划线、删除线，以及英文字母的大小写，这些知识都是基本的CSS设置文字的一些知识，不难，关键就在于多动手，多实践，CSS让我们的界面活了起来，动了起来，BS学习，未完，待续......