一、CSS基础属性
举列：h1{ color:red; text-align: center; } 选择器：h1 声明块：{color:red; text-align: center;}
二、CSS选择器
CSS选择器，决定了将规则应用到哪些元素上
三种基本选择器：元素选择器、类选择器、ID选择器
除此之外，CSS还提供了大量的选择器
三、声明冲突
四、层叠概述
什么是层叠：层叠是一种机制，用于解决CSS声明冲突
多个相同的CSS声明(属性)，应用到同一个元素上
五、层叠过程：
比较优先级：每一个声明都有一个优先级
当发生冲突时，优先级高的会保留，优先级低的会被淘汰
一个声明的优先级，与它的来源和重要性有关
1．浏览器默认样式表中的声明
2．用户样式表中的普通声明
3．作者样式表中的普通声明
4．作者样式表中的重要声明
5．用户样式表中的重要声明
优先级由低到高排序
比较特殊性：每一个声明都有一个特殊性(Specificity)
当发生冲突时，特殊性高的会保留，特殊性低的会被淘汰
一个声明的特殊性，取决于规则适用范围的大小
规则适用范围越大，特殊性越低，适用范围越小，特殊性越高
具体规则：
示列：
每一个声明都有一个特殊性(Specificity)
当发生冲突时，特殊性高的会保留，特殊性低的会被淘汰
一个声明的特殊性，取决于规则适用范围的大小
规则适用范围越大，特殊性越低，适用范围越小，特殊性越高
比较源次序：
最后出现的声明胜出，其他的全部淘汰
该规则的实际应用：
CSS Reset代码前置
a元素的伪类书写顺序
六、继承
继承：继承(inherit)，指子元素会自动拥有父元素的某些CSS属性
CSS代码：body{color:red}
HTML代码：
<body> body中的内容 <p>p元素中的内容</p> </body>
p元素自动拥有了父元素body的color属性
总结
美化文本：
第一部分
字体大小【font-size】
含义：字符框的高度
可继承
默认值：medium
取值
预设值【了解】
medium：中等字号
larger：大字号
smaller：小字号
数值：
px【常用】：绝对字体大小
em【常用】：相对于父元素的字体大小，若没有父元素，则使用基准字号
基准字号：浏览器设置的默认字体大小，通常为16px，可更改
%：原理同em，例如200%，相当于2em，50%，相当于.5em
rem：相对于基准字号
加粗字体【font-weight】
将【font-weight】设置为【bold】，以加粗文字，该属性可继承
倾斜字体【font-style】
将【font-style】设置为【italic】，以倾斜文字，该属性可继承
字间距【letter-spacing】
设置【letter-spacing】的值为px或em，可控制文字间的间隙，该属性可继承
首行缩进【text-indent】
可实现第一个文字向后缩进
给文字划线【text-decoration】
设置【text-decoration】属性，可以给文字划线
第二部分
修饰首字母【伪元素选择器 ::first-letter】
【::first-letter】可选中元素中的第一个文字
修饰首行【伪元素选择器 ::first-line】
【::first-line】可选中元素中的第一行文字
修饰选中文字【伪元素选择器 ::selection】
【::selection】可选中被用户框选的文字
字体类型
概念：衬线字体和非衬线字体
修改字体类型【font-family】
使用【@font-face指令】加载web字体
使用图标字体
美化边框
圆角边框【border-radius】
圆角边框原理图
使用圆角边框的常见场景
普通的圆角边框
圆形边框
圆形图片
美化背景
背景图
使用【background-image】设置背景图片
使用【background-repeat】设置图片重复方式
repeat：【默认值】从左到右从上到下重复
no-repeat：不重复
repeat-x：仅在x轴方向上重复
repeat-y：仅在y轴方向上重复
使用【background-position】设置图片在边框盒中的位置
预设值
left、right、top、bottom、center
数值
使用数值可实现从雪碧图（Sprite）中取得部分图像
示例
使用【background-size】设置背景图尺寸
预设值
数值
使用【background-attachment】固定背景图
scroll：【默认值】背景图跟随元素移动
fixed：背景图固定
使用速写属性【background】统一设置
background：背景图 位置 / 尺寸 重复方式 固定方式 背景颜色
使用多背景图
背景图练习
背景渐变
线性渐变：【background-image：linear-gradient(...)】
径向渐变（圆形渐变）：【background-image：radial-gradient(...)】
透明度和鼠标样式
透明度【opacity】和alpha通道
鼠标样式
阴影
文字阴影【text-shadow】
盒子阴影【box-shadow】
示列：
继承发生的场景：
该属性是可继承的属性，该属性在样式表中没有声明
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
