CSS基础知识讲解.ppt

CSS基础知识讲解 整理:魏晓江 内容要点 CSS版本 / DocumentType(文档类型) CSS Reset / CSS 选择器 / CSS规范 CSS Hack / Html Hack / JS浏览器判断 IE6常见CSS Bug及解决办法 代码调试及问题分析 1.1 CSS版本 CSS参考手册下载 CSS2.0 CSS2.0带滤镜 CSS3.0 目前大多浏览器实现了CSS1.0和2.0的标准 IE系列CSS2.0部分未实现 版本标准 维基百科-层叠样式表 1.2 文档类型 为了说明文档使用的HTML标准，所有HTML文档应该以“文件类型声明”（ ）开头，引用一个文件类型描述。有时是否存在一个合适的文件 类型描述会影响一个浏览器显示网页的方式。兼容性问题与浏览器的内核及渲染模式 几种常用文档类型: (用DW新建文件时右下角有文档类型选项) HTML5 HTML4.01严格 这个声明说明文档服从HTML 4.01的严格文件类型描述，这个标准是严格结构化的，使用CSS来做格式化。 XHTML1.0过渡(最常用) HTML4.01过渡(又称松散) HTML4.01框架集 框架集文件类型描述则针对包含框架元素的网页。 2.1 CSS Reset 问题根源 各浏览器对html基础元素渲染有差别，要做出各浏览器表现一致的网站，必须统一 这种差别 解决方案(参考:百度百科CSS Reset) 对html元素做一个统一的样式重新设定(Css Reset) 简单的css reset *margin:0;padding:0 一些流行的css reset 2.2 CSS选择器 选择器归类及使用 标签选择器(body,p,td) ID选择器(#head) 类选择器(.wraper) 伪类选择器(:hover) 伪元素选择器(:after,:before) 选择器的结合 标签+ID+类+伪元素/伪类 举例: p#test p.active p#test.active p.active.last p.active:hover 多个选择器用,分割 a.hover, a:hovercolor:red 选择器的优先级(参考:CSS选择器优先级) 选择器的兼容问题 IE6-7不支持多类联合，不支持部分伪类，不支持伪元素，只支持部分标签的伪类 2.3 CSS规范 代码规范(参考 第一条，第三条) 编码: CSS文件若含有中文字符，编码必须与HTML文档一致，否则部分 浏览器可能不能正确解析，如:IE6 注释: /* 注释内容 */ CSS应该分段，段之间以多个空行分隔，每一段最 多一屏左右，每一段必须有恰当的注释 换行: 三条规则以下的，不必换行 命名规范(参考) 选择器命名规范 团队合作命名规范 3.1 HTML Hack 了解即可，不建议使用 除IE外都可识别 所有的IE可识别 只有IE5.0可以识别 仅IE5.0与IE5.5可以识别 IE5.0以及IE5.0以上版本都可以识别 仅IE6可识别 IE6以及IE6以下版本可识别 IE6以及IE6以上版本可识别 仅IE7可识别 IE7以及IE7以下版本可识别 IE7以及IE7以上版本可识别 3.2 CSS Hack CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法 _*+09!important:root IE6 IE7 IE8 IE9 其它 代码_width:1 00px *width: 100px +width :100px width:100px !important 注: !important可被ie6识别为一般属性，但不会识别到优先级 3.3 JS浏览器判断 上上策:按功能判断 If(document.getElementsByClassName) /use If(document.querySelector) Var elems=document.querySelector(div#id .test); 下策:根据浏览器信息判断 Navigator.userAgent jQuery.browser,$.browser.version 4.1 IE6常见问题 浮动元素双边距(W3C help) .floatleftfloat:left;_display:inline; 其它参考 IE6包含绝对定位的元素overflow无效(必须将该元素自身也设为绝对定位) 可以利用这一特性解决IE6子元素撑大父元素的问题 标签闭合渲染 不支持label特性(点击label时触发内部表单点击) 常见CSS兼容问题 5. 代码