CSS文字控制属性

CSS文字控制属性

• 一、字体大小
• 二、字体粗细
• 三、字体倾斜
• 四、行高
• 五、字体族
• 六、font复合属性
• 七、文本缩进
• 八、文本对齐方式
• 九、文字修饰线
• 十、文字颜色

一、字体大小

• 属性名：font-size
• 属性值：文字尺寸，常用单位像素（px）、百分比（%）
  例：

p {    
	font-size: 50px;
}

二、字体粗细

• 属性名：font-weight
• 属性值：数字、关键字
  例：

/* 不加粗 */
font-weight:400;
font-weight:normal;
/* 加粗 */
font-weight:700;
font-weight:bold;

三、字体倾斜

• 属性名：font-style
• 属性值：关键字
  例：

/* 倾斜 */
font-style:normal;
/* 不倾斜 */
font-style:italic;

四、行高

• 属性名：line-height
• 属性值：纯数字是字体大小的倍数，常用单位像素（px）
  例：

line-height:20px;
line-height:2;
/* 当前字体大小的二倍 */

五、字体族

• 属性名：font-family
• 属性名：字体名
  例：

font-family:楷体;

六、font复合属性

• 属性名：font
• 属性值：是否倾斜、是否加粗、字号/行高、字体
  例：

p {
	font:italic 800 40px/2 楷体;
}

注意：
字号和字体必须写，否者font不生效

七、文本缩进

• 属性名：text-indent
• 属性值：
  1.数字+px
  2.数字+em （推荐）（1em=当前标签字体大小）

例：

/* 缩进两个字 */
p {
	text-indent:2em;
}

八、文本对齐方式

• 属性名：text-align
• 属性值：
  1.left：左对齐（默认）
  2.center：居中对齐
  3.right：右对齐

例：

p{
	/* 设置文本居中对齐 */
	text-align:center;
}

九、文字修饰线

• 属性名：text-decoration
• 属性值：
  1.none:无修饰
  2.underline：下划线
  3.line-through：删除线
  4.overline：上划线
  例：

p {
	text-decoration:underline;
	/* 添加下划线 */
}

十、文字颜色

• 属性名：color
• 属性值：
  1.英文颜色单词（例：red）
  2.rgb(红,绿,蓝)（红绿蓝取值范围：0~255）
  3.rgba(红,绿,蓝,透明度)（透明度取值范围：0~1）
  4.十六进制表示法 （例：#ffcc00）

例：

color:red;
color:rgb(100,100,100);
color:rgba(100,100,100,0.5);
color:#ffcc00;
color:#fc0;