HTML5基础——8、常用文本元素的CSS属性

原创已于 2025-10-18 07:53:18 修改 · 1k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css #前端 #文本元素 #属性

于 2025-10-16 15:00:00 首次发布

H5 专栏收录该内容

46 篇文章

订阅专栏

大家好，我是阿赵。继续学习H5，这次学习几种常见的文本类属性。

一、字体属性

先看例子

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p {
      color: red;
      font-family: 微软雅黑;
      font-weight: bold;
      font-size: 20px;
      font-style: italic;
    }

    div {
      color: blue;
      font-family: 'Times New Roman', Times, serif;
      font-weight: normal;
      font-size: 16px;
      font-style: normal;
    }
  </style>
</head>

<body>
  <p>这是一个p</p>
  <div>这是一个div</div>
</body>

在这个例子里面，有p和div这2种标签。
然后通过指定css样式，除了color以外，其他几个都是和字体有关的，分别是：
font-family: 字体
font-weight: 字体粗细
有normal不加粗，bold加粗和指定值100-900，其中400等同于normal，700等同于bold，注意这个数字不需要带单位
font-size: 字体大小
指定字体，注意需要带单位，比如20px;
font-style: 字体风格
normal:默认样式，italic:斜体

字体复合写法：
刚才多个属性可以写在一行，比如：

p {
  font: italic bold 20px/30px "微软雅黑";
}

注意顺序：

font: font-style font-weight font-size/line-height font-family;

二、文本属性

1、基础属性

例子：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p {
      color: red;
      text-align: center;
      text-decoration: underline;
      text-indent: 2em;
      line-height: 20px;
    }
  </style>
</head>

<body>
  <p>这是一个p</p>
</body>

运行效果：
在这里插入图片描述

其中使用到的属性：
color: 字体颜色
text-align: 对齐方式
取值是：

left 左对齐
right 右对齐
center 居中对齐
其中left是默认值。

text-decoration: 装饰文本
取值是：
4. none 没有装饰线
5. underline 下划线
6. overline 上划线
7. line-through 删除线

text-indent: 文本缩进
注意需要带单位，比如10px，固定缩进10个像素，或者2em，缩进2个字符
line-height:行间距
注意需要带单位，比如 20px;

2、垂直居中显示文本

需要注意一个问题：
文本的对齐方式是水平对齐的，这里会遇到一个问题，比如我想一个文字在一个框里面水平和垂直都居中，我们可能会这样写：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      border: 1px solid black;
      text-align: center;
      width: 400px;
      height: 40px;
    }
  </style>
</head>

<body>
  <div>这是一个居中的文本</div>
</body>

这时候的显示是这样的：
在这里插入图片描述

可以发现，水平居中了，但垂直并没有居中。这时候我们可以利用一下line-height属性做一点修改：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      border: 1px solid black;
      text-align: center;
      width: 400px;
      height: 40px;
      line-height: 40px;
    }
  </style>
</head>

<body>
  <div>这是一个居中的文本</div>
</body>

主要是加了

line-height: 40px;

这时候的显示：
在这里插入图片描述

文本就完全居中了。所以文字垂直居中，可以把line-height设置成和父元素的height一样。

3、文字阴影

可以通过text-shadow添加文字阴影

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      border: 1px solid black;
      width: 400px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      font-size: 30px;
      text-shadow: 10px 10px 10px black;
    }
  </style>
  </style>
</head>

<body>
  <div>这是有影子的文本</div>
</body>

显示效果：
在这里插入图片描述

其中text-shadow是4个参数分别是x偏移、y偏移、模糊度和影子颜色。

4、溢出文字显示省略号

我们经常会看到有些网站，它的某个区域固定了宽度，然后有时候某些行的字会太多显示不完，后面就自动用了省略号来显示。
先看例子：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 30px;
    }

    #text1 {
      margin: 0 auto;

    }
  </style>
</head>

<body>
  <div id="text1" class="box">这是一行很长的话，太长显示不完</div>
  <div id="text1" class="box">据说一行字不能太长，不然会换行</div>
  <div id="text1" class="box">所以我们需要使用text-overflow:ellipsis;来处理</div>
</body>

显示：
在这里插入图片描述

本来这里有3段话，但由于div指定了宽度，所以显示不完，默认就换行了。
接下来修改一下，加上white-space: nowrap;取消自动换行：

#text1 {
margin: 0 auto;
white-space: nowrap;
}

现在变成了：
在这里插入图片描述

然后我们再加上overflow: hidden;让超出div宽度的部分隐藏掉：

#text1 {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
}

现在显示：
在这里插入图片描述

最后，加上text-overflow: ellipsis;让隐藏的部分加上三点省略：

#text1 {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

现在的显示：
在这里插入图片描述

在这里插入图片描述

HTML5基础——8、常用文本元素的CSS属性

一、 字体属性

二、 文本属性

1、基础属性

2、垂直居中显示文本

3、 文字阴影

4、 溢出文字显示省略号

一、字体属性

二、文本属性

3、文字阴影

4、溢出文字显示省略号