CSS中的字体属性和文本属性总结

一.字体属性

css样式中，常见的字体属性有以下几种：

p{
	font-size: 50px; 		/*字体大小*/
	line-height: 30px;      /*行高*/
	font-family: 幼圆,黑体; 	/*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
	font-style: italic ;		/*italic表示斜体，normal表示不倾斜*/
	font-weight: bold;	/*粗体*/
	font-variant: small-caps;  /*小写变大写*/
}

1.用行高让单行文本居中

如果一段文本只有一行，如果此时设置行高 = 盒子高，就可以保证单行文本垂直居中。

2.font属性简写

字号、行高、字体三大属性

（1）字号：

	font-size:14px;

（2）行高：

	line-height:24px;

（3）字体：（font-family就是“字体”，family是“家庭”的意思）

	font-family:"宋体";

是否加粗属性以及上面这三个属性，可以连写：（是否加粗、字号 font-size、行高 line-height、字体 font-family）

格式：

	font: 加粗 字号/行高/ 字体

举例：

	font: 400 14px/24px "宋体";

上面这几个属性可以连写，但是有一个要求，font属性连写至少要有字号和字体，否则连写是不生效的（相当于没有这一行代码）。

举例：

font: bold italic 20px/1.5 'Courier New', Courier, monospace;

3.字体加粗属性

取值范围 normal | bold | bolder | lighter | 100 ~900。

.div {
	font-weight: normal; /*正常*/
	font-weight: bold;  /*加粗*/
	font-weight: 100;
	font-weight: 200;
	font-weight: 900;
}

在设置字体是否加粗时，属性值既可以填写normal、bold这样的加粗字体，也可以直接填写 100至900 这样的数字。normal的值相当于400，bold的值相当于700。

4.大小写转换

小写转大写：

span {
	font-variant: small-caps;
}
...

<span>xioafeixia</span>

  /* 首字母大小 */
  text-transform: capitalize;
 
  /* 全部大写 */
  text-transform: uppercase;

  /* 全部小写 */
  text-transform: lowercase;

二.文本属性

CSS样式中，常见的文本属性有以下几种：

• letter-spacing: 0.5cm ; 单个字母之间的间距

• word-spacing: 1cm; 单词之间的间距

• text-decoration: none; 字体修饰：none 去掉下划线、underline 下划线、line-through 中划线、overline 上划线

• text-transform: lowercase; 单词字体大小写。uppercase大写、lowercase小写

• color:red; 字体颜色

• text-align: center; 在当前容器中的对齐方式。属性值可以是：left、right、center（在当前容器的中间）、justify

• text-transform: lowercase; 单词的字体大小写。属性值可以是：uppercase（单词大写）、lowercase（单词小写）、capitalize（每个单词的首字母大写）

• text-indent:文本缩进，控制元素部的文本、图片进行缩进操作。

• vertical-align: 用于定义内容的垂直对齐风格，包括middle | baseline | sub | super 等。

• 排版模式

  模式	说明
  horizontal-tb	水平方向自上而下的书写方式
  vertical-rl	垂直方向自右而左的书写方式
  vertical-lr	垂直方向内内容从上到下，水平方向从左到右

1.空白处理

使用 white-space 控制文本空白显示。

h2 {
	white-space: pre;
	width: 100px;
	border: solid 1px #ddd;
}
...

<h2>xiao        fei     xia</h2>

2.overflow属性：超出范围的内容处理

overflow属性的属性值可以是：

• visible：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。
• hidden：不显示超过对象尺寸的内容。
• auto：如果内容不超出，则不显示滚动条；如果内容超出，则显示滚动条。
• scroll：Windows 平台下，无论内容是否超出，总是显示滚动条。Mac 平台下，和 auto 属性相同。