文本与字体样式属性

常用文本样式属性

color属性

• color 属性可设置文本内容的前景色
• color 属性主要可以用英语单词、十六进制、rgb()、rgba()等表示法
• 英语单词表示法，比如color: red; 仅仅用于学习时临时设置一下颜色，工作时基本不用这样的形式，因为追求精确

color属性 - 十六进制表示法

• 十六进制表示法是所有设计软件中都通用的颜色表示法，设计师给我们的设计图上面标注的颜色，通常为十六进制表示
  color: #ff0000;
• 比如十六进制ff就是十进制的255，每种颜色分量都是0~255的数字
• 如果颜色值是#aabbcc的形式，可以简写为#abc
• 黑色是#000，白色是#fff，常见的灰色有#ccc、#333、#2f2f2f等

color属性 - rgb()表示法

• 颜色也可以用rgb()表示法
  color: rgb(255, 0, 0);
• 颜色也可以用rgba()表示法，最后一个参数表示透明度，介于0到1之间，0表示纯透明，1表示纯实心
  color: rgba(255, 0, 0, .65);
• rgba()表示法从IE9开始兼容

font-size属性

• font-size属性用来设置字号，单位通常为px。
  font-size: 30px;
• 网页文字正文字号通常是16px，浏览器最小支持10px字号

font-weight属性

• font-weight属性设置字体的粗细程度，通常就用normal和bold两个值

示例	意义
font-weight: normal;	正常粗细，与400等值
font-weight: bold;	加粗，与700等值
font-weight: lighter;	更细，大多数中文字体不支持
font-weight: bolder;	更粗，大多数中文字体不支持

font-style属性

• font-style属性设置字体的倾斜

示例	意义
font-style: normal;	取消倾斜，比如可以把天生倾斜的i、em等标签设置为不倾斜
font-style: italic;	设置为倾斜字体（常用）
font-style: oblique;	设置为倾斜字体（用常规字体模拟，不常用）

text-decoration属性

• text-decoration属性用于设置文本的修饰线外观的（下划线、删除线）

示例	意义
text-decoration: none;	没有修饰线
text-decoration: underline;	下划线
text-decoration: line-through;	删除线

字体属性详解

font-family属性

• font-family属性用于设置字体
  font-family: "微软雅黑";
• 字体可以是列表形式，一般英语字体放到前面，后面的字体是前面的字体的“后备”字体
  font-family: serif, "Times New Roman", "微软雅黑";
• 中文字体也可以称呼它们的英语名字

中文字体名	等价的英语字体名
font-family: “微软雅黑”	font-family: “Microsoft Yahei”
font-family: “宋体”	font-family: “SimSun”

• 字体通常必须是用户计算机中已经安装好的字体，所以一般来说设置为微软雅黑和宋体较多，设置成其他字体较少
• 如何设置为用户电脑中没有的字体呢？那就必须自己定义新字体，这就需要我们有字体文件，用户加载网页的时候，会同时下载这些字体文件

定义字体

• 字体文件根据操作系统和浏览器不同，有eot、woff2、
  woff、ttf、svg文件格式，需要同时有这5种文件
  定义字体
• 当我们拥有字体文件之后，就可以用@font-face定义字体

@font-face {
font-family: '字体名称';
font-display: swap;
src: url('eot字体文件地址');
src: url('eot字体文件地址') format('embedded-opentype'),
	url('woff2字体文件地址') format('woff2'),
	url('woff字体文件地址') format('woff'),
	url('ttf字体文件地址') format('truetype'),
	url('svg字体文件地址') format('svg');
}

段落和行相关属性

text-indent属性

• text-indent属性定义首行文本内容之前的缩进量，缩进两个字符应该写作
  text-indent: 2em;

line-height

• line-heigh属性的单位可以是以px为单位的数值
• line-heigh属性也可以是没有单位的数值，表示字号的倍数，这是最推荐的写法
• line-heigh属性也可以是百分数，表示字号的倍数

单行文本垂直居中

• 设置行高=盒子高度，即可实现单行文本垂直居中
• 设置text-align: center，即可实现文本水平居中
  

font合写属性

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

font: 20px/1.5 Arial, "微软雅黑";
font: italic bold 20px/1.5 Arial, "微软雅黑";

继承性

• 文本相关的属性普遍具有继承性，只需要给祖先标签设置，即可在后代所有标签中生效

• color
• font- 开头的
• list- 开头的
• text- 开头的
• line- 开头的

• 因为文字相关属性有继承性，所以通常会设置body标签的字号、颜色、行高等，这样就能当做整个网页的默认样式了

就近原则

• 在继承的情况下，选择器权重计算失效，而是“就近原则"

<div id="box1" class="box1">
	<div id="box2" class="box2">
		<div id= "box3" class="box3">
			<p>我是文字</p> /*绿色*/
		</div>
	</div>
</div>
#box1 #box2 #box3 {
	color: red;
}
p {
	color: green;
}

<div id="box1" class="box1">
	<div id="box2" class="box2">
		<div id= "box3" class="box3">
			<p>我是文字</p> /*蓝色*/
		</div>
	</div>
</div>
#box1 #box2 {
	color: red;
}
.box1 .box3 {
	color: blue;
}