CSS代码缩写、兼容浏览器技巧总结

1、CSS代码缩写、兼容浏览器技巧总结1、为何要缩写样式？ 对于浏览者而言，缩写可以减少CSS代码量，进而减少CSS文件体积，有利于访问者更快的打开网页；对于开发者而言，CSS代码量少，阅读简洁明了；对于网站服务器而言，在相同带宽下可以承受更多的访问请求。2、常用CSS样式表缩写语法总结 颜色(color) 16进制的色彩值，如果每两位的值相同，可以缩写一半 例如：#000000可以缩写为#000; #336699可以缩写为#369; 盒尺寸(padding、margin) 顺序：从上开始，顺时针转；margin:上 右 下 左;上下左右都相等: margin: 5px(上下左右);= margi

2、n: 5px 5px 5px 5px;上下相等, 左右相等:margin: 5px(上下) 15px(左右);= margin: 5px 15px 5px 15px;上下不等，左右相等：margin: 5px(上) 10px(左右) 20px(下);= margin: 5px 10px 20px 10px 边框(border) border-width:1px; border-style:solid; border-color:#000; 缩写为 = border:1px solid #000; 背景(Backgrounds) background-color: #f00; backgroun

3、d-image: url(background.gif); background-repeat: no-repeat; background-attachment: fixed; background-position: 0 0; 缩写为 = background: #f00 url(background.gif) no-repeat fixed 0 0;你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为： color: transparent; image: none; repeat: repeat; attachment: scroll; position: 0%

4、 0%; 字体(fonts) font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 1em; line-height: 140%; font-family: Arial, 宋体; 缩写为 =font:italicsmall-capsbold1em/140%Arial, 宋体; font的缩写，如果省略family，如这样子：font: bold 14px/22px; 则在Firefox下是不生效的 完整的写法是：font: bold 14px/22px arial, 宋体;2、common.css

5、 样式表总结解决CSS的浏览器兼容性问题，多年切图工作的总结：）/*统一各个浏览器下 外边距margin、内填充padding的默认值 */html,body,a,h1,h2,h3,h4,h5,h6,p,div,ul,li,ol,dl,dt,dd,img,form,input,textarea,select,fieldset margin:0px; padding:0px /* 统一标题公共样式 text-shadow:gray 0px 0px 5px; 文字阴影 font-weight:800 平滑的加粗 */h1,h2,h3,h4,h5,h6,b,strong font-family:Ar

6、ial,Verdana,sans-serif; font-weight:800 /* 网页公用的属性: 字体、文字颜色、背景色等 */body,table,input,select,textarea font-family:SimSun, 宋体, Arial; font-size:12px; body, table background-color:white body color:#636363; font-size:12px /* 控制英文字符连续自动换行 */div,span,th,td,dt,dd,h1,h2,h3,h4,h5,h6,em,strong,i,a,b,a,p word-b

7、reak:break-all; word-wrap:break-word; ul,ol,dl list-style-type:none select,input,select vertical-align:middle img border:0 none; text-align:absmiddle; background-color:transparent /* 表格居中显示 */table margin-left:auto; margin-right:auto; border-width:0 none /* 默认链接的样式设置 */a color:#000; text-decoration:

