CSS文本

CSS文本

文本的颜色、字符间距,对齐文本,装饰文本,文本缩进设置。

文本缩进

使用text-indent属性对文本进行缩进。text-indent的值可以是长度,也可以是百分比,百分数要相对于缩进元素父元素的宽度。换句话说,如果将缩进值设置为 20%,所影响元素的第一行会缩进其父元素宽度的 20%。

p {
  text-indent: 20px;
}

将文本首行缩进20px。

水平对齐

使用text-align对文本设置对齐方式。有四个值,left、right、center、justify。分别为左对齐,右对齐,居中以及两端对齐。

p {
  text-align: center;
}

文本居中

字间隔

使用word-spacing对字(单词)间隔进行设置。
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing 设置一个负值,会把它拉近。

p {
  word-spacing: 20px;
}
单词间隔为20px

字母间隔

使用letter-spacing对字母或设置间隔。

p {
  letter-spacing: 20px;
}
字母间隔为20px

字符转换

使用text-transform对文本进行大小写转换。该属性有四个值,none、uppercase、lowercase、capitalize,分别为不设置,全大写,全小写以及首字母大写。

p {
  text-transform: uppercase;
}
全大写
p {
  text-transform: lowercase;
}
全小写
p {
  text-transform:capitalize;
}
首字母大写

文本装饰(加划线)

如果想对文本加划线或者链接去掉下划线,可以用text-decoration进行设置,该属性有四个值,分别为none、underline、overline、line-through,分别为不加划线,下划线,上划线,以及文本中间贯穿线。

p {
  text-decoration:underline;
}
下划线
p {
  text-decoration: overline;
}
上划线
p {
text-decoration: line-through;
}
贯穿线
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 缩进文本 text-indent 注释:允许使用负值。如果使用负值,那么首行会被缩进到左边。会产生一种“悬挂缩进”...
    EJRoxy阅读 1,513评论 0 1
  • text-indent 通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长...
    itachi阅读 872评论 0 0
  • 文本标签 em 与strongem和strong这两个标签都表示一个强调的内容em主要表示语气上的强调,在浏览器中...
    岸与海阅读 1,932评论 0 0
  • 长度单位 1.像素px:像素是我们在网页中使用得最多的一个单位,一个像素就相当于屏幕中的一个小点,我们的屏幕实际上...
    牛耀阅读 629评论 0 0
  • 文本标签 和 1.em标签用于表示一段内容中的着重点。(语气强调)2.strong标签用于表示一个内容的重要性。(...
    YU不忘初心阅读 782评论 0 0