css开发手册础篇.docVIP

基础篇 一、三种样式选择器属性选择器 p {color:red;} 类选择器 .p {color:red;}ID选择器 #p {color:red;} 二、transparent Background: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;} h2{color:red;} strong h2 {color:blue;} 例如：#sidebar {color:red} #sidebar p {color:blue;} 例如：.fancy {color:red;} .fancy p {color:blue;} / li.fancy {color:black;} CSS嵌入 一、外联样式表 link rel=StyleSheet href=/css/basic.css type=text/css media=all style type=text/css media=all @import url(/Styles/mystylesheet.css); /style 注意：使用@import用来对IE4.0以下浏览器进行屏蔽 ? 二、嵌入式样式表 head style type=text/css !- - Body {color:red;} - - /style /head 注意：为了IE3下访问站点，我们可以使用嵌入式样式表（建议在页面中使用内联成功后，剪切到外联样式表中） CSS混合布局应用 ? 一、Margin（框距）padding（边框距） margin属性设置顺序：上左下右 padding属性设置顺序：上左下右 margin:25px 0 25px 0; 简写：margin:25px 0; ? 二、Display显示属性设置 1、Display属性none? (隐藏) .alt {display:none;} span class=altContent List Part/span 2、Display属性block? (块/区域) Img {display:block;} img href=1.gif/img 块级元素：存在自身的盒中，后面跟随一个默认的回车 内联元素：是流的一部分，后面不跟随回车 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; backgro