8、none a:hover text-decoration:underline /* 去a虚线框 cdl: clear dotted line */.cdl, a:active outline:none; blr:expression(this.onFocus=this.blur() :focus outline:none /* for Firefox */* 清浮动 */.clear display:block !important; clear:both; height:0px; line-height:0px; font-size:0 /* 常用，采用单词首字母缩写方式命名：保持良好的命名

9、风格很重要 ：）*/.tdn text-decoration:none /* 链接无下划线 */.ofh overflow:hidden /* 溢出隐藏 */.tal text-align:left /* 内容左对齐 */.tar text-align:right /* 内容右对齐 */.tac text-align:center /* 内容居中 */.fl float:left /* 左浮动 */.fr float:right /* 右浮动 */.m0a margin:0 auto /* 容器内水平居中 */.bn border:0 none !important; /* 无边框 */3、技

10、巧积累（持续补充.） 1）利用margin: 0 auto; 实现水平居中，必须同时定义容器的宽度(width)才会有效果； 2）关于Border的写法，如果您想定义div的四个边的颜色不同，而粗细和样式都一样，您可以这样写：div.border2 border:1px solid; border-color:color1 color2 color3 color4 四种颜色依次是上，右，下，左的颜色 3）兼容所有的浏览器都可以显示半透明效果的写法 .alpha50 filter: alpha(opacity=50); /*支持 IE 浏览器 */ -moz-opacity: 0.5;/*支持

11、FireFox 浏览器 */ opacity: 0.5; /* CSS标准.该属性支持firefox, Safari和 Opera*/ 4）使用media指令引入两种CSS：打印版本的css和屏幕显示的css 5）我们可以使用break-after，break-before控制打印时的分页 6）使用缩进（text-indent）显示图片，而隐藏文字（对SEO友好） .logo background: url(xxx.gif) no-repeat; width:160px;height:60px; text-indent: -2000px; 在售产品 7）100%的高度 为了让容器自动延伸到整个

12、页面的高度，我们需要告诉和容器高度应为整个页面的高度。 html min-height: 100%; _height:100%; body margin: 0; padding: 0; min-height: 100%; _height:100%; #content padding: 0 20px 0 20px; margin: auto; font: 1.5em arial, verdana; width: 960px; min-height: 100%; _height:100%; 8）跨浏览器的盒阴影效果实例页面.shadow -moz-box-shadow: 3px 3px 4px #

13、000; -webkit-box-shadow: 3px 3px 4px #000; box-shadow: 3px 3px 4px #000; /* For IE 8 */ -ms-filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=#000000); /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=#000000);9）哀悼

14、日网站灰化CSS代码htmlfilter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);CSS HACK 写法第一种：.div background:orange;*background:green !important;*background:blue;第二种：.div margin:10px;*margin:15px;_margin:15px;第三种：#div color: #333; *+html #div color: #999; * html #div color: #666; 十句CSS学习顺口溜（很受用）一、I

15、E边框若显若无，须注意，定是高度设置已忘记；二、浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中；三、三像素文本慢移不必慌，高度设置帮你忙；四、兼容各个浏览须注意，默认设置行高可能是杀手；五、独立清除浮动须铭记，行高设无，高设零，设计效果兼浏览；六、学布局须思路，路随布局原理自然直，轻松驾驭html，流水布局少hack，代码清爽，兼容好，友好引擎喜欢迎。七、所有标签皆有源，只是默认各不同，span是无极，无极生两仪内联和块级，img较特殊，但也遵法理，其他只是改造各不同，一个*号全归原，层叠样式理须多练习，万物皆规律。八、图片链接排版须小心，图片链接文字链接若对齐，padding

16、和vertical-align:middle要设定，虽差微细倒无妨。九、IE浮动双边距，请用display：inline拘。十、列表横向排版，列表代码须紧靠，空隙自消须铭记。常用的10个CSS类我在每个样式表中都使用这个类名。我将这个类指定在包含浮动子元素的容器上。我要用它来清除该容器内的浮动，使用这些代码：.fixed:aftercontent:.;display:block;height:0;clear:both;visibility:hidden;.fixeddisplay:block;/* */.fixedmin-height:1%;* html .fixedheight:1%;我一般

17、遇到这种情况下就会用这个属性，这里这些图片是浮动的，它们彼此紧挨着，我就这样使用： （2）class=”alt”Alt是”alternative” (或是”alternate”)的缩写。我在当我有一组以某种方式布局的元素，但是其中的一些有些小变动的地方使用这个类名。比如，图片左浮动或右浮动。#content imgfloat:left;display:inline;margin-right:10px;border:1px solid #ccc;padding:1em 0;background:#fff;#content img.altfloat:right;margin-right:0;mar

