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文档应该以“文件类型声明”（!DOCTYPE）开头，引用一个文件类型描述。有时是否存在一个合适的文件类型描述会影响一个浏览器显示网页的方式。兼容性问题与浏览器的内核及渲染模式 几种常用文档类型: (用DW新建文件时右下角有文档类型选项) HTML5 !DOCTYPE HTML HTML4.01严格 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN /TR/html4/strict.dtd 这个声明说明文档服从HTML 4.01的严格文件类型描述，这个标准是严格结构化的，使用CSS来做格式化。 XHTML1.0过渡(最常用) !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd HTML4.01过渡(又称松散) !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtd HTML4.01框架集 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN /TR/html4/frameset.dtd 框架集文件类型描述则针对包含框架元素的网页。 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:hover{color:red} 选择器的优先级(参考:CSS选择器优先级) 选择器的兼容问题 IE6-7不支持多类联合，不支持部分伪类，不支持伪元素，只支持部分标签的伪类 2.3 CSS规范 代码规范(参考 第一条，第三条) 编码: CSS文件若含有中文字符，编码必须与HTML文档一致，否则部分浏览器可能不能正确解析，如:IE6 注释: /* 注释内容 */ CSS应该分段，段之间以多个空行分隔，每一段最多一屏左右，每一段必须有恰当的注释 换行: 三条规则以下的，不必换行 命名规范(参考) 选择器命名规范 团队合作命名规范 3.1 HTML Hack 了解即可，不建议使用 !--[if !IE]!-- 除IE外都可识别 !--![endif]-- !--[if IE] 所有的IE可识别 ![endif]-- !--[if IE 5.0] 只有IE5.0可以识别 ![endif]-- !--[if IE 5] 仅IE5.0与IE5.5可以识别 ![endif]-- !--[if gt IE 5.0] IE5.0以及IE5.0以上版本都可以识别 ![endif]-- !--[if IE 6] 仅IE6可识别 ![endif]-- !--[if lt IE 6] IE6以及IE6以下版本可识别 ![endif]-- !--[if gte IE 6] IE6以及IE6以上版本可识别 ![endif]-- !--[if IE 7] 仅IE7可识别 ![endif]-- !--[if lt IE 7] IE7以及IE7以下版本可识别 ![endif]-- !--[if gte IE 7] IE7以及IE7以上版本可识别 ![endif]-- 3.2 CSS Hack CSS Ha