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标签里面的文本设置红颜色）
<!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>
页面效果：
好了，今天的内容就是这么多了。每天学习一点点，日积月累，你会发现你已经完全掌握编程了。记住要多动手练习。
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
