CSS常用文本属性主要有：text-decoration、text-indent、line-height、font、text-align、word-spacing、letter-spacing等等。。


CSS文本属性

  • 1、text-decoration 修饰线
  • 2、text-indent 首行缩进
  • 3、line-height 行高
  • 4、font属性复合写法
  • 5、text-align 行内内容水平位置
  • 6、word-spacing 字间距
  • 7、letter-spacing 字符间距


1、text-decoration 修饰线

/* 用于设置文本的修饰线外观的（下划线，上划线，贯穿线/删除线或闪烁） */
a {
  text-decoration: none; /* 去掉下划线 */
}
p {
  text-decoration: underline; /* 下划线 */
}
div {
  text-decoration: line-through; /* 删除线 */
}

/* text-decoration它是以下四个属性的简写 */
text-decoration-line: /* 文本修饰的位置，如underline，line-through */
text-decoration-color: /* 文本修饰的颜色 */
text-decoration-style: /* 文本修饰的样式，如wary,solid,dashed */
text-decoration-thickness: /* 文本修饰的粗细 */

/* 同时设置 波浪线 下划线 红色 粗细 */
text-decoration: wary underline red 5px;

2、text-indent 首行缩进

用于设置一段文本的首行向内缩的距离，一般缩进2个字符的间距；
 
常用单位是 em ，| 1em 是一个字符的宽度，2em则是2个字符的宽度。
 

/* p首行缩进为2个字符大小 */ p { text-indent: 2em; } div span { /* 如果父元素div的字体大小为20px，则span字体大小为40px， 因为父元素一个字符是20px，sapn是2个字符 */ font-size: 2em; }

3、line-height 行高

行高就是指一段文字所占的空间高度总高，然后文字在这个高度的垂直方向居中显示。
 

行高值的4种写法：
 

单位实例说明pxline-height:30px;行高为30px数值表示法line-height:2;行高为字体大小的两倍（推荐使用）百分比表示法line-height:200%;行高为字体大小的200%normalline-height:normal;取决于用户端，桌面浏览器使用默认值约为1.2，也取决于元素的font-family

注意：

  • 主段落内容的 line-height 至少应为 1.5 ；
  • 如果文字大小要随页面的缩放而变化，请使用无单位的值，以确保行高也会等比例缩放。

4、font属性复合写法

font属性可以用来作为 font-style, font-weight, font-size, line-height, font-family 属性的合写
 

/* 字体大小20px 行高为字体的2倍 字体类型微软雅黑，后备字体Arial */ font:20px/2 "微软雅黑",Arial; /* 字体倾斜 加粗 字体大小20px 行高为字体的2倍 字体类型微软雅黑，后备字体Arial */ font:italic bold 20px/2 "微软雅黑",Arial

font属性连写注意事项：

  • font属性连写时，必须设置 font-size 和 font-family 才能生效
  • font-style 和 font-weight 必须在 font-size 之前
  • 任何未指定的值都将设置为其对应的初始值
     

p { border: 1px solid red; /* 此行高不生效，因为font连写时，30px/行高，这里默认有行高了 */ /* line-height: 40px; */ font: bold 30px "宋体"; /* line-height 写在font下边，即可生效，此时时覆盖了font默认的行高 */ line-height: 40px; /* 注意：连写时，即使没有写行高，本质上它也是采用了默认的行高 */ }

5、text-align 行内内容水平位置

<style>
	/* 定义行内内容（例如文字，图片，行内块级元素）相对它的块级父元素的对齐方式 */
	div.left {
	  text-align: left;
	}
	div.center {
	  /* 文本居中对齐 */
	  text-align: center;
	}
	div.right {
	  text-align: right;
	}
</style>

6、word-spacing 字间距

/* 
用于设置英文单词之间的间距；
属性值为normal：正常的单词间距，由当前字体或/浏览器定义；
属性值为长度：通过指定具体的间距来增加英文的单词间距。
*/
word-spacing: 50px;

7、letter-spacing 字符间距

/* 
用于设置文本字符的间距；
属性值为normal：此间距是按照当前字体的正常间距确定的；
属性值为长度：指定文字间的间距以替代默认间距，可以是负值，如-10px。
*/
letter-spacing: 30px;



上一篇文章

下一篇文章

CSS常用属性之字体属性（三）

CSS常用属性之列表属性（五）