CSS笔记

由于有些零散的代码夹杂其中，所以用代码块编辑。

马士兵_CSS_学习笔记_尚学堂_个人整理 
一、CSS定义

	CSS—Cascade Style Sheet层叠样式表(装饰标签的)
		1998/5/12，CSS level2成为W3C标准
		用来装饰HTML/XML的标记集合
	特点：
		样式表由样式规则组成，以告诉浏览器如何显示一个文档
		每个规则的组成包括一个选择符---通常是一个HTML的元素---和该选择符所接受的样式
		每个元素可以定义多个属性，每个属性带有一个值，共同的描述选择符如何呈现


二、CSS样式

	样式规则格式：
		选择符{属性:值}
	单一选择符的复合样式声明应该用分号分割：
		选择符{属性1:值1; 属性2:值2}
	
	
	


三、	CSS的调用方式

	在Head中调用
	在Body中调用
	调用css文件


	CSS的优先级问题
		按照最靠近元素的定义来显示
		如果两个css文件冲突,以后面的为准



四、	CLASS & ID

	类选择符：Class
		在 CSS 中，类选择符以一个点号显示：
			.code
		一个选择符能有不同的Class，因而允许同一个选择符具有不同的样式
		不同的选择符也可以同时定义一样的样式

	注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

	ID选择符
		id 选择器以 "#" 来定义:
			#code
	注意：id 属性只能在每个 HTML 文档中出现一次。



五、	CSS组合/注释

	可以一次性定义多个选择符的样式
		H1,H2,H3{color:red;font-family:serif}(碰到H1或H2)
		P A{}   (P内的A标签)
		#head a (任何对象叫head,里面含有的a)
	注释：
	/*这是注释*/


六、	字体属性

属性			含义		属性值
font-family		字体		各种字体
font-style		字体样式	Italic斜体、oblique黑体
font-variant		小体大写	small-caps 小体大写
font-weight		字体粗细	bold、bolder、lighter…
font-size		字体大小	absolute、relative、%
color			字体颜色	颜色值


七、	颜色与背景属性

属性				含义					属性值
Color				颜色					颜色值

Background
-color				背景色					颜色值
Background
-image				背景图案				图片路径
Background
-repeat				背景图案重复方式		Repeat-x | repeat-y | no-repeat
Background
-attachment			背景的滚动				Scroll | fix
Background
-position			背景图案初始位置		% | n em | top | left | right | bottom …


八、	文本属性

属性			含义		属性值
word-spacing		单词间距	n em
letter-spacing		字母间距	n em 
text-decoration		装饰样式	underline| overline| line-through(中划线)| blink(闪烁)
vertical-align		垂直方向位置	sub| super |top |text-top|middle| bottom| text-bottom
text-transform		转为其他形式	capitalize| uppercase| lowercase
text-align		对齐		left| right| center| justify
text-indent		缩进		n em| %
line-height		行高		pixels、n em、%


九、	装饰超链接 伪类选择符(重点)

	对链接的修饰
		A:link 未访问时的状态
		A:visited 访问过后的状态
		A:active 鼠标点中不放时的状态
		A:hover 鼠标划过时的状态


十、	边距属性

属性			含义		属性值
margin-top		上边距		n em | %
margin-right		右		n em | %
margin-bottom		下		n em | %
margin-left		左		n em | %



十一、填充属性(段落内部填充一些)

属性			含义		属性值
padding-top		上填充		n em | %
padding-right		右		n em | %
padding-bottom		下		n em | %
padding-left		左		n em | %


十二、边框属性

属性				含义			属性值
Border-top-width		上边框宽度		n em | thin | medium | thick
Border-right-width		右			同上
Border-bottom-width		下			同上
Border-left-width		左			同上
Border-width			四边			同上
Border-color			边框颜色		Color
Border-style			边框样式		Dotted | dash | solid | double | groove | ridge | inset | outset
Border-top |right|bottom|left	上(右|底|左)所有属性	Border-width | border-style | color


十三、图文混排

属性	含义		属性值
Width	宽度		n em | %
Height	高度		n em
Float	文字环绕	Left | right
clear	去除文字环绕	Left | right | both


十四、列表属性

属性			含义		属性值
Display			是否显示	Block | inline | list-item | none
White-space		空白部分	Pre | nowrap | normal（是否合并)
List-style-type		项目编号	Disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|noneList-style-image	项目前图片	Img-url
List-style-position	第二行位置	Inside | outside
List-style		全部属性	Keyword | position | url


十五、鼠标属性

属性值		含义	属性值		含义
Auto		自动	N-resize	上箭头
Crosshair	"+"	Se-resize	右下
Default		默认	Sw-resize	左下
Hand		手形	S-resize	下箭头
Move		移动	W-resize	左箭头
E-resize	右箭头	Text		"I"
Ne-resize	右上	Wait		沙漏
Nw-resize	左上	help		帮助


十六、定位属性

属性			含义		属性值
Position		位置		Absolute|relative|static
Left | top		横向|纵向位置	N em | %
Width | height		宽度|高度	同上
Clip			剪切		Shape | auto
Overflow		内容超出时	Visible | hidden | scroll | auto
Z-index			立体效果	Integer
visibility		可见性		Inherit | visible | hidden


十七、滤镜属性

属性值		含义		属性值		含义
Alpha		半透明		Invert		底片
Blur		模糊		Light		灯光投影
Chroma		指定颜色透明	Mask		透明膜
Dropshadow	投射阴影	Shadow		阴影
Fliph		水平翻转	Wave		波纹
Flipv		垂直翻转	Xray		X射线
Glow		光效		Grayscale	灰度