一、 选择器
CSS选择器兼容性http://www.evotech.net/blog/2009/02/css-browser-support/
㈠ 派生选择器
① 以空格作为分隔符号。
② 选择的是父卷标下所有卷标（p div em ），检索方式。
㈡ 类选择器（class）
① .class（中间无空格）。
② p.warning{ } 和 p＿.warning 的不同之处。
③ 多类选择器 （class=“urgentwarning”）。
④ . 选择器用做多个标签。
㈢ ID选择器
① #id（中间无空格）。
② div#warning{ }（具有条件选择的意思） 和 div＿#warning 的不同之处。（空格是派生选择器的标志）
③ # 选择器用做唯一一个标签。
㈣ 群选择器
① , 号为分隔标志。
② 逗号左右空格无限制。
㈤ 伪类选择器
⑴ 所有伪类和伪元素关键词前面都有一个 : 号。
⑵ 连接伪类
① :link（与 a{ }的区别）。
② :visited。
③ 有 href 属性的 a 元素。
⑶ 动态伪类
① :hover
② :active
③ :focus
④ link-visited-focus-hover-active（Lvfha）
⑤ IE6只允许动态伪类选择超链接。IE7、火狐支持所有元素:hover，而IE6.0不支持。IE7不支持窗体应用 ：focus。
应用hover时，<body>内定义如background-color;在<style>中:hover{background-color=blue;}发生冲突，不起作用。
㈥ 伪元素选择器
① :first-letter
② :first-line
③ :before
④ :after
⑤ :first-letter 和 :first-line 有一些属性应用的限制。IE6.0，不支持；IE7火狐都支持。
⑥ :after ：before IE都不支持，火狐支持。:first-letter 和 :first-line 有一些属性应用的限制。IE6.0，不支持；IE7火狐都支持。图有错误。
㈦ 选择子元素（IE6不支持，IE7支持，Firfox支持）
① >
② h1>strong（空格无限制）
③ 选择后者，是子元素（即第一层）
④ IE6.0不支持
㈧ 相邻元素（IE6不支持，IE7支持，Firefox支持）
① +
② h1+p
③ 选择后者，两元素属同一辈分就OK。
④ IE6.0不支持
㈨ 选择第一个子元素（IE6不支持，IE7支持，Firefox支持）
p:first-child{ } 选择的是所有（p and 第一个子元素）
㈩ 根据语言选择
：lang(){ }
11 属性选择器（[ ]）（内容比较多，目前很少使用；但是IE支持）
① [属性]
② [属性=值]
③ [属性～=值] 空格分开，“值”含在其中一部分
④ [属性|=值] digital-有连接符，并且digitial前无任何字符
⑤ IE6.0不支持
12 通配选择器（*）
二、 值和单位
Font-size:em、%、smaller、larger一样都是继承计算后的值。
Line-height:使用由单位的值，都是继承计算后的值，而非缩放因子。
因此，font-size和line-height：不要使用.
㈠ 颜色
① 命名颜色（CSS2.1 17种）
② RGB（R,G,B） 0～255 black=reb(255,255,255) white=rgb(0,0,0)
③ 十六进制RGB颜色#RRGGBB 三个数之间没有分隔符号号号号；简写 RGB 。
㈡ 长度单位
① 绝对长度单位 in（英寸） cm（厘米） pt（点） pc（派卡）
② 相对长度单位 em ex px
注：a、所有长度单位后都有两个字母缩写；长度0（零）其后不需要跟单位元元元元。
b、Web设计种几乎很少使用绝对长度单位。
c、最好的相对长度单位，特别是 em ,ex=0.5em 。
d、px 用户无法使用“文本大小”。
em=本元素的font-size，记住若不指定font-size，则font-size回继承父元素。使用时text-indent使用em作为单位。line-height使用百分号。
㈢ URL
① 绝对URL(protocol://server/pathname)
② 相对URL(pathname)
注：URI（统一资源标识符）= URL（统一资源定位符）。
③ url（../image.css）或 url(image.css) 记住这两种
㈣ inherit（继承）
很少用，IE7支援不很好，Firefox支援很好。
㈤ 其它
① 角度值 度（deg） 梯度（grad）弧度（rad）
② 事件值 毫秒（ms） 秒（s）
③ 频率值 赫兹（Hz）兆兹（MHz）
三、 字体（5）
| font-family | 使用逗号将字体系列与字体结合，空格#$等符号，用‘’括起来 | |
| font-weight | normal︱bold︱bolder︱lighter︱100︱200︱300︱400︱500︱600︱700︱800︱900 | ① bold 和 normal 最常用 ② 其余值差别不大 |
| font-size | xx-small︱x-small︱small︱medium︱large︱x-large︱xx-large︱smaller︱larger︱<length> |
|
| font-style | italic︱oblique︱normal | ① 无italic时自动使用oblique ② 无oblique时不使用italic ③ 尽量定义为italic |
| font-variant | small-caps︱normal | 全部大写；小型； |
| font-stretch | normal︱wider︱narrower | <拉伸字体> CSS2.1中去除；无浏览 器支持 |
| font-size-adjust | none︱number | <强制对象使用同一个尺寸>CSS2.1中去除；无浏览器支持 |
| font | font-style︱font-variant ︱font-weight︱font-size / line-height︱font-family 12px/18px | |
四、 文本属性（9）
| text-indent | <length> | ① 初始值 0 ② 应用于块状元素<p> ③ 即使插入<br/>，缩进也只应用于一个元素的第一行 ④ 可以继承 |
| text-align 水平对齐 | left center right justify | ① text-align 不会控制元素的对齐，只是影响内部内容 ② <center>不仅影响文本，而且会把整个元素居中 ③ IE6之前 text-align:center=<center> |
| line-height | normal <length> | ① 初始值：normal ② 内容区+行间距=行高；基线；上下行间距；行内框 |
| vertical-align | baseline sub & super middle text-top & text-bottom top & bottom <length> | ① 父元素基线（默认值） ② 上下标 ③ 垂直居中，并不绝对居中 ④ 行内文本的底端 ⑤ 行内框的底端；IE 和 Firefox不同 少用 ⑥ 正值上升；负值下降； |
| word-spacing | normal <length> | 空格的大小 |
| letter-spacing | normal <length> | 针对英文；字母间距；空格间距 |
| text-transform | uppercase lowercase capitalize none | ① 大写 ② 小写 ③ 每个单词首字母大写 ④ 默认值 |
| text-decoration | none underline overline line-through; blink（闪烁，IE 和irefox都不支持） | ① none为默认值 ② blink（IE和Firefox都不支持） ③ text-decoration 与 vertical-align:sub &super结合各种浏览器有所不同 |
| white-space | normal
pre nowrap pre-wrap pre-line | ① 合并空白；换行符转换为空格；允许自动换行 ② 保留空白；保留换行符；（文本原样）； ③ 忽略换行符；合并空白 ④ 保留空白符；保留换行符；不支持 ⑤ 合并空白符；保留换行符；不支持 |
| direction | ltr & rtl |
|
| unicode-bidi | normal embed bidi-override |
|
| text-shadow | 文本阴影；目前没有Web浏览器支持 | |
① 文本中换行符（回车键）默认时=空格
② 文本中默认允许自动换行
| text-overflow | clip（不显示） ellipsis（加省略号） | IE专有属性 与overflow:hidden;width定值 word-break:keep-all;共同使用。 |
| layout-flow | horizontal（横向） vertical-ideographic（纵向） | IE专有属性 文本的排版方式 |
| word-break | normal keep-all（不换行） break-all（允许英文单词间换行） | IE专有属性 |
| word-wrap | normal break-word | IE专有属性 类似与word-break:break-all; 二者共用无论中英文都强制换行 |
五、 基本视觉格式化
一、 水平格式化
① Width=内容区的宽度；可视元素框的宽度=Width +border-width + padding；一定要注意：隐式地增加Width(paddingborder-width) 和 Width是固定的。
② 父元素的Width = 块级元素的7个值之和；
③ auto = width & margin-left &margin-right
1. 一个auto：自动计算。
2. 两个auto：外边距的auto = 0；水平居中，margin-right可能被重置为0.
3. 三个auto：为默认情况，width很宽;margin-left=0;margin-right:0
④ 对于空 <div> Firefox要求必须有 height属性，而IE不必。实际中应指定height的值
⑤ 负外边距
a) margin-left：负数-------IE7支持----Firefox支持
b) margin-right：负数-----IE7不支持----Firefox支持
⑥ 百分数
u 7个水平属性之和=100%，百分数的参考是父块级元素
总结：
(一) <div>显示：空 <div> Firefox 和IE7 height属性
(二) padding 和 width 都会隐式增加可视元素框
(三) 因为<div>属性可共享并相互覆盖，所以 div{ }指定属性时少用，用ID选择器或类选择器
(四) 父元素的padding 和子元素的margin
二、垂直格式化
① 7大属性---margin-top—border-top—padding-top—height---
pading-bottom—border-bottom—margin-bottom
② 可视元素框=border + padding + height
③ auto= height & margin-top& margin-bottom
④ 一个正常留种的一个块元素设置margin-top\margin-bottom=auto则为0，不能实现垂直居中
三、 改变元素显示
|
display | none |
|
| inline |
| |
| block |
| |
| inline-block |
| |
| list-item |
| |
| run-in | 很少提供支持 | |
|
|
|
四、
六、 内边距、边框和外边距
所有文文件元素都会生成一个<元素框>
| width & height | 不会应用行内非替换元素 例如：<a> |
| margin | 占据空间，背景色是透明的，可以看到父元素。margin默认为零，但以下元素不为零： <p> <ul> |
| margin简写：⑴上 右 下 左；⑵上 （左右） 下；⑶（上下）（左右）； | |
| margin-top & margin-right & margin-bottom & margin-left | |
| padding | padding可简写 |
| padding-top & padding-right & padding-bottom & padding-left | |
| border三大属性：border-style border-width border-color | |
| border-width | border-top-width border-right-width border-bottom-width border-left-width |
| border-style | solid dotted（点）dashed（虚线）double groove（凹） ridge（凸） inset（内嵌）outset（外嵌） none 边框将不会存在 |
| border-style可简写 | |
| border-top-style border-right-style border-bottom-style border-left-style | |
| border-color | Transplant |
| border-top-color border-right-color border-bottom-color border-left-color | |
| 对于行内元素如<em><strong>：padding 和 margin 和border-top和border-bottom 不会增加行高。padding会覆盖，margin将重置为0,border-top & border-bottom同样会覆盖。 padding-left & right 和border-left & right 可用。 | |
外边距合并：
一、margin上下合并：
父元素
A. 以较大的margin值为准
B. IE中两个<div>只要有一个设置float就不再进行合并
C. Firefox中两个必须第二个<div>设置float时不进行合并
D. 一般来讲margin上下进行合并，除非某个设置了float
二、margin左右合并：
A. 两个<div>，第一个设置float:left;，第二个不设置。IE中第二个<div>移动到第一个右边进行合并；Firefox中第二个<div>被第一个覆盖。
两个都设置float:left;则都不进行左右合并。
B. 一般来讲margin左右不进行合并
margin的<串层合并>的bug问题：（上下合并）
同级元素进行合并，并且与float属性有关。
父元素有width或height：
① IE不进行<串层合并>
② 火狐进行<串层合并>
父元素有border或padding：
① IE不进行<串层合并>
② 火狐进行<串层合并>
总结：IE的串层合并只与height和width有关，border和padding控制这火狐的串层合并。
应用时：最好设置子元素的margin上下为零。
七、 背景
| background-color |
| |
| background-image | 允许向任何元素应用背景 | |
| background-repeat | repeat repeat-x repeat-y no-repeat | |
| background-attachment | scroll fixed—图像不会随文件滚动，图像放置有可视区域的大小决定， | |
| background-position | 关键词：left & right center top & bottom 百分数： 数字；（可为负数，会得到奇特的效果） 参考目标：border的内左上角 三种值可混用，左 右； | |
| repeat-x 由 top & bottom决定 | repeat-y 由 left & right决定 | |
| <background-color>︱<background-image>︱<background-repeat>︱<background-attachment>︱<background-position> | ||
| <background-positon> 在缩写时两个值必须同时写，若为数字或百分数必须：左 右 | ||
八、 浮动和定位
1、 position定位时包含快<使用时有最近原则>：会作为绝对定位的top\left和width\height的参照物。
包含快必须定义的特征{
position: ;
width: <像素>;（次要）
height: <像素>;（次要）
}
被包含块的特征{
position:
width:<像素>; height:<像素>;
left:<像素>; top:<像素>;
}
注：最好的是绝对定位元素就相对于父级元素，中间无任何元素。
2、
| float | left right none 注释：Content, background, and borders of inline elements should go in front of the float. Background and borders of a block element should go behind the float, but the content of the block element should go in front of the float. | ||
| clear | left right both none | ||
| position | static | 默认值，无特殊定位，遵循HTML定位规则 | |
| absolute （可为负值） | ①将元素从文文件流中脱离（漂浮），使用left、right、top、bottom等属性相对于其最近的具有定位设置的父元素进行绝对寻址，并可以使用z-index设置该元素的迭放次序。使用该属性时，必须至少设置设置left、right、top和bottom中属性的一个； ②其最近的具有定位设置的父元素是指设置了position这个CSS属性（属性值应当为absolute或relative）的最近的父元素，如果该父元素不存在，则父元素指的是body； | ||
| relative | 既漂浮，又占有文档流。本元素已脱离文本六，而原本所占据的空间仍保留。 | ||
| fixed | IE7+才支持，火狐支持。<margin左上角>---。 脱离文档流 | ||
| overflow | visible hidden scroll auto | ||
| z-index | 整数，可为负数。 只用于定位元素，负数少用。 | ||
| clip | rect(T R B L) auto | 设置可视区域，只对绝对对象有效，不可以为百分数。所有浏览器都支持。 但必须是position:absolute\fixed | |
| visibility | visible（默认值） hidden collapse | ① 与display:none;的区别 ② collapse不支持。主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden | |
position:absolute 1、参考元素：position不为static的祖先元素。应用时多用position:relative，而且没有偏移；body{position:relative}，将body作为初始包含快；
2、位置点：<父元素>的border内左上角←→<子元素>的margin左上角的边偏移值；
3、top※right※bottom※left的数可为负数和百分数。百分数的参考元素是<父元素>的border内；???
关于Absolute%:
Absolute:
left\top\bottom\right参考相对定位父元素的border内。
Width：
只有IE6参考的是父元素的width值；
其它都是参考相对父元素border内的宽度。
Height:
IE7相对定位父元素的height值；
IE6父元素的border内的高度。
其它相对定位父元素border内的高度。
Margin:父元素
关于Relative%:
width:50%; /*父元素的width */
height:50%; /* 父元素的height */
left:50%; /*父元素的width;而IE6、IE7都是父元素的border内宽度；Opera父元素的width值*/
top:50%; /*父元素的width;而IE6、IE7、Opera都是父元素的border内高度*/
/*
margin-left:50%; /* 父元素的width */
/*
margin-top:50%; /* 父元素的height */
-------------------------------------------------------------------------
4、绝对定位元素的放置：
明确指定的width和height，只有left和top确定显示，而bottom和right将因<过度受限>重置，也可理解为忽略。
5、绝对定位元素的自动确定大小（面积）：
浏览器可以根据top\right\bottom\left进行自动确定面积，参照
（Absolute%）。
只有IE6不可以，其它都可以，但是IE7稍有点bug（相对父元素的高度）。
6、绝对定位元素auto的使用：
top※right※left=auto,元素的边界与其static(display:none)时的边界相应对齐,就是所谓的“自动放置”
此时{top:auto;left:auto;}={top:auto;right:auto}（重合）。
因此可以使用margin的值改变位置。
Position：relative也是同样的。
7、非替换元素的放置和大小（9种属性）：
left+margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right+right=<包含快>的width
a、 left※right=auto,与 static时对齐。
b、 margin-left\margin-right=auto（left\right\width中的不是auto）：
1、自动计算
2、水平居中（margin:0 auto）【IE6\7不支持，Firefo\IE8支持】
d、过度受限情况下会忽略最右边的值（right \ margin-right）
top+margin-top+border-top-width+padding-top+height+padding-bottom+border-bottom-width+margin-bottom+bottom=<包含块>的height
a 、垂直居中：mrgin:auto 0;（指定width\top\bottom）【IE不支持，Firefox支持】
b、绝对定位元素在垂直方向上<过度受限>时将忽略bottom的 值由top确定显示位置
8、替换元素的放置和大小：
a、left◇top◇right的值为auto,则auto将被替换
为静态位置。（但是注意使用条件）
b、<过度受限>时会忽略right◇bottom的值。
总结：在绝对定位时，只用left和top。水平居中◇垂直居中IE都不支持，而火狐都支持。
可以设为auto的值有五个left◇right◇top为其静态位置或这被重置，
float:
浮动元素会向左或向右移动直到遇到另外一个元素为止，跟随浮动对象的对象将移动到浮动对象的位置。
IE:
② 一个元素设置float:left;之后，其后所有元素将跟随<移动>紧贴此元素的右边框，<所有元素>直至高度等于此元素的高度。其中<所有元素>包括设置float:left;和float:right;的元素。
③ 一个元素设置float:left;之后，其后的元素float:left;或flaot:right;的<相对行>是不设float时的行。
Firefox:
① 最好用两个float来指定
② 一个元素设置float:left;后，其后说有元素将跟随<移动>不像IE那样紧贴此元素右边框，只是内容（文字、图片）紧贴右边框
总结：Firefox要想和IE同时用应当在两个连续的<div>中都设置float:left;，
这样两种浏览器则显示相同。否则只能用表格布局了。
九、 用户界面样式
| 系统字体（6个） | caption icon menu message-box small-caption status-bar | ① 6个系统关键字只能用于font属性； ② {font:icon;font-weight:bold}(加粗)和{font-weight:bold;font:icon}（不加粗）。 ③ 6个系统字体关键字 |
| 系统颜色 （28个） | activecaption background buttonface | ① CSS定义系统颜色不区分大小写； ② 少用；
|
|
光标 | 指示和选择：pointer text crossshair
| |
| 移 动： move（） w-resize s-resize n-resize e-resize ne-resize sw-resize se-resize nw-resize 根据上北下南左西右东、来确定值。 | ||
| 等待和前进：wait---直至程序不忙为止 progress---尽管很忙，但仍可以继续与程序交互 | ||
| 提供帮助：help | ||
| 图形光标：cursor:url( ),help,url( ); 注意彼此间的逗号，这与font不同。火狐不支持 .ani。 | ||
| 轮廓 out-line | out-line-width out-line-style out-line-color | ① IE不支持此属性，火狐支持。 ② out-line-color有invert值。 |
十、 表布局
| caption-side | top bottom | IE不支持此属性，火狐支持 caption的algin属性定位 |
| border-spacing | IE不支持，火狐支持； | cellspacing：IE支持，火狐不支持； 两种属性共用。 |
| empty-cells | show hide | IE不支持，只有火狐支持； |
| border-collapse | separate（默认值） | border-spacing才可用 |
| collapse（各种浏览器都支持的不好） | ① border-style:hidden级别最高;border-style:none 级别最低。 ② 单元格之间不会有任何间隔。 ③ 最大的width 会胜出。 ④ color 和style 也会有合并 | |
| width | table-layout:auto（完全显示） | |
| table-layout:fixed（不完全显示） | ||
| height |
|
|
| text-align | left right center |
|
| vertical-align | top bottom middle |
|
总结：使用边框合并时：注意表的border和cell的border，各种浏览器对border-collapse:collapse支持不好；对border-collapse:separate;的附属属性支持也不是太好。
十一、 列表与生成内容
| 列表三种属性：type position image | |||
| list-style-type | none & disc & circle & square（形状） decimal & lower-roman & upper-roman（数字） lower-alpha & upper-alpha（字母） 等等 | ||
| list-style-position | inside & outside （类表符的位置） | ||
| list-style-image |
| ||
| li || ul—list-style:<list-style-type><list-style-position><list-style-image> | |||
| 生成内容（IE不支持，只有火狐支持，但是还是要了解） | |||
|
content :after :before伪元素 | “”（字符串） | 其中的换行支持不好，包括Firefox | |
| URI | content:url( ); | ||
| attr（提取属性） | content:attr(href); | ||
| quotes（引号） 与:after、:before结合使用 | ① 先用quotes:“”﹎‘’（成对单引号和双引号）声明；再用content:指定； ② quotes:‘\201c’ ‘\201d’ ‘”’ ‘”’ 双层嵌套的应用； ③ content:open-quote close-quote no-close-quote no-open-quote | ||
| （计数器） counter-reset counter-increment | 并不重要 | ||
| content：若主体为block，则生成的内容默认为block，只可以设为block—inline—none—marker； 若主体为inline，默认inline，只可以设为none和block。好像插入的内容不存在于Dom树中。 默认不恰当，是“重置”，插入的内容属于主体，并且子元素。 | |||
十二、 非屏幕媒体
| 分页媒体： | ||||||
| 定义页面大小 | size | ① 只能是百分数和“尺度”单位，如in，cm，pt ② CSS2.1已经去除 ③ 定义页面区大小 | ||||
|
| margin | ① 单位同size，不能是em和ex ② 外边距大小 | ||||
| 选择页面类型 | page | ① 定义不同的页面类型，提供给不同的元素。 ② landscape(横向)，portrait(纵向) ③ @page :first{ } @page :left{ } @page :right{ } ④ @page normal{size:portrait;margin:1in;} body{page:normal}
| ||||
|
分页（符） |
page-break-before page-break-after | auto（不要求） always（放分页符） avoid （不放分隔符） left （内容放在左页） right（内容放在右页） | ||||
| page-break-inside | auto avoid | 避免一个元素内部放分页符。 div.aside{page-break-inside:avoid;} | ||||
| 有关分页符 | windows orphans | 默认值为：2；少于指定行数时， 在元素前插入分页符 | windows定义顶部 orphans 定义底部 | |||
| 投影（幻灯片）：Opera，大多数投影仪都默认1024×768的分辨率 ，800×600，1280×1024。 | ||||||
| 声音样式：aural类型媒体已经废除，并且没有支持。以后可能会使用speech来支持文档语音表现。 | ||||||
| 语音 | speak | normal（读出内容，默认值） none（不读） spell-out（拼读） | ||||
| 标点符号 | speak-punctuation | none（停顿） code（读出标点） | ||||
| 数字 | speak-numeral | continous（连续读出） digits（单个读出） | ||||
| 表标题 | speak-header | once（默认值） always | ||||
| 语速『每分钟单词的个数』 | speech-rate | <number> medium x-slow slow fast x-fast faster slower | ||||
| 音量 | volume | <number>0~100 silent x-soft soft medium loud x-loud | ||||
| 指定声音 | voice-family | male female child voice-family: gary , jim , child;; | ||||
| 音高（音频） | pitch | h1{pitch:150hz;} x-low low medium hight x-height | ||||
|
| pitch-range | 平均音频变化范围，默认值50 | ||||
| 重音 | stress | p{stress:50;} | ||||
| 音色『与stress作用类似』 | richness | h1{richness:80;} | ||||
| 停顿 | pause pause-before pause-after | 一下三个规则是等价的： p.list { pause:1s;} p.list {pause:1s 1s;} p.list {pause-bofore:1s;pause-after:1s } | ||||
| 提示『与pause用法一样』 | cue cue-before cue-after | 值为URI: a:link{cue:url(ping.mp3) url(ping.mp3)} | ||||
| 『提示before』『before的内容』『内容』『after的内容』『提示after』 提示和停顿都在生成的内容之外“读”，至于哪个在外没有规定。 | ||||||
| 背景声音 | play-during | mix（与父元素背景声音混合） none（无任何背景声音） play-during:url(wave.mp3) repeat mix; | ||||
|
声音定位 | 水平◆azimuth | far-left left center-left center center-right right far-right right-side behind leftwards rightwards | ||||
| 垂直◆elevation | <角度> above level below（三个关键字） | |||||
a、<link>中使用media=“print\screen\”等指定媒体类型
b、内部使用 @media print\screen{
body{
font:10pttimes,georgia,serif;
line-height
}
}
@media screen,print,projection{
body{
line-height:120%;
}
}
十三、 e
扫一扫
316
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
