CSS代码缩写、兼容浏览器技巧总结
1、为何要缩写样式,
对于浏览者而言，缩写可以减少CSS代码量，进而减少CSS文件体积，有利于访问者更快的打开网页;对于开发者而言，CSS代码量少，阅读简洁明了;对于网站服务器而言，在相同带宽下可以承受更多的访问请求。
2、常用CSS样式表缩写语法总结
? 颜色(color)
16进制的色彩值，如果每两位的值相同，可以缩写一半
例如:#000000可以缩写为#000; #336699可以缩写为#369;
? 盒尺寸(padding、margin)
顺序:从上开始，顺时针转;margin:上 右 下 左;
上下左右都相等: margin: 5px(上下左右); == margin: 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;
background-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% 0%;
? 字体(fonts)
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 1em;
line-height: 140%;
font-family: Arial, 宋体;
缩写为 ==> font: italic small-caps bold 1em/140% Arial, 宋体;
font的缩写，如果省略family，如这样子:font: bold 14px/22px; 则在Firefox下是不生效的
完整的写法是:font: bold 14px/22px arial, 宋体;
2、common.css 样式表总结——解决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:Arial,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-break: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: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 }
/* 常用，采用单词首字母缩写方式命名:保持良好的命名风格很重要 :) */
.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、技巧积累(持续补充...)
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; /* 支持 FireFox 浏览器 */
opacity: 0.5; /* CSS
标准
excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载
.该属性支持firefox, Safari和 Opera */
}
4)使用media指令引入两种CSS:打印版本的css和屏幕显示的css
5)我们可以使用page-break-after，page-break-before控制打印时的分页
6)使用缩进(text-indent)显示图片，而隐藏文字(对SEO友好)
.logo { background: url(xxx.gif) no-repeat; width:160px; height:60px; text-indent:
-2000px; }
< h1 class="logo" > 在售产品 < / h1 >
7)100%的高度
为了让 < div id="content" >< /div > 容器自动延伸到整个页面的高度，我们需要告诉和容器高度应为整个页面的高度。
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 #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)哀悼日网站灰化CSS代码
html{filter: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学习顺口溜(很受用) 一、IE边框若显若无，须注意，定是高度设置已忘记;
二、浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中; 三、三像素文本慢移不必慌，高度设置帮你忙;
四、兼容各个浏览须注意，默认设置行高可能是杀手;
五、独立清除浮动须铭记，行高设无，高设零，
设计
领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计
效果兼浏览;
六、学布局须思路，路随布局原理自然直，轻松驾驭html，流水布局少hack，代码清爽，兼容好，友好引擎喜欢迎。
七、所有标签皆有源，只是默认各不同，span是无极，无极生两仪—内联和块级，img较特殊，但也遵法理，其他只是改造各不同，一个*号全归原，层叠样式理须多练习，万物皆规律。 八、图片链接排版须小心，图片链接文字链接若对齐，padding和vertical-align:middle要设定，虽差微细倒无妨。
九、IE浮动双边距，请用display:inline拘。
十、列表横向排版，列表代码须紧靠，空隙自消须铭记。
常用的10个CSS类
我在每个样式表中都使用这个类名。我将这个类指定在包含浮动子元素的容器上。我要用它来清除该
容器内的浮动，使用这些代码: .fixed:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.fixed{
display:block;
}
/* */
.fixed{
min-height:1%;
}
* html .fixed{
height:1%;
}
我一般遇到这种情况下就会用这个属性，这里这些图片是浮动的，它们彼此紧挨着，我就这样使用:
(2)class=”alt”
Alt是”alternative” (或是”alternate”)的缩写。
我在当我有一组以某种方式布局的元素，但是其中的一些有些小变动的地方使用这个类名。比如，图片左
浮动或右浮动。
#content img{
float:left;
display:inline;
margin-right:10px;
border:1px solid #ccc;
padding:1em 0;
background:#fff;
}
#content img.alt{
float:right;
margin-right:0;
margin-left:10px;
}
(3)class=”selected”
这个类名我常常用在导航菜单上，当某个菜单被选中时:
About Us 同时我在用JS实现的标签效果时使用它来现在选中的标签:
- Tag Cloud
...
...
...
(4)class=”first”, class=”last”
在:first-child和:last-child伪类被所有浏览器完全支持之前，我将坚持使用这两个样式。 我用这些类来选择某个元素的第一个和最后一个子元素。我发现这是减少不必要标签的非常棒的方法。
(5)class=”image”
我通常在选择图片时使用标签选择器(例如 #content img)，而根据实际需要将这个类名用于图片的容器
(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标签上面。它最常见的用途就是那些”read more”按钮。
Read more...
那样我就可以用.link控制P内部的链接样式，而且也可以同时用该样式控制这个段落的样式。
(8)class=”one”, class=”two”, class=”three”…
当我需要单独的指出每个元素的时候，我使用这几个样式。最常见的案例就是在导航菜单中使用图片替换
技术的时候。
(9)class=”even”, class=”odd”
这两个类名用来交替显示表格和列表中的相邻的两行。
- Content
- Content
- Content
- Content
或是:
| Content |
Content |
| Content |
Content |
| Content |
Content |
| Content |
Content |
(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, Direction=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; 只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源。
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,ol,dl,dt,dd,img,form,input,textarea,select,fieldset { margin:0px;
padding:0px }
h1,h2,h3,h4,h5,h6,b,strong { font-family:Arial,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 ;text-shadow: -1px 2px 3px #ffb69a;} div,span,th,td,dt,dd,h1,h2,h3,h4,h5,h6,em,strong,i,a,b,a,p { word-break:break-all; word-wrap:break-word; }
ul,ol,dl { list-style-type:none }
select,input,select { vertical-align:middle }
css的一大技巧:利用text-indent实现以图换字
div+css制作网页时，经常会使用到图片，比如logo
标志
禁止坐卧标志下载饮用水保护区标志下载桥隧标志图下载上坡路安全标志下载地理标志专用标志下载
或者一些特殊字体图片，好了，这就涉及到一
个问题:蜘蛛爬行时图片上的文字是不读取 的，为了照顾蜘蛛，我们使用text-indent 属性:
举一个简单的例子:
html代码:
浙公网安备 33021202002483