css篇四文本样式（上）

2022-11-29 08:51:14 网站UI设计 ℃

　　通过前面几篇文章的介绍，相信大家对css层叠样式表已经有了大概的了解和认识了，最起码要知道它到底是做什么用的。也就是所谓的应用场景，光是学会，但是不知道怎么使用，那相当于没学。

　　这里再次说明css的作用就是给html标签指定样式的，不论是淘宝还是京东再或者是其他的网站都是用html+css+JavaScript来实现界面的，界面就是让用户能看得见摸得着的东西，通过界面就可以查看商品、浏览商品、选购商品，最终完成交易，赚到钱。所以说html、css、JavaScript是学习编程的基础。

　　废话不多说，开始今天的内容。css选择器可以让我们定位hmtl标签，只有定位到html标签，我们才能给html标签指定样式。样式的大小怎么设置，就需要我们对css的度量单位有所了解。就和你上街买菜一样，你光说要买白菜，卖菜的肯定会问你，买多少啊？如果你不告诉卖菜的你要买多少，那卖菜的应该卖给你多少呢？

　　css的度量单位就是解决这里多少的问题。

　　ok，了解了以上内容，接着我们再来了解，css的都有哪些样式，具体应该怎么使用。

　　文本样式，什么是文本呢？就是文字啊。现在想一想文字可以有哪些样式呢？

　　这不禁让我想起一个故事：两个人因为某件事情，争论不下。所以决定用比文（相对于比武）的方式来论输赢，做决定。其中有一题便是：怎么用黑笔写出红字来？（大家可以思考一下）

　　这里说的黑、红就是颜色，html里面的文本也就是文字可以有颜色，还可以有大小，还可以有粗细、还可以有倾斜、还可以在文字下面画一个横线叫下划线、还可以在中间画一道线叫删除线、还可以设置字体样式：像宋体、楷体、微软雅黑等等...（尽情发挥你的想象，看看文本还可以有哪些样式吧）

　　1.颜色

　　css给文本设置颜色通过：color来指定。前面几篇中我用了大量的color来指定html标签的颜色。

　　具体演示，看代码：（我们给p标签里面的文本设置红颜色）

　　<!DOCTYPE html><html><head> <title>css颜色与度量单位</title> <style> p{ color: red; }</style></head><body> <p>第一段落</p></body></html>页面效果：

　　这里只有一个p标签，所以我们利用元素选择器可以很好地定位到p标签，如果我们有很多p标签，而你想给每个p标签设置不同的颜色该怎么做呢？（如果想不起来的同学，可以返回去看看css选择器）

　　我们可以通过伪类选择器进行精确地指定第一个第二个第三个，分别给他们指定不同的颜色。当然，你也可以使用id选择器或者类选择来精确定位。

　　<!DOCTYPE html><html><head> <title>css颜色与度量单位</title> <style> p:last-child{ color: red; } p:first-child{ color:lime; } p:nth-child(2){ color: navy; }</style></head><body> <p>第一段落</p> <p>第二段落</p> <p>第三段落</p></body></html>页面效果：

　　2.文字大小

　　文字的大小通过font-size来指定

　　将第三个（也就是最后一个）p的文本大小设置为50px（px为css的度量单位，还不知道px是什么的同学，可以返回去看看css度量单位那一篇）

　　<!DOCTYPE html><html><head> <title>css颜色与度量单位</title> <style> p:last-child{ font-size: 50px; color: red; } p:first-child{ color:lime; } p:nth-child(2){ color: navy; }</style></head><body> <p>第一段落</p> <p>第二段落</p> <p>第三段落</p></body></html>页面效果：

　　这里再啰嗦一句，css叫层叠样式表，层叠的意思就是可以把很多样式叠加作用在一个html标签上，来达到样式的丰富多彩。这里我们不仅给最后一个p设置了红色还把字号变成了50px，下面的例子中，我们可以一直往上叠加更多样式。

　　3.文本倾斜

　　文本是否倾斜通过font-style来设置

　　将第三个p标签的文本倾斜

　　<!DOCTYPE html><html><head> <title>css颜色与度量单位</title> <style> p:last-child{ font-size: 50px; color: red; font-style: oblique; } p:first-child{ color:lime; } p:nth-child(2){ color: navy; }</style></head><body> <p>第一段落</p> <p>第二段落</p> <p>第三段落</p></body></html>页面效果：

　　下面给出一个表格：

　　值

　　说明

　　normal

　　表示让倾斜状态恢复到正常状态

　　italic

　　表示使用斜体

　　oblique

　　表示让文字倾斜。区别在没有斜体时使用

　　4.字体加粗

　　设置字体是否加粗。

　　通过font-weight来设置

　　<!DOCTYPE html><html><head> <title>css颜色与度量单位</title> <style> p:last-child{ font-size: 50px; color: red; font-style: oblique; font-weight: bold; } p:first-child{ color:lime; } p:nth-child(2){ color: navy; }</style></head><body> <p>第一段落</p> <p>第二段落</p> <p>第三段落</p></body></html>页面效果：

　　值

　　说明

　　normal

　　表示让加粗的字体恢复正常

　　bold

　　粗体

　　bolder

　　更粗的字体

　　lighter

　　轻细的字体

　　100~900之间的数字

　　600及之后是加粗，之前不加粗

　　在目前计算机和浏览器显示中，只有bold加粗，其他更粗更细，目前体现不出来。

　　5.文本字体设置

　　通过font-family来设置

　　<!DOCTYPE html><html><head> <title>css颜色与度量单位</title> <style> p:last-child{ font-size: 50px; color: red; font-style: oblique; font-weight: bold; font-family: 宋体; } p:first-child{ color:lime; } p:nth-child(2){ color: navy; }</style></head><body> <p>第一段落</p> <p>第二段落</p> <p>第三段落</p></body></html>页面效果：