CSS笔记

样式规则的选择器：
关联选择器：
它所定义的样式规则的优先权比单一选择器定义的样式规则的优先权高，如：
p span{backgroud:yellow}
span{backgroud:green}
但是，在段落标签<p>中定义的<span>标签中的背景仍为黄色。
组合选择器，如：
H1,H2,H3,H4,TD{COLOR:RED;}
伪元素选择器:
伪元素选择器是指对同一个HTML元素的各种状态和其所包括的部分内容的一种定义方式。例如，对于超链接标签（<a></a>）的正常状态、访问过的状态、选中状态、光标移到超链接文本上的状态，对于段落的首字母和首行，都可使用伪元素选择器来定义。
格式：
HTML元素：伪元素{属性：值}
常用的伪元素：
A:active选中超链接时的状态
A:hover光标移到超链接上的状态
A:link超链接的正常状态
A:visited访问过的超链接状态
P:first-line段落中的第一行文本
P:first-letter段落中的第一个字母
类选择器和伪元素一起使用的格式：
HTML元素.类名:伪元素{属性：值}
标签选择器
ID选择器
CLASS选择器




CSS样式属性的分类：
字体
背景
文本
位置
布局
边缘
列表
其他




Filter(CSS滤镜)
例如：
<div style="width:120;height:40;background-color:red;filter:Alpha(Opacity=80) Blur(Add=5,Derection=135)">百度网<br/>www.baidu.com</div>
<div style="width:120;height:40;background-color:red;filter:Alpha(Opacity=80) Blur(Add=5,Derection=135) FlipV">百度网<br/>www.baidu.com</div>
两个DIV中第二个比第一个多了个“FlipV”,此属性表示将此内容倒转显示；
filter中的参数：
Alpha(Opacity=?,FinishOpacity=?,Style=?,StartX=?,StartY=?,FinishX=?,FinishY=?)：此属性用于控制元素与背景的混合程度，也就是此元素的透明度。
第一个参数：透明度的值(0-100)，透明度递增，必选
BlendTrans(Duration=?)设置淡入和淡出的时间值
Blur(Add=?,Direction=?,Strength=?)模糊程度
Chroma(Color=?)模糊的颜色
DropShadow(Color=?,OffX=?,OffY=?,Positive=?)阴影效果
倒转效果：
FlipH:水平方向
FlipV:垂直方向

Gray:去掉色彩，显示为黑白
Invert:翻转颜色
Light:光源效果(要结合JS)
Xray:显示图片的轮廓

Glow(Color=?,Strength=?)设置元素边缘差生类似发光的效果
Mask(Color=?)在元素的表面上覆盖一个透明的遮罩，如带着有色眼镜去看物体
RevealTrans(Duration=?,Transition=?)用于建立元素初始显示的转换效果
Shadow(Color=?,Direction=?):阴影效果
Wave(Add=?,Freq=?,LightStrength=?,Phase=?,Strength=?)在元素上实现一种波纹的效果


位置属性
Position：指定元素的位置，它的值有：absolute(绝对)、relative(相对)、static(通用)
Z-index：设置元素的层叠位置，可以是正值、也可是负值，值越大，越显示在上面


边缘：
margin(元素边界与外部内容的空隙大小)、padding(元素边界与内部内容的空隙大小)、border-width(边框线的宽度)、border-color(边框颜色)、border-style(边框线样式)、border(为border-width、border-color的组合)


列表，如图

样式规则的优先级
ID选择器>CLASS选择器>HTML标签选择器
内联样式表>嵌入样式表>链接样式表