CSS3基础（2）

CSS3基础(2)

常用文本样式属性

color属性

color属性可以设置文本内容的前景色。color属性主要可以用英文单词、十进制、 rgb()、rgba()、等表示方法，其中rgba表示法是从IE9开始兼容的。
例如：

	color: red;
	color: #ff0000;
	color: rgb(255,0,0);
	color: rgba(255,0,0,.65);	/* 最后一位表示透明度，0表示纯透明，1表示不透明。 */

采用十六进制表示法：#abcdef，如果为#aabbcc的形式，可以简写为#abc。
黑色为：#000，
白色为：#fff，
灰色有：#ccc、#333、#2f2f2f等。

font-size属性

font-size属性用来设置字号，单位通常为px。
正文字号通常为：16px，浏览器最小支持10px字号。
例如：

	font-size: 30px;

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: serif, “Times New Roman”, “微软雅黑”;

“微软雅黑” = “Microsoft Yahei”
“宋体” = “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');
	}

阿里巴巴普惠体

地址：https://www.iconfont.cn/webfont

段落与行相关属性

text-indent属性

text-indent属性定义首行文本的内容之前的缩进量。
例如：text-indent: 2em;
em表示字符宽度

line-height

line-height用于定义行高。
行高就是行的顶部到下一行的顶部之间的距离。

line-height属性可以用px做单位
例如：

	line-height: 30px;

line-height属性也可以用没有单位的数字，表示字号的倍数。

	line-height: 1.5;

line-height属性还可以用百分号表示字号的倍数

	line-height: 150%;

单行文本居中

设置行高等于盒子高，即可实现单行文本居中。

设置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- 开头的

	.box {
		font-size: 30px;
		line-height: 1.5;
		font-weight: bold;
		font-family: "宋体";
		text-align: center;
		text-decoration: underline;
		font-style: italic;
		color: red;
	}	

	<div class="box">
		<ul>
			<li>列表项</li>
			<li>列表项</li>
			<li>列表项</li>
			<li>列表项</li>
		</ul>
	</div>

上面的li标签中继承了div中的样式。

就近原则

当在继承的情况下时，选择权重计算失效，而是“就近原则”。
例如：

	<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;
	}

这时将会采用第二个样式，因为直接选中的，比继承的更接近该标签。

	#box1 #box2 {
		color: red;
	}
	.box1 .box3 {
		color: blue;
	}

这里我们发现两个样式都是继承性的样式，但是 .box3 比 #box2 更接近该标签。所以使用.box1 .box3 的样式。