css篇四 文本样式（上）

css篇四文本样式（上）

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

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

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

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

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

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

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

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

1.颜色

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

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

css颜色与度量单位

p{

color:red;

}

第一段落

页面效果：

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

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

css颜色与度量单位

p:last-child{

color:red;

}

p:first-child{

color:lime;

}

p:nth-child(2){

color:navy;

}

第一段落

第二段落

第三段落

页面效果：

2.文字大小

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

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

css颜色与度量单位

p:last-child{

font-size:50px;

color:red;

}

p:first-child{

color:lime;

}

p:nth-child(2){

color:navy;

}

第一段落

第二段落

第三段落

页面效果：

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

3.文本倾斜

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

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

css颜色与度量单位

p:last-child{

font-size:50px;

color:red;

font-style:oblique;

}

p:first-child{

color:lime;

}

p:nth-child(2){

color:navy;

}

第一段落

第二段落

第三段落

页面效果：

下面给出一个表格：

值

表明

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

italic

表示使用斜体

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

4.字体加粗

设置字体是否加粗。

通过font-weight来设置

css颜色与度量单位

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;

}

第一段落

第二段落

第三段落

页面效果：

值

表明

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

bold 粗体

bolder 更粗的字体

lighter 轻细的字体

100~900之间的数字 600及之后是加粗，之前不加粗

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

5.文本字体设置

通过font-family来设置

css颜色与度量单位

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;