CSS第二学习笔记
(务必让以后来看能对以前的学习历程一目了然)
1. 基本概念
a) 分组选择器
h1,h2,h3{}
b) CSS注释
/**/
c) 属性值
i. width:auto
所有的width属性都有一个auto值，但在使用auto宽度时并不是所有的元素都有相同的效果。<table>元素只能水平扩展以容纳其中的数据，这种方法称为“收缩适应”。另一方面，<div>元素则尽可能水平扩展其宽度，这种方法称为“扩展适应”
ii. 字符串
div::before{
content:"I said,\"hello,world\"";
}
/*在div的前面加入content，但是不属于该div,对IE无效*/
iii. 长度和量度
1. 绝对量度
a) in(英寸) cm(厘米) mm(毫米) pt(1/72英寸)，pc(12pt)
2. 相对量度
a) em相对于最接近的字体尺寸的长度（16px）
b) ex相对字体x的高度（字母x的高度）
c) px
d) %
iv. 数字
v. 颜色
1. 颜色关键字
2. RGB颜色
3. 十六进制颜色
#FFOOOO
4. 短十六进制
#F00
//只有216种（只允许使用FF,CC,99,66,33,00）
vi. uri
d) 在文档中引用CSS
导入样式表
<link rel="stylesheet" type="text/css" href="..">
<style type="text/css">
@import url(path/to/cssdoc.css);
//旧的浏览器不支持该方法，因此可以用来作为一种hack的手段
</style>
2. 选择器
a) 类和ID选择器
div.planet 给一个类选择器附加一个类型选择器来限定样式表规则作用于特点类型的元素
class="a b"; 则该元素同时属于a和b类的
div.a
div.b
div.a.b//在IE6中不行
div#id
b) 通用选择器
*
c) 后代选择器
a b{}b是a的后代，中间必须要有一个空格
d) 直接子选择器（IE6不支持）
a > bb是a 的儿子
e) 相邻选择器（IE6不支持）
a+b选择b,且b与a相邻
f) 属性选择器（IE6不支持）
img[alt]
input[type="text"][name="first_name"]
g) 伪元素first-letter和first-line
p:first-letter{}
p:first-line{}
h) 伪类
:link
:visited
:hover
:active
:first-child/*结构化伪类，IE6不支持*/
3. 层叠和继承
a) 若两个或多个选择器有相同的优先级，最后一个将优先使用（优先级看针对性，针对性越强，优先级越高）
b) ！important
获得优先级，他的位置在属性值之后，分号之前，其优先级甚至超过了内联样式。可以说是最高级别的了。
c) 继承
i. 在一个祖先元素中使用一个样式，后代元素能继承其某些属性，一般来说两种属性可以被继承：文本和字体属性（color,text-align，font）,border和padding属性不能被继承。
4. 文本属性
a) letter-spacing
b) word-spacing
c) text-indent:段落缩进
d) text-align：left|right|center|justify(左右都是对齐的，之间的单词间隔自动有调整)
e) text-decoration：
none|underline|overline|line-through|blink
(IE和Safari不支持，它的意思是阴影)
f) text-transform：capitalize|uppercase|lowercase|none
g) white-space:pre(保留格式)IE只在标准模式之下才有该属性。
h) line-height:行高
5. 字体属性
a) font-family:arial,"Californian FB"/*字体组*/
通用字体：seirf, sans-seirf ,monospace,fantasy,cursive
b) font-style:normal|italic|oblique
c) font-variant:normal|small-caps/*小型大写*/
d) font-weight：normal|bold|bolder|lighter|100|200|..
e) font-size
f) font:[font-style]|[font-variant]|[font-weight]|
[font-size]|[font-family]
6. 盒模型
a) margin
margin:10px 10px 10px 10px;上右下左
margin:10px 10px 10px;上[左右]下
margin:15px 5px;[上下][左右]
margin:10px;[上下左右]
属性值可以使auto，但是这个值在非标准模式下不识别。
IE有别于标准，可以使用text-align属性来对齐元素
外边距折叠
上下连个元素的外边距接触是，最终的结果不是两个相加，而是取大值
即使在内部也是这样，但是左右边距不会参与折叠
发生折叠的直接原因是两个边距发生了直接接触，可以添加一个border来防止
b) border
(以下的这些属性都有*-top;*-right;*-bottom;*-left)
i. border-width:thin|medium|thick|<length>
ii. border-style:none|hidden|dotted|dashed|solid|
double|groove|right|inset|outset
iii. border-color
iv. border:<border-width>||<border-style>||
<border-color>
c) padding
auto关键字不起作用，margin可以接受负值，padding不支持，无折叠。
d) width
在标准下，是从左内边距边缘到右边距边缘之间的距离
e) height
IE7与其他浏览器中，如果内容太多会溢出，而IE6不会，它会撑大盒子。这个属性有点像：min-widthmin-heigth
f) 块级元素
<div>,<p>,<h1>~<h6>,<form>,<ul>,auto width会填满可用区域（扩展适应），auto height会扩展到容纳所有元素内容（收缩适应）
g) <table>与块级元素不同，它在两个方向上都是收缩适应，有一点需要注意，内部的块级元素的margin-left:auto
margin-right:auto可以实现居中对齐
h) <img>是另一个是auto关键字具有其他意义的元素，当都是auto时（默认），大小是元素大小，当一边是auto,另一边是指定时，大小会按比例调整。
i) <body>和<html>元素是块级元素。他们的高度由内部元素的内容决定的。
j) 百分比度量是相对于父元素而定的
k) IE6的Quirk(混杂)模式。width是从左外边框到右外边框的长度。
l) IE6可以使用条件注释：
<!--[if lt IE 7]>小于IE7,[if IE 6] [if gt IE 6]
<![endif]-->
可以用来消除IE的盒模型的bug
m) min，max(IE6都不支持,但是IE6的width和height可以实现类似的功能)
min-width
min-height
max-width
max-height
n) expression(javascript语句)IE中独有的功能
o) overflow:visible|hidden|scroll|auto
7. CSS浮性：浮动和垂直对齐
a) float:left|right|none
当元素应用了float属性之后，不管元素的类型是什么，都会表现为块级元素。但也不完全是块级元素，因为width和height都会变成收缩适应（即使原来是块级元素，最后也得变成这样，width不是扩展适应）
b) 浮动元素的外边距不会折叠，不管他们多么靠近
c) 内联元素
<span>,<a>一般来说不对内联元素使用width,height元素的。但是使用浮动之后就可以了，因为他现在是一个块级元素。
d) clear:none|left|right|both
clear属性是用来清除或者消除float属性效果的，但是只能说是消除一般，对有该属性的元素消除了，对无float属性的没消除。
e) IE6中的浮动bug
i. Peek-a-boo bug
ii. Guillotine bug
iii. Three-pixel jog
iv. Double-margin bug
f) display:none和visibility:hidden
前者是彻底消失了，在文档中不会占位，而后者知识肉眼看不见而已。
g) IE里边如果定义一个div,设置了背景颜色之后，他会试图将定义在其内部的所有元素都在次背景中。（即使已经超出了该div的范围了）
h) vertical-align属性
baseline|sub|super|top|text-top|middle|bottom|
text-bottom|<percentage>|<length>
//<percentage>|<length>是从当前坐标向上移动的距离
垂直对齐表格单元的内容：
只能使用baseline,top,middle,bottom
8. 列表属性
a) list-style-type
disc|circle|square|decimal|decimal-leading-zero|
lower-roman|upper-roman|lower-greek|lower-latin|
upper-latin|armenian|georgian|none
IE6,7只支持CSS1中的关键字：disc|circle|square|
decimal|lower-roman|upper-roman|lower-alpha|
upper-alpha|none
b) list-style-image
list-style-image:url("aaa.png");
c) list-style-position
inside|outside
d) list-style:
<type>|<position>|<image>
9. 背景属性
a) background-color
<color>|transparent
b) background-image
<url>|none
c) background-repeat
repeat|repeat-x|repeat-y|no-repeat
d) background-position
[<percentage>|<length>]{1,2}|[top|center|bottom]
||[left|center|right]
e) background-attachment
scroll|fixed
f) background
<color>|<image>|<repeat>|<attachment>|<position>
10. 定位属性
position:static|relative|absolute|fixed(IE不支持)
top:right:
bottom:
left:
z-index
11. 表格属性
a) table-layout
b) border-collapse
c) border-spacing
12. 透明
/*Moz*/
-moz-opacity:0.7;
/*IE*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
filter:alpha(opacity=80);
/*CSS3*/
opacity:0.7;
以下是CSS3内容
13. 关系选择器
a) 后代选择器（E F）
b) 子选择器（E>F）
c) 相邻兄弟选择器（E+F）
d) 一般兄弟选择器（E~F）
14. 属性选择器
a) E[attr]
b) E[attr=val]
c) ...
15. 伪类
a) :enabled
b) :disabled
c) :checked
d) :indeterminate
e) :target
f) :default
g) :valid
h) :invalid
i) :in-range
j) :out-of-range
k) :required
l) :optional
m) :read-only
n) :read-white
16. 结构化伪类
a) :root
b) E F:nth-child(n)
c) E F:nth-last-child(n)
d) E F:nth-of-type(n)
e) E F:nth-last-of-type(n)
f) E F:first-child
g) E F:last-child
h) E F:first-of-type
i) E F:last-of-type
17. CSS3颜色
a) RGBA
b) HSL和HSLA
c) 不透明度
d) background-color:rab(0,0,0);
e) opacity:0.5;
f) 与下面表示的意思一样：
g) background-color:rgba(0,0,0,0.5);
18. 圆角: border-radius
a) border-radius:25px;添加四个角
b) border-radius:25px 10px 5px 0; 从左上角开始，顺时针转
c) border-top-right-radius:25px;
老版的FF
d) -mos-border-radius:25px;
e) -moz-border-radius-topleft:100px;
19. 投影
a) -webkit-box-shadow:2px 5px 0 0 rgba(72,72,72,1);
//老版本的Ghrome和Safari
b) -mos-box-shadow:2px 5px 0 0 rgba(72,72,72,1);
//老版本火狐
c) box-shadow:2px 5px 0 0 rgba(72,72,72,1);
//标准
20. 文本阴影
a) text-shadow:3px 3px 1px rgba(0,0,0,0.5);//支持性不会
21. 线形渐变
a)
22. 径向渐变
23. 重复渐变
24. 多背景图片
25. 背景大小
26. 转换
a) 平移
-webkit-transform:translate(100px,100px);
-moz-transform:translate(100px,100px);
-ms-transform:translate(100px,100px);
-o-transform:translate(100px,100px);
transform:translate(100px,100px);
-webkit-transform:translatex(100px);
-moz-transform:translatex(100px);
-ms-transform:translatex(100px);
-o-transform:translatex(100px);
transform:translatex(100px);
切记，这里相当于设置了position:relative
因此在文档中还有占位。
b) 缩放
-webkit-transform:scale(1.5,0.25);
-moz-transform:scale(1.5,0.25);
-ms-transform:scale(1.5,0.25);
-o-transform:scale(1.5,0.25);
transform:scale(1.5,0.25);
c) 旋转
-webkit-transform:translate(100px,100px) rotate(10deg) scale(1.5,1);
-moz-transform:translate(100px,100px) rotate(10deg) scale(1.5,1);
-ms-transform:translate(100px,100px) rotate(10deg) scale(1.5,1);
-o-transform:translate(100px,100px) rotate(10deg) scale(1.5,1);
transform:translate(100px,100px) rotate(10deg) scale(1.5,1);
倾斜
skew(15deg,30deg)
d) 更改转换的原点
27. 过渡
a) transition-property
b) transition-duration
c) transition-timing-function
d) transition-delay
e) transition简写属性
f) 多个过渡
28. 动画
#test{
-webkit-animation-name:'appear';//使用的动画名
-webkit-animation-duration:2000ms;//持续的时间
-webkit-animation-timing-function:ease-in;
//ease,linear,ease-in,ease-out
-webkit-animation-iteration-count:2;//调用次数
-webkit-animation-direction:alternate;
//normal每次都重头调用，alternate反向调用
-webkit-animation-delay:0s;//延时
-webkit-animation-fill-mode:forwards;
//forwards,backwards,both,none
//下面是简写的方法
/*-webkit-animation:'appear' 2000ms ease-in 1 alternate 0s forwards;*/
}
@-webkit-keyframes 'appear'{
//下面有关键帧
0%{opacity:0;
-webkit-transform:translate(200px,200px) rotate(200deg) scale(2,2);
}
100%{
opacity:1;
-webkit-transform:translate(100px,100px) rotate(10deg) scale(1,1);
}
}