18、gin-left:10px;（3）class=”selected”这个类名我常常用在导航菜单上，当某个菜单被选中时：About Us同时我在用JS实现的标签效果时使用它来现在选中的标签：Tag Cloud.（4）class=”first”, class=”last”在:first-child和:last-child伪类被所有浏览器完全支持之前，我将坚持使用这两个样式。我用这些类来选择某个元素的第一个和最后一个子元素。我发现这是减少不必要标签的非常棒的方法。（5）class=”image”我通常在选择图片时使用标签选择器（例如 #content img），而根据实际需要将这个类名用于图片的容器（

19、p class=”image”）。比方说，你有个新闻列表，你需要图片，而且图片下面有靠左浮动的摘要，然后是余下的新闻内容。我这样做:This is me trying to look cool!The rest of the content here.（6）class=”inner”我常常使用这个样式，必须要说的是，它最常用于表面的用途。我将这个类名指定到某个额外嵌套的div，因为我需要扩展的样式（比如，双背景）。（7）class=”link”就像这个类名一样，我用这个类名来控制链接样式。:)但是我常常将这个类名用在容器上，通常是一个p标签，而不是直接用在A标签上面。它最常见的用途就是那些”r

20、ead more”按钮。Read more.那样我就可以用.link控制P内部的链接样式，而且也可以同时用该样式控制这个段落的样式。（8）class=”one”, class=”two”, class=”three”当我需要单独的指出每个元素的时候，我使用这几个样式。最常见的案例就是在导航菜单中使用图片替换技术的时候。HomeAbout.(9)class=”even”, class=”odd”这两个类名用来交替显示表格和列表中的相邻的两行。ContentContentContentContent或是：ContentContentContentContentContentContentConte

21、ntContent（10）class=”section”这个类名之前一般被称为”box”。:) 在我需要一些特殊样式时，我用它来显示特定章节的内容。content here.CSS阴影效果（兼容N多浏览器）.shadow -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-shadow: 3px 3px 4px #000; /* For IE 8 */ -ms-filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direct

22、ion=135, Color=#000000); /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=#000000);DIV+CSS高手也得看的15个CSS常识1、不要使用过小的图片做背景平铺。这就是为何很多人都不用1px的原因，这才知晓。宽高1px的图片平铺出一个宽高200px的区域，需要200*200=40,000次，占用资源。2、无边框。推荐的写法是border:none;，哈哈，我一直在用这个。border:0;只是定义边框宽度为零

23、，但边框样式、颜色还是会被浏览器解析，占用资源。3、慎用*通配符。所谓通配符，就是将CSS中的所有标签均初始化，不管用的不用的，过时的先进的，一视同仁，这样，大大的占用资源。要有选择的初始化标签。4、CSS的十六进制颜色代码缩写。习惯了缩写及小写，这才知道，原来不是推荐的写法，为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣，有待仔细考证。5、样式放头上，脚本放脚下。不内嵌，只外链。6、坚决不用CSS表达式。7、使用引用样式表，而不是通过import导入。8、一般来说，PNG比GIF要小，小得多。再者，GIF中有多少颜色是被浪费的，很值得优化。9、千万不要在HTML中缩放图片，一者不好看，二者占资源。10、正文字体最好用偶数，12px、14px、16px，效果非常好。特例，15px。11、block、ul、ol等上下留出至少一倍行距，左侧至少两倍行距，右侧随意。12、段落之间，至少要有一倍行距。13、强行指定某些元素的line-height，正文1.6倍于文字大小，标题1.3倍。14、中文标点用全角。英文夹杂在中文中，左右空格，半角。15、中文字体的粗体和斜体，远离较好，利民利己。html,body,a,h1,h2,h3,h4,h5,h6,p,div,ul,li,o