css-文子和文本相关属性和值

一、文字相关的css样式属性

1.1 font-size设置字体大小属性

p{
	font-size:12px;
}

• 如果未设置，会继承父级的字体大小。
• 因为浏览器的限制，一般不能低于12px。低于会以12px显示
• 属性值不能取负值

1.2 font-weight 设置字体粗细

p{
	font-weight:normal|bold|bolder|lighter|number
}

• normal 默认值 正常显示
• bold 粗体。相当于number为700
• bolder 特粗体。相当于strong和b对象的作用
• lighter 细体
• integer 用数组表示粗细 100 200 300 400 500 600 700

1.3 font-style 字体样式

• normal （默认值）
• italic 指定文本字体样式为斜体。对于没有斜体变量的特殊字体，将应用oblique
• oblique 指定文本字体样式为倾斜的字体

1.4 font-family 设置文本的字体系列。

p{font-family:"Times New Roman", Times, serif;}

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。
注意：

• 中文字体需要加引号
• 英文字体一般不需要加引号
• 如果字体名中包含空格、#、$等符号，则必须加引号
• 多个字体之间必须使用英文状态下的逗号隔开
• 英文字必须位于中文字体之前
• 尽量使用默认字体

1.5 font-variant把段落设置为小型大写字母字体：

p.small
{
font-variant:normal|small-caps|inherit;
}

• normal 默认值。浏览器会显示一个标准的字体。
• small-caps 浏览器会显示小型大写字母的字体。
• inherit 规定应该从父元素继承 font-variant 属性的值。

二、文本相关的css样式属性

2.1 line-height 行高（允许负值）

p{
	line-height:normal|number|length|%|inherit	
}

2.2 text-indent 首行缩进

p{
	text-indent:length|number|%|inherit;
}

2.3 text-align 文本对齐方式

p {
	text-align:left|right|center|justify|inherit
}

2.4 letter-spacing 字符间距（可以为负值）

h1 {letter-spacing:number|}

2.5 word-spacing 单词间隔

p{word-spacing:length|normal|inherit}

2.6 vertical-align 基线对齐

img 
{ 
vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom|length|%|inherit; 
} 

2.7 text-decoraction 文本横线
上划线|下划线|删除线

h1 {text-decoration:underline|overline|line-through}

2.8 white-space 空白符处理

p 
{ 
white-space:nowrap|nowrap|pre|pre-wrap|pre-line|inherit; 
}

• normal 默认。空白会被浏览器忽略。
• pre 空白会被浏览器保留。其行为方式类似 HTML 中的

   标签。

• nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
  标签为止。
• pre-wrap 保留空白符序列，但是正常地进行换行。
• pre-line 合并空白符序列，但是保留换行符。
• inherit 规定应该从父元素继承 white-space 属性的值。

2.9 text-overflow 文本溢出处理

p{text-overflow: clip|ellipsis|string;}

• clip 修剪文本。
• ellipsis 显示省略符号来代表被修剪的文本。
• string 使用给定的字符串来代表被修剪的文本。