文本缩进的使用-CSS入门基础（009）

最新推荐文章于 2024-07-19 23:54:44 发布

虾米大王

最新推荐文章于 2024-07-19 23:54:44 发布

阅读量901

点赞数

分类专栏： CSS 文章标签： css css3 javascript html5 html

本文链接：https://blog.csdn.net/modern358/article/details/110942428

版权

CSS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

今天我们接着分享关于文本样式的内容。

font-variant属性：

在CSS中，使用font-variant属性只有一个作用，就是把文本设置成小型的小写字母，此属性只针对英文而言。

语法：

font-variant:normal/small-caps;

font-variant属性
属性值	说明
normal	默认值，正常效果
small-caps	小型大写字母

示例代码：

<html>  <head>    <title>font-variant</title>    <style type="text/css">      #p1 { font-variant:normal;}      #p2 { font-variant:small-caps;}    </style>  </head>  <body>    <p id="p1">font-variant属性值为normal</p>    <p id="p2">font-variant属性值为small-caps</p>  </body></html>

此属性在英文国家能够见到，在中文网页中极少用到。

text-indent文本缩进：

我们在使用<p>标签的时候，首行文字是不会缩进的，在HTML中，我们通常使用“ ”空格来做进首行文本，但是这样冗余代码较多。在css代码中，我们可以使用text-indent属性来定义段落的首行缩进。

语法：

text-indent:像素值；

示例代码：

<html>  <head>    <title>文本缩进</title>    <style type="text/css">      #p1       {         font-size: 15px;      }            #p2       {        font-size:15px;        text-indent:30px;      }    </style>  </head>  <body>    <h3>文本缩进</h3>    <p id="p1">此行文本没有缩进。</p>    <p id="p2">此行文本有缩进。</p>  </body></html>

在css入门基础中，建议大家缩进时使用像素为单位，等到更加深入后，在学习其他的单位。

大家注意观察，这里有个小技巧，就是文本缩进一般都是需要缩进两个字的，那么我们就可以先设定字符的像素值，再设定缩进值是字符值的两倍。这样就可以达到缩进两个字的目的。

text-align文本对齐：

文本对齐分为，左对齐，居中对齐，右对齐。

语法：

text-align：属性值；

text-align属性取值
属性值	说明
left	默认值，左对齐
center	居中对齐
right	右对齐

text-align属性只能针对文本文字和img标签，对其他标签无效。

示例代码：

<html>  <head>    <title>对齐方式</title>    <style type="text/css">      div      {        width:400px;        height:300px;        border: 1px solid black;      }      #p1 { text-align:left;}      #p2 { text-align:center;}      #p3 { text-align:right;}    </style>  </head>  <body>    <div>      <p id="p1">虾米大王教你学编程系列之XXX</p>      <p id="p2">虾米大王教你学编程系列之XXX</p>      <p id="p3">虾米大王教你学编程系列之XXX</p>    </div>  </body></html>

因为p标签是块元素，是独占一行的，所以当你设置了文本对齐后，它是按照整个页面的宽度来计算对齐的位置的，此时我使用div包裹它们，是为了将宽度设定在一个小的范围内，便于观察。

line-height行高：

在这里纠正一个错误，就是很多书中，喜欢把line-height称为行间距，但其实整个叫法不严谨，因为行间距应该是指两行之间的距离，而line-height实际只是代表了行的高度。

语法：

line-height:像素值；

一般在css入门阶段，我们都是采用像素做单位的。

示例代码：

<html>  <head>    <title>行高line-height</title>    <style type="text/css">      div      {        width:400px;        height:300px;        border: 1px solid black;      }      #p1 {line-height:10px;}      #p2 {line-height:20px;}      #p3 {line-height:30px;}      #p4 {line-height:40px;}      #p5 {line-height:50px;}    </style>  </head>    <body>    <div>      <p id="p1">我是第1行</p>      <p id="p2">我是第2行</p>      <p id="p3">我是第3行</p>      <p id="p4">我是第4行</p>      <p id="p5">我是第5行</p>    </div>  </body></html>