css开发手册基础篇.doc

基础篇一、三种样式选择器属性选择器 p color:red; 类选择器 .p color:red;ID选择器 #p color:red;二、transparentBackground:transparent; 防止定义背景被覆盖三、Netscape4.X（IE/WINDOWS4.0以前的版本）下错误的透明背景理解Background:inhrit; 在netscape4.x下透明背景将被理解为黑绿四、字体默认选择Body font-family:lucida Grande,Verdana,Lucida,Arial,Helvetica,sans-serif; 按顺序调用不同平台的默认字体五、如何解决旧浏览器不支持CSS的情况使用群选择器 例如：p,td,ul,ol,li,dl,dt,dd font-size:small;六、使用netscape4友好规则Body font-family:Verdana,sans-serif;p,td,ul,ol,li,dl,dt,dd font-size:small;七、方法重载细节规则Body font-family:Verdana,sans-serif;p,td,ul,ol,li,dl,dt,dd font-size:small;p font-family:times,Times New Roman,serif;八、内容（派生）选择器Li strong font-style:italic; font-weight:normal 例如：strong color:red; h2color:red; strong h2 color:blue;例如：#sidebar color:red #sidebar p color:blue;例如：.fancy color:red; .fancy p color:blue; / li.fancy color:black;CSS嵌入 一、外联样式表 import url(/Styles/mystylesheet.css);注意：使用import用来对IE4.0以下浏览器进行屏蔽二、嵌入式样式表注意：为了IE3下访问站点，我们可以使用嵌入式样式表（建议在页面中使用内联成功后，剪切到外联样式表中）CSS混合布局应用 一、Margin（框距）padding（边框距）margin属性设置顺序：上左下右padding属性设置顺序：上左下右margin:25px 0 25px 0;简写：margin:25px 0;二、Display显示属性设置1、Display属性none (隐藏).alt display:none;Content List Part2、Display属性block (块/区域)Img display:block;块级元素：存在自身的盒中，后面跟随一个默认的回车内联元素：是流的一部分，后面不跟随回车3、Display属性inline区别block元素，使用inline状态时，显示方式按照内联元素显示三、 动态链接属性设置a:link font-weight : bold; text-decoration : none;color: #c30;background: transparent; a:visited font-weight : bold; text-decoration : none;color: #c30;background: transparent; a:hover font-weight : bold; text-decoration : underline;color: #f60;background: transparent; a:active font-weight : bold; text-decoration : none;color: #f90;background: transparent; 1、文字修饰属性（text-decoration）Text-decoration:underline overline none;Underline:链接时有下划线Overline:连接时有上划线None:连接时无下划线2、动态连接属性顺序(LVHA) LoVeHA！3、IE/WINDOWS的伪装欺骗性应避免使用a:active属性：出现bug 连接会出现冻结现象四、如何设置行高（line-height）Line-height:1.5;五、如何设置文章位置（text-align）可选择属性（left middle right）IE6/WINDOWS的BUG会错误使文档居中六、对于字体的完整CSS应用Font:13px/1.5 Georigia,New Centeury Schoolbook,Times,serif;七、设置页面分界限1、vertical-align:middle; 等于 设置垂直对齐2、background:none 等于 background:url(images/1.gif) repeat;八、设置显示器设备 media属性使用HTML4.01转换到XHTML1.0过渡式transitional （早期的基于Gecko核心的浏览器如：netscpae6.0 Mozilla1.0）一、在Gecko核心浏览器清除CSS间隙规则如下：Img display:block; 使用块级元素清楚间隙.inline display:inline; 使用内联元素显示方式页面如下：也可用Td img display:block;二、在Gecko核心img默认作为内联函数处理在内联元素下方默认留有空白，这是为了给所包含的块下行字母流出的空间盒模型、Bug和工作区CSS四个区域：内容、边框距、边界和边距在使用CSS设置表格之前：width:400px; height:75px;错误的理解：表格面积400px; height:75px;实际上CSS设置的表格：Width:400px height:75px 内容为 Content那么整个盒的面积为：Contentpadding*2+border*2盒模式失效及解决办法：（IE4到IE5.5/Windows）正确理解盒模式的浏览器（IE6/WIN,IE5/MAC,Netscpae6+,Mozilla,Chimera,Kmeleon,Opera5+）Float漂浮属性用来使用在两在不同ID选择器中相连float:left;对于使用padding的表格将使用以下解决方法：Oprea友好规则（Box盒状模型） 解决办法：#navwidth:151px;/* False value for IE4-5.x/Win */voice-family:;voice-family:inherit;width:100px; /* Actual value for conformant browsers */htmlbody #nav width:100px;/* be nice to Opera */IE上的空白Bug 解决方法：缩进代码，IE6/Windows上的漂浮Bug解决办法：使用JavaScript id名称：content If (document.all & window.attachEvent)Windows.attachEvent (onload,fixWinIE);Fuction fixWinIE() If (doucument.all.cotent.offsetHeight) Doucument.all.content.style.display=block;嵌入Flash的Bug： 解决办法：在XHTML中嵌入以下代码：Flash空白故障（IE/WIN 5,5.5,6 Version） 解决办法：使用JavaScript的doucuemnt来欺骗效验系统/CDATAIf (navigator.mimeTypes & navigator.mimeTypesapplication/x-shockwave-flash)Doucument.write (object src=/media/yourflashmovie.swf); 关键字Fahrner方法：（IE5.x/Winodws 提供伪关键字号） 解决办法：P font-size:x-small;/* flase value for WinIE4/5 */Voice-family:;/* trick WinIE4/5 into thinking the rule is over */Voice-familt:inherit;/* recover from trick */Font-size:small;/* intended value for better browsers */Htmlp font-size:small;/* be nice to opera */区别alt属性与title属性 Alt:注释文档不显示Title:显示文档不注释提高可访问性（WAI与508条款） Bobby的可访问性测试 能帮助你使网页适应WAI或508条款为非鼠标用户提供一个选择 解决办法：使用JavaScriptOnkeypress对于非鼠标用户就相当于onclick 对于不能使用JavaScript的用户 Tabindex属性提供连接到属性的快捷方法 使用Tab换档键的屏幕阅读器，可迅速查询相关内容区域显示和隐藏效果 解决办法：Function toggle (targeted ) If (doucument.getElementById ) Targeted = doucument.getElementById (targeted);If (target.style.display = ; else Target.style.display = none;Xhtml部分： Toggle Externals 定义CSS规则：Relevant Externals:Site NameS我们把规则写入CSS外联表中#outside2 Display:block;如果你需要一个元素在页面中是不可见的但仍需其占据空间 解决办法：visibility:hidden;动态菜单（下拉和展开） 下拉式菜单解决办法：/html/menuDropdown.html展开式菜单解决办法：http:/www.g