CSS基础知识讲解
整理:魏晓江
内容要点
CSS版本/ DocumentType(文档类型)
CSS Reset / CSS 选择器/ CSS规范
CSS Hack / Html Hack / JS浏览器判断
IE6常见CSS Bug及解决办法
代码调试及问题分析
CSS版本
CSS参考手册下载
版本标准
维基百科-层叠样式表
文档类型
为了说明文档使用的HTML标准,所有HTML文档应该以“文件类型声明”(<!DOCTYPE>)开头,引用一个文件类型描述。有时是否存在一个合适的文件类型描述会影响一个浏览器显示网页的方式。兼容性问题与浏览器的内核及渲染模式
几种常用文档类型: (用DW新建文件时右下角有文档类型选项)
HTML5
<!DOCTYPE HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML //EN" "/html4/">
这个声明说明文档服从HTML ,这个标准是严格结构化的,使用CSS来做格式化。
(最常用)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Transitional//EN" "/xhtml1/DTD/xhtml1-">
(又称松散)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Transitional//EN" "/html4/">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Frameset//EN" "/html4/">
框架集文件类型描述则针对包含框架元素的网页。
CSS Reset
问题根源
各浏览器对html基础元素渲染有差别,要做出各浏览器表现一致的网站,必须统一这种差别
解决方案(参考:百度百科CSS Reset)
对html元素做一个统一的样式重新设定(Css Reset)
简单的css reset
*{margin:0;padding:0}
一些流行的css reset
CSS选择器
选择器归类及使用
标签选择器(body,p,td…)
ID选择器(#head)
类选择器(.wraper)
伪类选择器(:hover)
伪元素选择器(:after,:before)
选择器的结合
标签+ID+类+伪元素/伪类
举例: p#test p# :hover
多个选择器用,分割
, a:hover{color:red}
选择器的优先级(参考:CSS选择器优先级)
选择器的兼容问题
IE6-7不支持多类联合,不支持部分伪类,不支持伪元素,只支持部分标签的伪类
CSS规范
代码规范(参考第一条,第三条)
编码: CSS文件若含有中文字符,编码必须与HTML文档一致,否则部分浏览器可能不能正确解析,如:IE6
注释: /* 注释内容*/ CSS应该分段,段之间以多个空行分隔,每一段最多一屏左右,每一段必须有恰当的注释
换行: 三条规则以下的,不必换行
命名规范(参考)
选择器命名规范
团队合作命名规范
HTML Hack
了解即可,不建议使用
<!--[if !IE]><!--> 除IE外都可识别<!--<![endif]-->
<!--[if IE]> 所有的IE可识别<![endif]-->
<!--[if IE ]> <![endif]-->
<!--[if IE 5]> <![endif]-->
<!--[if gt IE ]> <![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
CSS基础知识讲解 来自淘豆网m.daumloan.com转载请标明出处.
