编程技术文章分享与教程

网站首页 > 技术文章 正文

css篇四 文本样式(上) css设置文本

hmc789 2024-11-09 13:04:06 技术文章 2 ℃

通过前面几篇文章的介绍，相信大家对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>

页面效果：

好了，今天的内容就是这么多了。每天学习一点点，日积月累，你会发现你已经完全掌握编程了。记住要多动手练习。

Tags：

猜你喜欢

标签列表
最新留言