css 知识总结.ppt

CSS 知识总结 整理:魏晓江 CSS 在网页设计中的角色 网页设计中的三层架构 结构 - HTML XHTML XML等 表现 - CSS XSL 等 行为 - javascript 等 网页中引入CSS的方式 采用后两种方式后的显示效果略有区别，区别如下：1。连接式：会在装载页面主体部分之前装载css文件，这样显示出来的网页从一开始就是带有样式效果的， 导入式：会在整个页面装载完成后再装载CSS文件，对于有的浏览器来说，在一些情况下，如果网页文件的体积比较大，则会出现先显示无样式的页面，闪烁一下之后再出现设置样式后的效果，从浏览者的感受来说，这是导入式的一个缺陷。 对于一些比较大的网站，为了便于维护，可能会希望把所有的css样式分类别放到几个CSS文件中，这样如果使用连接式引入，就需要几个语句分别导入CSS文件如果要调整CSS文件的分类，就需要同时调整HTML文件，这对于维护工作来说，是一个缺陷，如果使用导入式，则可以只引进一个总的CSS文件，在这个文件中再导入其他独立CSS文件；而连接则不具备这个特性。 因此给大家的建议是：如果仅需要引入一个CSS文件，则使用连接方式，如果需要引入多个CSS文件，则首先用连接方式引入一个“目录”CSS文件，这个“目录”CSS文件中再使用导入式引入其他CSS文件。 如果希望用javascript来动态决定引入哪个css文件，则必须使用连接式才能实现。 行内式 在标签的style属性中写入css样式 不推荐 嵌入式 使用style标签嵌入到网页代码中,一般在head区域 导入式 在style标签中,或css文件中使用@import 链接式 使用link标签引入css文件 推荐 CSS选择器的优先级 选择器分类 标签,ID,类,伪类 单个选择器写法 标签#ID.类:伪类 属性选择器[属性 值] 还有复杂写法,因为兼容问题一般不用这种选择器 选择器关系 空格代表所有子孙元素, 代表直接子元素 ,　, 代表并列选择器 优先级 继承不如指定 ID 类 伪类 标签 内联样式 嵌入样式 导入样式 浏览器默认样式 越具体优先级越高 div a 就比 a 优先级高,但只应用于div下的a标签 标签#id #id ; 标签.class .class CSS中的定位体系 常规流 没有定义float,position relative,absolute,fixed 浮动 定义float属性的 绝对定位 定义position relative,absolute,fixed属性的 CSS Sprite 合并布局中用到的图片，减少文件请求次数，减轻服务器压力 很多时候网页打开速度慢，是由于网络延时的原因，请求文件越少，则可以越明显的减少这种网络延时 部分交互效果更流畅 如一个按钮普通状态和hover状态使用了不同的背景图片，没有用css sprite的时候第一次hover状态会有一个延时 下载图片 ，而用了css sprite后，普通状态的背景和hover状态的背景使用的同一张图片，就省去了第一次切换状态时下载图片的过程 CSS Reset 重置HTML元素的默认样式,以统一在各浏览器中的显示 /*css reset*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td padding:0;margin:0; html,body font-size:12px;line-height:2em;font-family:Microsoft YaHei table border-collapse:collapse;border-spacing:0;font-size:12px fieldset,img,iframe border:0; input,textarea,a,select,button outline:none h1,h2,h3,h4,h5,h6 font-weight:normal;font-size:100%; ol,ul,dl list-style:none; html overflow-y:scroll a text-decoration:none; .center width:984px;margin:0 auto .right float:right;_display:inline .left float:left;_display:inline .clear display:block;float:none;font-size:0px;line-heigh