CSS3常用属性，CSS继承和层叠-CFANZ编程社区

CSS3常用属性

字体和文本

CSS字体属性定义字体，加粗，大小，文字样式。

所有的CSS字体属性

Property	描述
font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。

CSS文本属性定义字体颜色，文本对齐，行高等等

所有CSS文本属性

属性	描述
color	设置文本颜色
direction	设置文本方向。
letter-spacing	设置字符间距
line-height	设置行高
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
text-transform	控制元素中的字母
unicode-bidi	设置或返回文本是否被重写
vertical-align	设置元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

eg：字体文本

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i14zvApz-1646139333332)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220227113324622.png)]$

表格

CSS可以用于改变表格的外观

border指定表格边框，

border-collapse合并表格边框位单一边框，

表格内容水平对齐使用text-align，

内容垂直对齐使用vertical-align。

eg：简单的表格

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1pTkcD8L-1646139333333)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220227113648622.png)]$

table 标签表示这是一个表格，tr标签表示一行，th标签表示表头单元格，td标签表示数据单元格。

列表：

在 HTML 中，列表主要有两种类型：

· 无序列表（

）- 列表项用的是项目符号标记

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BhFunR8e-1646139333333)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220301082752360.png)]$

· 有序列表（

）- 列表项用的是数字或字母标记

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6e9Jq49k-1646139333334)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220301082804628.png)]$

CSS 列表属性使您可以：

· 为有序列表设置不同的列表项标记

· 为无序列表设置不同的列表项标记

· 将图像设置为列表项标记

· 为列表和列表项添加背景色

文本字体的CSS样式

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dFvsqnVt-1646139333334)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220301083128525.png)]$

——CSS的继承和层叠

继承：我们的CSS中很多的属性也是可以继承的，
	其中相当一部分是跟文字的相关的，比如说颜色、字体、字号。当然还有一部分是不能继承的。
	例如边框、内外边距。
	层叠：层叠是CSS的核心机制。层叠的工作机制：当元素的同一个样式属性有多种样式值的时候，
	CSS就是靠层叠机制来决定最终应用哪种样式。
	层叠规则：
	①层叠规则一：找到应用给每个元素和属性的声明。
	说明：浏览器在加载每个页面时，都会据此查找到每条CSS规则，
	并标识出所有受到影响的HTML元素。
	②层叠规则二：按照顺序和权重排序。
	按顺序：说明：浏览器依次检查CSS样式的来源，并设定匹配的属性，如果
	匹配的属性在下一个来源也有定义，则更新该属性的值，如此循环。
	权重排序：!important
	③层叠规则三：按特指度排序。
	计算特指度(ICE 公式)
	I C E
	id class Element
	1.选择器中有一个ID，就在I的位置上加1；
	2.选择器中有一个类(class),就在C的位置上加1；
	3.选择器中有一个元素(标签)名，就在E的位置上加1；
	4.得到一个三位数。得到的这个数就是我们的特指度。
	例如： I C E
	p 0 0 1 特指度=1
	p.largetext 0 1 1 特指度=11
	p#largetext 1 0 1 特指度=101
	body p.largetext 0 1 2 特指度=12
	body p#largetext 1 0 2 特指度=102

	④层叠规则四：顺序决定权重。
	说明：如果两条规则都影响到某元素的同一属性，而它们的特制度也相同，
	则位置最靠下的胜出。
	规则一：在特指度相同的情况下，按排列