css相的技巧整理解析.pptVIP

* CSS属性简写，为网页加载提速 通过使用CSS 缩写以及其他的一些简单技巧，你可以在很大程度上减少样式表的大小，以有效的为网页加载提速。 同时将字体的六个属性简写为一行，这样便节省下了五行代码； * 在css样式里---如何极限提升网站速度 网站的速度是一个站长最为头疼的事，但是如何极限提升网站速度呢？这里来说下div+CSS布局的时候怎样做到最精简的代码，以达到极限提升网站速度的目的。 1、 css样式尽量合并成一个外部文件，采用link方式导入到网页中来，可以减少不少内嵌在网页中的css代码。 2、多用全局样式， 比如网页中只有一个h1标签，那么直接在css文件中定义h1的样式，如h1{......}，而不要给h1标签加class或者id来定义样式，这样一 来就可以省略class=或id=，整个网页精简下来就可以简洁不少代码。 3、多采用父级继承样式控制，在div中尽量使 用不同标签来控制网页表现形式，比如一个div中需要有3个不同颜色的文字，这样做同样可以减少不少的class和id。 * body{ font-size:12px; font-family:宋体,Arial, Helvetica, sans-serif;color:#363636;background:#e5e5e5 url(../images/bpbg.jpg) center top no-repeat;} html, body, div, span, h1, h2, h3, h4, h5, h6, em, img, strong, sub, sup, tt,dd, dl, dt, form, label, table, caption, tbody, tfoot, thead, tr, th, td,ul,li,p,a{ margin: 0; padding: 0;? } .cbody{ margin:0 auto;width:982px; position:relative;background:#FFF;} input,select,textarea{ vertical-align:middle;} img{ border:0;} ul,li{ list-style-type:none;} a:link,a:visited{text-decoration:none;color:#010101;} a:hover{text-decoration:underline;color:#ED0909;} .overhide{overflow:hidden;text-indent:-100em; } .clear {clear: both;} .clearfix:after {clear: both;content: ;display: block;font-size: 0;line-height: 0;visibility: hidden;width: 0;height: 0;} .clearfix{zoom:1}? 每一个用css控制的网站，都需要有一个默认的全局定义的css样式，今天写了一份，分享给大家，以后作为默认的使用，具体细节需要略微调整，这样可以省很多事。 CSS全局样式基础代码 * css解决英文字符与阿位伯数字自动换行 word-wrap是控制换行的,可取：word-wrap:break-word | normal | break-all | keep-all break-word：它主要用来是控制是否将强制把单词换行，对于中英中文没有任何问题，但是对于长串的英文无效。 normal：英文单词不被拆开，它是默认值。 break-all，主要解决了长串英文的问题。主要用来是断开单词。在单词到边界时，下个字母自动到下一行。 keep-all，是指对于中、日、单词之间不断词。即只用此时，不用word-wrap，中文就不会换行了。（英文语句正常。） IE下：使用word-wrap:break-word;所有的都正常。 FF下：如这2个都不用的话，中文不会出任何问题。英文语句也不会出问题。但是，长串英文会出问题。 为了解决长串英文，一般用word-wrap:break-word;word-break:break-all;。但是，此方式会导致，普通的英文语句中的单词会被断开（ie下也是）。 最好的方式是 word-wrap:break-word; overflow:hidden; 而不是 word-wrap:break-word; word-break:break-all; 也不是 word-wrap:break-word; overflow:auto; （Firefox浏览器）连续的英文字符和阿拉伯数字的断行,F